diff --git a/src/assets/fire/dataCount.png b/src/assets/fire/dataCount.png new file mode 100644 index 0000000..9dc7453 Binary files /dev/null and b/src/assets/fire/dataCount.png differ diff --git a/src/assets/fire/form_blue.png b/src/assets/fire/form_blue.png new file mode 100644 index 0000000..a4874c4 Binary files /dev/null and b/src/assets/fire/form_blue.png differ diff --git a/src/assets/fire/form_green.png b/src/assets/fire/form_green.png new file mode 100644 index 0000000..34866d7 Binary files /dev/null and b/src/assets/fire/form_green.png differ diff --git a/src/assets/fire/form_red.png b/src/assets/fire/form_red.png new file mode 100644 index 0000000..dd29987 Binary files /dev/null and b/src/assets/fire/form_red.png differ diff --git a/src/assets/fire/form_yellow.png b/src/assets/fire/form_yellow.png new file mode 100644 index 0000000..93d548b Binary files /dev/null and b/src/assets/fire/form_yellow.png differ diff --git a/src/assets/fire/safeData.png b/src/assets/fire/safeData.png new file mode 100644 index 0000000..520153d Binary files /dev/null and b/src/assets/fire/safeData.png differ diff --git a/src/assets/fire/susan.png b/src/assets/fire/susan.png new file mode 100644 index 0000000..7c7a3c6 Binary files /dev/null and b/src/assets/fire/susan.png differ diff --git a/src/assets/fire/work.png b/src/assets/fire/work.png new file mode 100644 index 0000000..1606d41 Binary files /dev/null and b/src/assets/fire/work.png differ diff --git a/src/assets/fire/xiaofang.png b/src/assets/fire/xiaofang.png new file mode 100644 index 0000000..b8e7292 Binary files /dev/null and b/src/assets/fire/xiaofang.png differ diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 191ef4d..444f775 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -131,6 +131,53 @@ a { } } } +// 切换按钮样式 +.tabs_datag1 { + ul { + display: flex; + justify-content: flex-end; + align-items: center; + line-height: 20px; + font-size: 13px; + margin: 0 30px 0 0; + li { + margin: 0 5px; + width: 66px; + height: 24px; + padding-top: 2px; + //background: #09304a; + background: linear-gradient(-45deg,transparent 8px,#09304a 0); + //border: 1px solid transparent; + color: #8ebbcd; + cursor: pointer; + text-align: center; + } + + li:nth-child(1) { + margin: 0 5px; + width: 66px; + height: 24px; + //background: #0b4471; + background: linear-gradient(-45deg,transparent 8px,#0b4471 0); + //border: 1px solid transparent; + color: #fff; + cursor: pointer; + text-align: center; + } + + li:hover { + margin: 0 5px; + width: 66px; + height: 24px; + //background: #0b4471; + background: linear-gradient(-45deg,transparent 8px,#0b4471 0); + //border: 1px solid transparent; + color: #fff; + cursor: pointer; + text-align: center; + } + } +} .colorBlack { color: #272727 !important; diff --git a/src/components/echart/fire/safeChart.vue b/src/components/echart/fire/safeChart.vue new file mode 100644 index 0000000..4e08e9b --- /dev/null +++ b/src/components/echart/fire/safeChart.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/src/views/carTravel/costControl.vue b/src/views/carTravel/costControl.vue index a9e2816..b8f289c 100644 --- a/src/views/carTravel/costControl.vue +++ b/src/views/carTravel/costControl.vue @@ -50,27 +50,184 @@
-
- - +
+
车均费用排名统计
+ +
+
    +
  • 公务用车
    • +
+
    +
  • 总费用
    • +
  • 加油费用
    • +
  • 维修保养费用
    • +
+
+
+
+
+
    +
  • 排名
    • +
  • 费用类别
    • +
  • 车型
    • +
  • 车均费用
    • +
+
+
+
    +
  • {{item.id}}
    • +
    • +
  • {{item.type}}
    • +
  • {{item.carType}}
    • +
  • {{item.cost}}
    • +
+
+
+
-
- -
+ +
+
单车成本排名
+ + + +
+
    +
  • 公务用车
    • +
+
    +
  • 总费用
    • +
  • 加油费用
    • +
  • 维修保养费用
    • +
+
+
+
+
+
    +
  • 排名
    • +
  • 费用类别
    • +
  • 车型
    • +
  • 车牌号
    • +
  • 车均费用
    • +
+
+
+
    +
  • {{item.id}}
    • +
    • +
  • {{item.type}}
    • +
  • {{item.carType}}
    • +
  • {{item.carCode}}
    • +
  • {{item.cost}}
    • +
+
+
+
+
-
- + + + +
+
品牌型号成本排名
+ + +
+
    +
  • 公务用车
    • +
+
    +
  • 总费用
    • +
  • 加油费用
    • +
  • 维修保养费用
    • +
+
+
+
+
+
    +
  • 排名
    • +
  • 费用类别
    • +
  • 车型
    • +
  • 品牌
    • +
  • 车均费用
    • +
+
+
+
    +
  • {{item.id}}
    • +
    • +
  • {{item.type}}
    • +
  • {{item.carType}}
    • +
  • {{item.brand}}
    • +
  • {{item.cost}}
    • +
+
+
+
+
+ + + +
+
动力类型成本排名
+ + + +
+
    +
  • 公务用车
    • +
+
    +
  • 总费用
    • +
  • 加油费用
    • +
  • 维修保养费用
    • +
+
+
+
+
+
    +
  • 排名
    • +
  • 费用类别
    • +
  • 车型
    • +
  • 动力类型
    • +
  • 车均费用
    • +
+
+
+
    +
  • {{item.id}}
    • +
    • +
  • {{item.type}}
    • +
  • {{item.carType}}
    • +
  • {{item.powerType}}
    • +
  • {{item.cost}}
    • +
+
+
+
+
-
- -
-
@@ -136,6 +293,230 @@ export default { ['其他商服用地', '1', '0.07%'], ['居住用地', '560', '40.85%'],] }, + tableData:[ + { + id:require('../../assets/carTravel/1.png'), + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/2.png'), + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/3.png'), + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:4, + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:5, + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:6, + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:7, + type:'总费用', + carType:'小车型', + cost:'5478963元' + }, + { + id:8, + type:'总费用', + carType:'小车型', + cost:'5478963元' + } + ], + tableData1:[ + { + id:require('../../assets/carTravel/1.png'), + type:'总费用', + carType:'小车型', + carCode:'苏A56IOK', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/2.png'), + type:'总费用', + carType:'小车型', + carCode:'苏AGH596', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/3.png'), + type:'总费用', + carType:'小车型', + carCode:'苏ALK960', + cost:'5478963元' + }, + { + id:4, + type:'总费用', + carType:'小车型', + carCode:'苏AP2589', + cost:'5478963元' + }, + { + id:5, + type:'总费用', + carType:'小车型', + carCode:'苏A56IOK', + cost:'5478963元' + }, + { + id:6, + type:'总费用', + carType:'小车型', + carCode:'苏A56IOK', + cost:'5478963元' + }, + { + id:7, + type:'总费用', + carType:'小车型', + carCode:'苏A56IOK', + cost:'5478963元' + }, + { + id:8, + type:'总费用', + carType:'小车型', + carCode:'苏A56IOK', + cost:'5478963元' + } + ], + tableData2:[ + { + id:require('../../assets/carTravel/1.png'), + type:'总费用', + carType:'小车型', + brand:'大众', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/2.png'), + type:'总费用', + carType:'小车型', + brand:'丰田', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/3.png'), + type:'总费用', + carType:'小车型', + brand:'奥迪', + cost:'5478963元' + }, + { + id:4, + type:'总费用', + carType:'小车型', + brand:'大众', + cost:'5478963元' + }, + { + id:5, + type:'总费用', + carType:'小车型', + brand:'丰田', + cost:'5478963元' + }, + { + id:6, + type:'总费用', + carType:'小车型', + brand:'奥迪', + cost:'5478963元' + }, + { + id:7, + type:'总费用', + carType:'小车型', + brand:'大众', + cost:'5478963元' + }, + { + id:8, + type:'总费用', + carType:'小车型', + brand:'奔驰', + cost:'5478963元' + } + ], + tableData3:[ + { + id:require('../../assets/carTravel/1.png'), + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/2.png'), + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:require('../../assets/carTravel/3.png'), + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:4, + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:5, + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:6, + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:7, + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + }, + { + id:8, + type:'总费用', + carType:'小车型', + powerType:'燃油', + cost:'5478963元' + } + ] }; }, components: { @@ -417,4 +798,62 @@ left: 63%; diff --git a/src/views/carTravel/trajectoryRegulation.vue b/src/views/carTravel/trajectoryRegulation.vue index 5e4d1f8..b453787 100644 --- a/src/views/carTravel/trajectoryRegulation.vue +++ b/src/views/carTravel/trajectoryRegulation.vue @@ -49,7 +49,15 @@
用车品牌型号占比
-
+
+
    +
  • 当 天
    • +
  • 当 月
    • +
  • 近三月
    • +
  • 近一年
    • +
+
+
  • @@ -84,7 +92,15 @@
    用车时间趋势
    -
    +
    +
      +
    • 当 天
      • +
    • 当 月
      • +
    • 近三月
      • +
    • 近一年
      • +
    +
    +
    @@ -103,42 +119,446 @@
    • - + +
      +
      +
      入禁预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
    • - + +
      +
      +
      区域异常集中预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
    • - + +
      +
      +
      未按规定入库预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
    • - -
      • + +
      +
      +
      单车规律性停放预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
      + +
    • - + +
      +
      +
      工作日非工作时间用车预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
      +
    - +
    • - -
      • + +
      +
      +
      入禁预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 车牌号
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.brand}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
      + +
    • - -
      • + +
      +
      +
      区域异常集中预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 车牌号
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.brand}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
      + +
    • - + +
      +
      +
      未按规定入库预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 车牌号
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.brand}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
      +
      • +
    • + +
      +
      +
      单车规律性停放预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 车牌号
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.brand}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
    • - -
      • -
    • - + +
      +
      +
      工作日非工作时间用车预警
      + + +
      +
        +
      • 当 天
        • +
      • 当 月
        • +
      • 近三月
        • +
      • 近一年
        • +
      +
      +
      +
      +
      +
        +
      • +
      • 排名
        • +
      • 车牌号
        • +
      • 单位名称
        • +
      • 预警数量
        • +
      +
      +
      +
        +
        • +
      • {{item.id}}
        • +
      • {{item.brand}}
        • +
      • {{item.name}}
        • +
      • {{item.count}}
        • +
      +
      +
      +
      +
      +
    @@ -183,7 +603,71 @@ export default { dateWeek: null, weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], decorationColor: ["#568aea", "#000000"], - + tableData:[ + { + rank:require('../../assets/carTravel/pm1.png'), + id:'1', + name:'南京市供电公司', + count:'11', + }, + { + rank:require('../../assets/carTravel/pm2.png'), + id:'2', + name:'徐州市供电公司', + count:'12', + }, + { + rank:require('../../assets/carTravel/pm3.png'), + id:'3', + name:'无锡市供电公司', + count:'9', + }, + { + id:'4', + name:'扬州市供电公司', + count:'7', + }, + { + id:'5', + name:'南通市供电公司', + count:'5', + }, + ], + tableData1:[ + { + rank:require('../../assets/carTravel/pm1.png'), + id:'1', + brand:'苏A12345', + name:'南京市供电公司', + count:'11', + }, + { + rank:require('../../assets/carTravel/pm2.png'), + id:'2', + brand:'苏A12345', + name:'徐州市供电公司', + count:'12', + }, + { + rank:require('../../assets/carTravel/pm3.png'), + id:'3', + brand:'苏A12345', + name:'无锡市供电公司', + count:'9', + }, + { + id:'4', + brand:'苏A12345', + name:'扬州市供电公司', + count:'7', + }, + { + id:'5', + brand:'苏A12345', + name:'南通市供电公司', + count:'5', + }, + ], }; }, components: { @@ -587,4 +1071,124 @@ left: 63%; diff --git a/src/views/carTravel/updateAssessment.vue b/src/views/carTravel/updateAssessment.vue index bfb9657..256fe30 100644 --- a/src/views/carTravel/updateAssessment.vue +++ b/src/views/carTravel/updateAssessment.vue @@ -50,8 +50,86 @@
    -
    - + + + +
    +
    +
      +
    • + 报废更新概况 +
      • +
    • + 用车分析概况 +
      • +
    +
    +
    +
    公务用车按报废车型统计
    + + +
    +
    +
    +
      +
    • 排名
      • +
    • 车型
      • +
    • 平均年限
      • +
    • 平均里程
      • +
    • 平均维修成本
      • +
    • 车辆更新率
      • +
    +
    +
    +
      +
    • {{item.id}}
      • +
    • {{item.carType}}
      • +
    • {{item.ageAvg}}
      • +
    • {{item.mileAvg}}
      • +
    • {{item.repairAvg}}
      • +
    • {{item.renRate}}
      • +
    +
    +
    +
    +
    +
    生产用车按报废车型统计
    + + +
    +
    +
    +
      +
    • 排名
      • +
    • 车型
      • +
    • 平均年限
      • +
    • 平均里程
      • +
    • 平均维修成本
      • +
    • 车辆更新率
      • +
    +
    +
    +
      +
    • {{item.id}}
      • +
    • {{item.carType}}
      • +
    • {{item.ageAvg}}
      • +
    • {{item.mileAvg}}
      • +
    • {{item.repairAvg}}
      • +
    • {{item.renRate}}
      • +
    +
    +
    +
    +
    +
    @@ -143,15 +221,150 @@
    - + +
    +
    +
      +
    • + 公务用车 +
      • +
    • + 生产服务用车 +
      • +
    +
    +
    +
    +
    +
    车辆使用率较高的单位排名
    + + +
    +
    +
    +
      +
    • +
    • 排名
      • +
    • 单位名称
      • +
    • 车型
      • +
    • 使用率
      • +
    +
    +
    +
      +
      • +
    • {{item.id}}
      • +
    • {{item.name}}
      • +
    • {{item.carType}}
      • +
    • {{item.useRate}}
      • +
    +
    +
    +
    +
    +
    - + +
    +
    +
      +
    • + 公务用车 +
      • +
    • + 生产服务用车 +
      • +
    +
    +
    +
    +
    +
    车辆使用率较低的单位排名
    + + +
    +
    +
    +
      +
    • +
    • 排名
      • +
    • 单位名称
      • +
    • 车型
      • +
    • 使用率
      • +
    +
    +
    +
      +
      • +
    • {{item.id}}
      • +
    • {{item.name}}
      • +
    • {{item.carType}}
      • +
    • {{item.useRate}}
      • +
    +
    +
    +
    +
    +
    - + +
    +
    +
      +
    • + 公务用车 +
      • +
    • + 生产服务用车 +
      • +
    +
    +
    +
    +
    +
    车辆使用率较低的单位排名
    + + +
    +
    +
    +
      +
    • +
    • 排名
      • +
    • 单位名称
      • +
    • 车型
      • +
    • 使用率
      • +
    +
    +
    +
      +
      • +
    • {{item.id}}
      • +
    • {{item.name}}
      • +
    • {{item.carType}}
      • +
    • {{item.useRate}}
      • +
    +
    +
    +
    +
    +
    @@ -192,7 +405,137 @@ export default { dateWeek: null, weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], decorationColor: ["#568aea", "#000000"], - + tableData:[ + { + id:1, + carType:'小车型', + ageAvg:'15年', + mileAvg:'400000公里', + repairAvg:'5478963元', + renRate:'10%' + }, + { + id:2, + carType:'MPV', + ageAvg:'15年', + mileAvg:'400000公里', + repairAvg:'5478963元', + renRate:'20%' + }, + { + id:3, + carType:'考斯特', + ageAvg:'15年', + mileAvg:'400000公里', + repairAvg:'5478963元', + renRate:'5%' + } + ], + tableData1:[ + { + rank:require('../../assets/carTravel/pm1.png'), + id:'1', + name:'南京市供电公司', + carType:'小型车', + useRate:'30%', + }, + { + rank:require('../../assets/carTravel/pm2.png'), + id:'2', + name:'徐州市供电公司', + carType:'MPV', + useRate:'17%', + }, + { + rank:require('../../assets/carTravel/pm3.png'), + id:'3', + name:'无锡市供电公司', + carType:'考斯特', + useRate:'12%', + }, + { + id:'4', + name:'扬州市供电公司', + carType:'小型车', + useRate:'10%', + }, + { + id:'5', + name:'南通市供电公司', + carType:'MPV', + useRate:'9%', + }, + ], + tableData2:[ + { + rank:require('../../assets/carTravel/pm1.png'), + id:'1', + name:'扬州市供电公司', + carType:'考斯特', + useRate:'26%', + }, + { + rank:require('../../assets/carTravel/pm2.png'), + id:'2', + name:'徐州市供电公司', + carType:'小型车', + useRate:'20%', + }, + { + rank:require('../../assets/carTravel/pm3.png'), + id:'3', + name:'南京市供电公司', + carType:'MPV', + useRate:'10%', + }, + { + id:'4', + name:'无锡市供电公司', + carType:'考斯特', + useRate:'5%', + }, + { + id:'5', + name:'南通市供电公司', + carType:'小型车', + useRate:'4%', + }, + ], + tableData3:[ + { + rank:require('../../assets/carTravel/pm1.png'), + id:'1', + name:'无锡市供电公司', + carType:'MPV', + useRate:'30%', + }, + { + rank:require('../../assets/carTravel/pm2.png'), + id:'2', + name:'南京市供电公司', + carType:'考斯特', + useRate:'17%', + }, + { + rank:require('../../assets/carTravel/pm3.png'), + id:'3', + name:'南通市供电公司', + carType:'小型车', + useRate:'12%', + }, + { + id:'4', + name:'徐州市供电公司', + carType:'MPV', + useRate:'10%', + }, + { + id:'5', + name:'扬州市供电公司', + carType:'小型车', + useRate:'9%', + }, + ], }; }, components: { @@ -308,6 +651,30 @@ left: 63%; top: 120px; left: 2%; width: 100%; + .leftHeader{ + width: 34%; + display: inline-block; + position: absolute; + left: 2%; + .head{ + width: 100%; + li{ + float: left; + width: 22%; + height: 40px; + text-align: center; + line-height: 40px; + background: url(../../assets/carTravel/touch.png) no-repeat; + color: #8ec1d8; + font-weight: 700; + } + li:hover{ + color: #25dff4; + background: url(../../assets/carTravel/touch_hot.png) no-repeat; + font-weight: 700; + } + } + } } .rightTravel{ position: absolute; @@ -851,4 +1218,143 @@ height:50% diff --git a/src/views/fire.vue b/src/views/fire.vue index 1952f15..a442c7d 100644 --- a/src/views/fire.vue +++ b/src/views/fire.vue @@ -15,164 +15,232 @@
    -
    巡查接警占比
    -
    -
      -
    • 昨日
      • -
    • 本月
      • -
    • 本年
      • -
    -
    -
    - - -
  • 1000电话联络量
    • -
  • 236真警数量
    • +
    安全指数
    + + + + + + + + + + + + + + + + + + + +
+
+
数据汇总
+ + + +
+
  • - 30%真警占比 +
    + + 164 +
    + 管控对象 +
    • +
  • +
    + + 71 +
    + 巡查部位 +
    • +
  • +
    + + 26 +
    + 管控人员
    • - -
-
-
-
本周/月/季度巡查
-
- -
-
-
-
巡查轨迹
-
-
    -
  • 本周
    • -
  • 本月
    • -
  • 本年
-
- -
+
-
-
-
-
-
-
实时巡查情况分析图
-
    -
  • - -
    出警数量
    -
    - 371人 -
    -     - -
    真警占比
    -
    - 35% -
    -     -
    • -
  • - -
    道路承载压力（辆）
    -
    - 107/分 -
    -     - -
    道路承载量
    -
    - 中 -
    -     -
    • -
  • - -
    消防部署
    -
    - 3.3/人 -
    -     - -
    KM²警力
    -
    - 正常 -
    -     -
    • -
  • - -
    交管设备
    -
    217
    -     - -
    设备在线率
    -
    - 92.7% -
    -     -
    • -
-
-
-
-
-
今日实时巡查
-
- -
3秒前
-
14:00
-
15:00
-
16:00
- - -
-
- 小王三七分布 -
-
- 会议室温度异常 -
-
-
-
- 小王三七分布 -
-
- 办公室温度正常 -
-
-
-
- 小王三七分布 -
-
- 设备间温度正常 -
-
-
-
- 小王三七分布 -
-
- 机房温度正常 -
-
- +
+
工作分析
+ + + + + + + +
+ +
+
+
+ + {{n.type}} + {{n.count}} +
+
+
    +
  • 检查周期
    • +
  • 检查状态
    • +
  • 解除标识
    • +
+
+
+
+
+
    +
  • 任务名称
    • +
  • 检查周期
    • +
  • 类别
    • +
  • 部位名称
    • +
+
+
+
    +
  • {{item.name}}
    • +
  • {{item.period}}
    • +
  • {{item.type}}
    • +
  • {{item.dep}}
    • +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
    +
  • 序号
    • +
  • 姓名
    • +
  • 所属部门
    • +
+
+
+
    +
  • {{item.id}}
    • +
  • {{item.name}}
    • +
  • {{item.dep}}
    • +
+
+
-
-
巡防管路记录
- -
-
-
巡防异动记录
-
-
    -
  • 本周
    • -
  • 本月
    • -
  • 本年
    • -
+
+
消防应急演练
+ + + +
+
+
    +
  • +
    + + 1 +
    + 应急预案数量 +
    • +
  • +
    + + 2 +
    + 应急演练次数 +
    • +
  • +
    + + 2 +
    + 应急疏散路线 +
    • +
+
-
    -
  • 异动信息小王三七无巡查
    • -
  • 异动信息小王三七无巡查
    • -
  • 异动信息小王三七无巡查
    • -
  • 异动信息小王三七无巡查
    • -
-
+
+
消防巡检作业路径规划
+ +
+ + + 厨房燃气使用 + 正常 + 点击查看 + + + + 易燃易爆物品存储 + 异常 + 点击查看 + + + + 动火作业 + 正常 + 点击查看 + + + + 公务巡检 + 正常 + 点击查看 + +
+
+
+
消防设备信息展示
+ + + + + + + + + + + + + +
+
+
    +
  • +
    + 13 + +
    + 消防设备信息展示 +
    • +
  • +
    + 1966 + +
    + 烟雾传感器数量 +
    • +
  • +
    + 249 + +
    + 消防栓数量 +
    • +
  • +
    + 1133 + +
    + 灭火器数量 +
    • +
+
+
+
    +
  • +
    + 11210 + +
    + 喷淋头数量 +
    • +
  • +
    + 178 + +
    + 消防警铃数量 +
    • +
  • +
    + 41 + +
    + 应急电源数量 +
    • +
  • +
    + 280 + +
    + 摄像头数量 +
    • +
+
+
+
+
+
消防设备异常信息列表
+ + + +
+
+
+
    +
  • 序号
    • +
  • 设备名称
    • +
  • 设备编号
    • +
  • 异常信息
    • +
+
+
+
    +
  • {{item.id}}
    • +
  • {{item.name}}
    • +
  • {{item.code}}
    • +
  • {{item.abnormal}}
    • +
+
+
+
+
+
@@ -237,6 +474,7 @@ import HoriBar from "../components/echart/fire/horiBar.vue"; import PieChart from "../components/echart/fire/pieChart.vue"; import LineChart from "../components/echart/fire/lineChart.vue"; import WaterChart from "../components/echart/fire/waterChart.vue"; +import safeChart from "_c/echart/fire/safeChart"; export default { mixins: [drawMixin], data() { @@ -269,6 +507,92 @@ export default { { name: "设备7", value: 40 }, ], }, + workData:[ + { + count:226846, + type:'正常', + icon:require('../assets/fire/work.png') + }, + { + count:0, + type:'超时', + icon:require('../assets/fire/work.png') + } + , + { + count:573, + type:'待办', + icon:require('../assets/fire/work.png') + }, + { + count:0, + type:'隐患', + icon:require('../assets/fire/work.png') + } + ], + tableData:[ + { + name:'疏散标志', + period:'重复日', + type:'消防巡检', + dep:'瑞风管理处' + }, + { + name:'自动喷林', + period:'重复日', + type:'消防巡检', + dep:'瑞风管理处' + }, + { + name:'手报', + period:'重复日', + type:'消防巡检', + dep:'瑞风管理处' + }, + { + name:'烟感', + period:'重复日', + type:'消防巡检', + dep:'瑞风管理处' + }, + ], + personInfo:[ + { + id:'1', + name:'蒋涛', + dep:'苏星公司上海路管理处', + }, + { + id:'2', + name:'孔德军', + dep:'苏星公司上海路管理处', + } + ], + equipmentData:[ + { + id:'1', + name:'烟感器', + code:'F51254', + abnormal:'瑞风路管理处' + }, + { + id:'2', + name:'喷淋头', + code:'D62545', + abnormal:'瑞风路管理处' + }, + { + id:'3', + name:'消防栓', + code:'F45626', + abnormal:'瑞风路管理处' + },{ + id:'4', + name:'烟感器', + code:'R45258', + abnormal:'瑞风路管理处' + } + ] }; }, components: { @@ -278,6 +602,7 @@ export default { headerIndex, LineChart, WaterChart, + safeChart, }, mounted() { this.timeFn(); @@ -346,6 +671,7 @@ export default { grid-template-columns: 2.3fr 5fr 1.8fr; margin: 0 50px; position: absolute; + top:122px } .float_time { float: right; @@ -604,7 +930,7 @@ $box-width: 300px; height: 40px; width: 402px; margin: 10px auto 20px auto; - background: url("../assets//fire/firesafe.png"); + background: url("../assets/fire/firesafe.png"); display: flex; flex-direction: row; justify-content: space-between; @@ -638,4 +964,330 @@ $box-width: 300px; .c_posi { position: absolute; } +.safe-data{ + background: url("../assets/fire/safeData.png") no-repeat; + width: 211px; + height: 181px; + //margin: auto; + margin-top: 2%; + margin-bottom: 4%; + margin-left: 27%; +} +.data-count{ + ul{ + display: flex; + justify-content: space-between; + li{ + .data-count-number1{ + position: relative; + width: 108px; + height: 106px; + left: 30%; + margin-top: 35%; + margin-bottom: 40%; + span { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-number2{ + position: relative; + width: 108px; + height: 106px; + margin-top: 35%; + margin-bottom: 40%; + span { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-number3{ + position: relative; + width: 108px; + height: 106px; + right: 30%; + margin-top: 35%; + margin-bottom: 40%; + span { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-font1{ + position: relative; + left: 45%; + bottom: 15%; + color: #a8ddf4; + } + .data-count-font2{ + position: relative; + left: 25%; + bottom: 15%; + color: #a8ddf4; + } + .data-count-font3{ + position: relative; + right: 10%; + bottom: 15%; + color: #a8ddf4; + } + } + } +} +.xiaoFang{ + ul{ + display: flex; + justify-content: space-between; + li{ + .data-count-number1{ + position: relative; + width: 108px; + height: 106px; + left: 23%; + span { + position: absolute; + left: 50%; + top: 40%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-number2{ + position: relative; + width: 108px; + height: 106px; + span { + position: absolute; + left: 50%; + top: 40%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-number3{ + position: relative; + width: 108px; + height: 106px; + right: 30%; + span { + position: absolute; + left: 50%; + top: 40%; + transform: translate(-50%, -50%); + font-size: 30px; + } + } + .data-count-font1{ + position: relative; + left: 23%; + bottom: 15%; + color: #a8ddf4; + } + .data-count-font2{ + position: relative; + left: 3%; + bottom: 15%; + color: #a8ddf4; + } + .data-count-font3{ + position: relative; + right: 22%; + bottom: 15%; + color: #a8ddf4; + } + } + } +} +.fire-work >div{ + float: left; + margin-top: 5%; + width: 40%; + margin-left: 4%; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + .type{ + position: relative; + right: 49%; + top: -40px; + } + .count{ + position: absolute; + margin-bottom: 30px; + margin-left: 20px; + font-size: 20px; + font-weight: bold; + } +} +.data-tit-bg-work > div:nth-of-type(4)img,.data-tit-bg-work > div:nth-of-type(3)img{ + position: relative; + top: -30px; +} +.data-tit-bg-work > div:nth-of-type(2)img,.data-tit-bg-work > div:nth-of-type(4)img{ + position: relative; + left: 50px; +} +.data-tit-bg-work > div:nth-of-type(3)span:nth-of-type(1){ + top: -115px; + right:28px; + position: relative; +} +.data-tit-bg-work > div:nth-of-type(4)span:nth-of-type(1){ + top: -115px; + right:-10px; + position: relative; +} +.data-tit-bg-work > div:nth-of-type(2)span:nth-of-type(1){ + left: 12px; + position: relative; + margin-top: -28px; +} +.data-tit-bg-work > div:nth-of-type(3)span:nth-of-type(2){ + position: relative; + top: -100px; + right: 12px; +} +.data-tit-bg-work > div:nth-of-type(4)span:nth-of-type(2){ + position: relative; + top: -100px; + left: 10px; +} +.data-tit-bg-work > div:nth-of-type(2)span:nth-of-type(2){ + position: relative; + left: 10px; + top: -38px; +} +.data-tit-bg-work > div:nth-of-type(3)img,.data-tit-bg-work > div:nth-of-type(4)img{ + position: relative; + top: -60px; +} +.list-table { + .tb-hd, + .tb-bd { + ul { + display: flex; + justify-content: space-around; + width: 100%; + height: 35px; + color: #a6d3e8; + li { + flex: 0.5; + line-height: 35px; + font-size: 14px; + &:first-child { + flex: 0.5; + } + } + } + } + .tb-hd { + ul { + background-color: rgba(14, 45, 66); + color: #65c1f2; + } + } + .tb-bd { + ul { + &:nth-child(2n) { + background-color: rgba(0, 0, 0, .3); + } + } + } +} +.list-table1 { + .tb-hd1, + .tb-bd1 { + ul { + display: flex; + justify-content: space-around; + width: 100%; + height: 35px; + color: #a6d3e8; + li { + flex: 0.5; + line-height: 35px; + font-size: 14px; + &:first-child { + flex: 0.5; + } + } + } + } + .tb-hd1 { + ul { + background-color: rgba(14, 45, 66); + color: #65c1f2; + } + } + .tb-bd1 { + ul { + &:nth-child(2n) { + background-color: rgba(0, 0, 0, .3); + } + } + } +} +.todayPorson{ + width: 421px; + position: relative; + text-align: center; +} +.type_Style{ + color: rgb(147,198,222); +} +.status_Style{ + color: #00DFFC; +} +.status_Style1{ + color: #FAB002; +} +.click_Style{ + color: #0e8bff; +} +.xiaoFang-number1{ + span{ + font-size: 25px; + font-weight: bold; + position: relative; + top: 14px; + } +} +.xiaoFang-number2{ + span{ + font-size: 25px; + font-weight: bold; + position: relative; + top: 14px; + } +} +.xiaoFang-number3{ + span{ + font-size: 25px; + font-weight: bold; + position: relative; + top: 14px; + } +} +.xiaoFang-number4{ + span{ + font-size: 25px; + font-weight: bold; + position: relative; + top: 14px; + } +} +.xiaoFang-font{ + color: rgb(147,198,222); + font-size: 15px; +} diff --git a/src/views/index.vue b/src/views/index.vue index 326afee..983fb64 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -152,8 +152,8 @@

车辆管理

- -
+
+

消防安全