代码提交

src/api/api.js

@@ -118,3 +118,39 @@ export const getCameraHistory = (params) => {
   {params},
    )
 };
+//安全检查统计
+export const getCheckTotalCensus = (params) => {
+  return axios.get('api/ems-third-party-service/project/checkTotalCensus',
+  {params},
+   )
+};
+//检查次数统计
+export const getCheckTimesCensus = (params) => {
+  return axios.get('api/ems-third-party-service/project/checkTimesCensus',
+  {params},
+   )
+};
+//隐患检查统计
+export const getResolveTroubleCensus = (params) => {
+  return axios.get('api/ems-third-party-service/project/resolveTroubleCensus',
+  {params},
+   )
+};
+// //高频问题项
+export const getMostTroubleCensus = (params) => {
+  return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
+  {params},
+   )
+};
+//安全告警统计
+export const getWarnSurveillance = (params) => {
+  return axios.get('api/ems-third-party-service/project/warnSurveillance',
+  {params},
+   )
+};
+//隐患整改记录
+// export const getMostTroubleCensus = (params) => {
+//   return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
+//   {params},
+//    )
+// };

src/components/common/LineChart.vue

@@ -7,7 +7,7 @@
       width="100%"
       height="100%"
     ></Chart>
-    <div class="lineBox"></div>
+    <!-- <div class="lineBox"></div> -->
   </div>
 </template>
 <script>
@@ -20,10 +20,10 @@ export default {
       default: ''
     },
     // 父组件传递过来的图表数据
-    chartData: {
+    // chartData: {
-      type: Array,
+    //   type: Array,
-      required: true
+    //   required: true
-    },
+    // },
     colorArray: {
       type: Array,
       default: () => {
@@ -52,6 +52,10 @@ export default {
     yAxisPadding: {
       type: Array,
       default: null
+    },
+    checkCountList:{
+      type:Array,
+      default:null
     }
   },
 
@@ -68,9 +72,15 @@ export default {
 
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
-    chartData: {
+    // chartData: {
+    //   deep: true,
+    //   handler () {
+    //     this.resetOption()
+    //   }
+    // },
+    checkCountList:{
       deep: true,
-      handler () {
+      handler (newVal) {
         this.resetOption()
       }
     }
@@ -99,6 +109,12 @@ export default {
       }
     },
     option () {
+        let dataX = [] //X轴
+        let dataY = [] //Y轴
+        this.checkCountList.forEach((item,index) => {
+          dataX.push(item.time)
+          dataY.push(item.count)
+        });
       const self = this
       return {
         tooltip: {
@@ -145,7 +161,7 @@ export default {
           },
           triggerEvent: true,
           type: 'category',
-          data: this.xAxisData
+          data: dataX
         },
         yAxis: {
           name: '次数',
@@ -183,7 +199,7 @@ export default {
         series: [
           {
             name:'检查次数',
-            data: this.chartData,
+            data: dataY,
             type: 'line',
             color:'#76E679'
           },

src/components/common/RankBarChart.vue

@@ -11,10 +11,14 @@ const MAX_LABEL = 8
 export default {
   props: {
     // 父组件传递过来的图表数据
-    chartData: {
+    // chartData: {
-      type: Array,
+    //   type: Array,
-      required: true
+    //   required: true
-    },
+    // },
+    highIssues:{
+      type:Array,
+      default:null
+    }
   },
   components: {
     Chart
@@ -45,7 +49,13 @@ export default {
 
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
-    chartData: {
+    // chartData: {
+    //   deep: true,
+    //   handler() {
+    //     this.resetOption()
+    //   }
+    // },
+    highIssues:{
       deep: true,
       handler() {
         this.resetOption()
@@ -55,6 +65,12 @@ export default {
 
   computed: {
     option() {
+      let dataX= []  //名称
+      let dataY = [] //数量
+      this.highIssues.forEach((item,index) => {
+        dataX.push(item.name)
+        dataY.push(item.count)
+      });
       const self = this
       return {
         tooltip: {
@@ -131,14 +147,13 @@ export default {
               padding: [-20, 0, 14, 0],
             },
           },
-            data:['焊接：','现场作业准备及布置：','保护接地或接零：','建筑用电：','电缆沟挖方：',],
+            data:dataX,
             triggerEvent: true,
-
           }
         ],
         series: [
           {
-            data: this.list,
+            data: dataY,
             type: 'bar',
             barWidth: 16,
             barGap: '-30%',

src/components/common/mdScreenPie.vue

@@ -1,7 +1,7 @@
 <template>
-    <div style="width:100%;height:100%;">
+  <div style="width: 100%; height: 100%">
-      <div ref="chart" style="width:100%;height:100%;"></div>
+    <div ref="chart" style="width: 100%; height: 100%"></div>
-      <!-- <div class="boxPeople aa">
+    <!-- <div class="boxPeople aa">
         <div class="name" style="color: #F2DA8D;">施工工作组</div>
         <div class="nucm" style="color: #F9EBBD;font-weight: bold;font-size: 24px; ">33<span style=" font-size: 14px; color: #F2DA8D;">人</span></div>
       </div>
@@ -17,173 +17,178 @@
         <div class="name" style="color: #53E3FF">项目监理组</div>
         <div class="nucm" style="color: #E3FAFF;font-weight: bold;font-size: 24px; ">33<span style=" font-size: 14px; color: #53E3FF;">人</span></div>
       </div> -->
-    </div>
+  </div>
 </template>
   <script>
-  import { List } from 'echarts/lib/export'
+import { List } from "echarts/lib/export";
-  import giftImageUrl from '../../assets/pic/circle.png'
+import giftImageUrl from "../../assets/pic/circle.png";
-  export default {
+export default {
-    props: {
+  props: {
-      picIsShow: {
+    picIsShow: {
-        type: Boolean,
+      type: Boolean,
-        default: true
+      default: true,
-      },
-      colorList: {
-        type: Array,
-        default(){
-            return ['#00A572', '#008AA4', '#7968D9', '#C7A73E']
-        } 
-      },
-      projectUser:{
-        type:Array,
-        default: []
-      }
     },
+    colorList: {
+      type: Array,
+      default() {
+        return ["#00A572", "#008AA4", "#7968D9", "#C7A73E", "rgb(28,241,235)"];
+      },
+    },
+    projectUser: {
+      type: Array,
+      default: [],
+    },
+  },
 
-    components: {
+  components: {},
-    },
 
-    data() {
+  data() {
-      return {}
+    return {};
-    },
+  },
-    mounted() {
+  mounted() {},
-    },
+  watch: {
-    watch: {
+    // 监听父组件中的数据变化，重新触发Echarts
-      // 监听父组件中的数据变化，重新触发Echarts
+    chartData: {
-      chartData: {
+      deep: true,
-        deep: true,
+      handler() {
-        handler() {
+        this.resetOption();
-          this.resetOption()
-        }
       },
-      projectUser: {
-        deep: true,
-        handler(newVal) {
-          this.initCharts(newVal)
-        }
-      }
     },
-    methods: {
+    projectUser: {
-      initCharts(value) {
+      deep: true,
-        let myChart = this.$echarts.init(this.$refs.chart)
+      handler(newVal) {
-        var val1data2 = [{
+        this.initCharts(newVal);
+      },
+    },
+  },
+  methods: {
+    initCharts(value) {
+      let myChart = this.$echarts.init(this.$refs.chart);
+      var val1data2 = [
+        {
           value: 33,
-          name: '电工',
+          name: "电工",
         },
         {
           value: 13,
-          name: '项目监理组',
+          name: "项目监理组",
         },
         {
           value: 14,
-          name: '土建专工',
+          name: "土建专工",
         },
         {
           value: 43,
-          name: '架子工',
+          name: "架子工",
-        }
-        ]
-        val1data2 = Object.keys(value).map((item,index)=>{
-          return {name:value[item].groupName,value:value[item].number}
-        })
-        var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
-        // 绘制图表
-        myChart.setOption({
-          tooltip:{
-          trigger:'item',
-          formatter: '{b}：{c}',
         },
-          graphic: {
+      ];
-            elements: [{
+      val1data2 = Object.keys(value).map((item, index) => {
-              type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
+        return { name: value[item].groupName, value: value[item].number };
-              style: {
+      });
-                image: this.picIsShow ? giftImageUrl : '', //这里添加图片地址
+      var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
-                width: 120,
+      // 绘制图表
-                height: 120
+      myChart.setOption({
-              },
+        backgroundColor: "rgba(255,255,255,0)",
-              left: '161',//
+        tooltip: {
-              top: '97' //配置图片居中
+          trigger: "item",
-            }]
+          formatter: "{b}：{c}",
-          },
+        },
-          series: [
+        graphic: {
+          elements: [
             {
-              type: 'pie',
+              type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
-              radius: this.picIsShow ? ['53%', '65%'] : ['60%', '60%'],
+              style: {
-              center: ['50%', '157'],
+                image: this.picIsShow ? giftImageUrl : "", //这里添加图片地址
-              color: this.colorList,
+                width: 120,
-              hoverAnimation: true, /// /设置饼图默认的展开样式
+                height: 120,
-              label: {
+              },
-                show: true,
+              left: "161", //
-                formatter: '{b}：{c}',
+              top: "97", //配置图片居中
-                rich: {
+            },
-                  d: {
+          ],
-                    color: '#fff',
+        },
-                    fontSize: 25,
+        series: [
-                    // lineHeight: 24,
+          {
-                    height: 24,
+            type: "pie",
-                  },
+            radius: this.picIsShow ? ["53%", "65%"] : ["60%", "60%"],
-                  c: {
+            center: ["50%", "157"],
-                    color: "red",
+            color: this.colorList,
-                    fontSize: 25,
+            hoverAnimation: true, /// /设置饼图默认的展开样式
-                    // lineHeight: 20,
+            label: {
-                    align: 'left',
+              show: true,
-                  }
+              formatter: "{b|{b}}{c|{c}}人",
+              rich: {
+                b: {
+                  fontSize: 15,
+                  lineHeight: 33,
+                },
+                c: {
+                  fontSize: 25,
+                  lineHeight: 22,
+                  align: "center",
+                  opacity: 0.1
                 },
-                position: '',
               },
-              labelLine: {
+              textStyle: {
-                normal: {
+                fontSize: 15,
-                  show: false
-                }
               },
-              itemStyle: { // 此配置
+              position: "",
-                normal: {
+            },
-                  borderWidth: 2,
+            labelLine: {
-                  borderColor: '#fff'
+              normal: {
-                }
+                show: false,
               },
-              data: arr[2]
+            },
-            }
+            // itemStyle: { // 此配置
-          ]
+            //   normal: {
-        })
+            //     borderWidth: 2,
-      }
+            //     borderColor: 'rgba(255,255,255,0.7)'
-    }
+            //   }
-  }
+            // },
-  </script>
+            itemStyle: {
+              borderRadius: 2,
+              borderColor: "rgb(255,255,255)",
+              borderWidth: 2,
+            },
+            data: arr[2],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
 
   <style scoped lang="scss">
-  .dd{
+.dd {
-    top: 214px;
+  top: 214px;
-    right: 17px;
+  right: 17px;
-  }
+}
-  .cc{
+.cc {
-    top: 214px;
+  top: 214px;
-    left: 34px;
+  left: 34px;
-  }
+}
-  .aa{
+.aa {
-    top: 66px;
+  top: 66px;
-    left: 33px;
+  left: 33px;
-  }
+}
-  .bb{
+.bb {
-    top: 52px;
+  top: 52px;
-    right: 44px;
+  right: 44px;
-  }
+}
 
-  .boxPeople{
+.boxPeople {
-    position: absolute;
+  position: absolute;
-
-    display: flex;
-    align-items: center;
-    .nucm{
-      font-size: 20px;
-      font-weight: 700;
-
-    }
-    .name{
-      font-size: 14px;
-      font-weight: 500;
-
-    }
 
+  display: flex;
+  align-items: center;
+  .nucm {
+    font-size: 20px;
+    font-weight: 700;
   }
-  </style>
+  .name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

src/components/common/pieChart.vue

@@ -105,27 +105,25 @@ export default {
             hoverAnimation: true, /// /设置饼图默认的展开样式
             label: {
               show: true,
-              formatter: '{b}：{c}%',
+              formatter: '{b|{b}}:{c|{c}}%',
-              padding:[0,10,0,50],
+              padding:[0,0,0,0],
               itemStyle: { // 此配置
                 normal: {
                   borderWidth: 2,
                   borderColor: '#52FFC1'
                 }
               },
-              rich: {
+             rich: {
-                d: {
+                b: {
-                  color: '#fff',
+                  fontSize: 15,
-                  fontSize: 20,
+                  lineHeight: 33,
-                  lineHeight: 24,
-                  height: 24
                 },
                 c: {
-                  color: "red",
+                  fontSize: 18,
-                  fontSize: 20,
+                  lineHeight: 22,
-                  lineHeight: 20,
+                  align: "center",
-                  align: 'left',
+                  opacity: 0.1
-                }
+                },
               },
               position: '',
             },

src/components/common/pieChartUnImg.vue

@@ -92,19 +92,17 @@ export default {
                   borderColor: "#52FFC1",
                 },
               },
-              formatter: "{b}{c}%",
+              formatter: "{b|{b}}{c|{c}}%",
-              rich: {
+               rich: {
-                d: {
+                b: {
-                  color: "#fff",
+                  fontSize: 15,
-                  fontSize: 20,
+                  lineHeight: 33,
-                  lineHeight: 24,
-                  height: 24,
                 },
                 c: {
-                  color: "red",
+                  fontSize: 18,
-                  fontSize: 20,
+                  lineHeight: 22,
-                  lineHeight: 20,
+                  align: "center",
-                  align: "left",
+                  opacity: 0.1
                 },
               },
               position: "",

src/components/common/threeBarChart.vue

@@ -1,266 +1,354 @@
 <template>
-    <div style="position: relative">
+  <div style="position: relative">
-        <Chart ref="chart" :chartOption="option" :className="className" width="100%" height="100%"
+    <Chart
-            ></Chart>
+      ref="chart"
-            <div class="lineBox"></div>
+      :chartOption="option"
-    </div>
+      :className="className"
+      width="100%"
+      height="100%"
+    ></Chart>
+    <!-- <div class="lineBox"></div> -->
+  </div>
 </template>
 <script>
-import Chart from '../chart.vue'
+import Chart from "../chart.vue";
-const MAX_LABEL = 8
+const MAX_LABEL = 8;
 export default {
-    props: {
+  props: {
-        className: {
+    className: {
-            type: String,
+      type: String,
-            default: ''
+      default: "",
-        },
-        // 父组件传递过来的图表数据
-        chartData: {
-            type: Array,
-            required: true
-        },
-        chartData2: {
-            type: Array,
-            required: true
-        },
-        chartData3: {
-            type: Array,
-            required: true
-        },
-        colorArray: {
-            type: Array,
-            default: () => {
-                return ['#84F5DE', '#56E8F2', '#4CC5F8']
-            }
-        },
-        yAxisName: {
-            type: String,
-            default: ''
-        },
-        // x轴数据
-        xAxisData: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        },
-        tooltipFormatter: {
-            type: Function | String,
-            default: null
-        },
-        yAxisPosition: {
-            type: String,
-            default: 'left'
-        },
-        yAxisPadding: {
-            type: Array,
-            default: null
-        }
     },
-
+    // 父组件传递过来的图表数据
-    components: {
+    chartData: {
-        Chart
+      type: Array,
+      required: true,
     },
-
+    chartData2: {
-    data() {
+      type: Array,
-        return {
+      required: true,
-            tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
-            tipContent: ''
-        }
     },
-
+    chartData3: {
-    watch: {
+      type: Array,
-        // 监听父组件中的数据变化，重新触发Echarts
+      required: true,
-        chartData: {
-            deep: true,
-            handler() {
-                this.resetOption()
-            }
-        }
     },
+    colorArray: {
+      type: Array,
+      default: () => {
+        return ["#84F5DE", "#56E8F2", "#4CC5F8"];
+      },
+    },
+    yAxisName: {
+      type: String,
+      default: "",
+    },
+    // x轴数据
+    xAxisData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    tooltipFormatter: {
+      type: Function | String,
+      default: null,
+    },
+    yAxisPosition: {
+      type: String,
+      default: "left",
+    },
+    yAxisPadding: {
+      type: Array,
+      default: null,
+    },
+    safeList: {
+      type: Array,
+      default: null,
+    },
+  },
 
-    computed: {
+  components: {
-        option() {
+    Chart,
-            const self = this
+  },
-            return {
+
-                tooltip: {
+  data() {
-        trigger: "axis",
+    return {
-        axisPointer: {
+      tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
+      tipContent: "",
+    };
+  },
+
+  watch: {
+    // 监听父组件中的数据变化，重新触发Echarts
+    // chartData: {
+    //     deep: true,
+    //     handler() {
+    //         this.resetOption()
+    //     }
+    // },
+    safeList: {
+      deep: true,
+      handler() {
+        this.resetOption();
+      },
+    },
+  },
+
+  computed: {
+    option() {
+      let dataX = [];
+      let equipment = []; //设备告警
+      let fire = []; //消防告警
+      let gas = []; //耗气告警
+      let power = []; // 用电告警
+      let water = []; //给水告警
+      this.safeList.forEach((item, index) => {
+        dataX.push(item.time);
+        equipment.push(item.equipment);
+        fire.push(item.fire);
+        gas.push(item.gas);
+        power.push(item.power);
+        water.push(item.water);
+      });
+      const self = this;
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
             type: "shadow",
             label: {
-                show: false
+              show: false,
-            }
+            },
-        }
+          },
-    },
-                title: {
-                    textStyle: {
-                        fontSize: 18,
-                        fontWeight: 'bold',
-                        color: '#1EBBFC'
-                    }
-                },
-                legend: {       //对图形的解释部分
-                    left: '97',
-                    y: 63,
-                    itemHeight: 12,
-                    data: ['人员安全', '环境安全','设备安全'],
-                    textStyle: {
-                        fontSize: 12, //字体大小
-                        color: ['#66D19B','#ECBF00','#00C1F0'], //字体颜色
-                    }
-                },
-                grid: {
-                    left: '26',
-                    right: '26',
-                    bottom: '33',
-                    top:'103',
-                    containLabel: true
-                },
-                xAxis: {
-                    axisLine: {
-                        // x轴线的颜色以及宽度
-                        show: true,
-                        lineStyle: {
-                            color: '#fff',
-                            height: 0
-                        }
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLabel: {
-                        interval: 0, // 横轴信息全部显示
-                        margin: 6, // 刻度标签与轴线之间的距离
-                        align: 'center',
-                        fontSize: 13, // 横轴字体大小
-                        color: '#bde9e4', // 颜色
-                    },
-                    triggerEvent: true,
-                    type: 'category',
-                    data: this.xAxisData
-                },
-                yAxis: {
-                    name: ['次数'],
-                    type: 'value',
-                    position: this.yAxisPosition || null,
-                    nameTextStyle: {
-                        color: '#64D5CD',
-                        padding: this.yAxisPadding || [0, 28, 2, 0],
-                        fontSize: 12,
-                        opacity: 0.5
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    splitLine: {
-                        // 分割线配置
-                        show: false,
-                        lineStyle: {
-                            color: '#078DF0',
-                            opacity: 0.3
-                        }
-                    },
-                    axisLabel: {
-                        color: '#bde9e4',
-                        fontSize: 14,
-                        opacity: 0.5
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                },
-                series: [
-                    {
-                        name: '人员安全',
-                        data: this.chartData,
-                        type: 'bar',
-                        barWidth: 12,
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    type: 'bar',
-                                    colorStops: [{
-                                        offset: 0,
-                                        color: '#6FD8A5' // 0% 处的颜色
-                                    }, {
-                                        offset: 1,
-                                        color: '#3CB06C' // 100% 处的颜色
-                                    }],
-                                    globalCoord: false, // 缺省为 false
-
-                                }
-                            },
-                        },
-                    },
-                    {
-                        name: '环境安全',
-                        data: this.chartData2,
-                        type: 'bar',
-                        barWidth: 12,
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    type: 'bar',
-                                    colorStops: [{
-                                        offset: 0,
-                                        color: '#EFC500' // 0% 处的颜色
-                                    }, {
-                                        offset: 1,
-                                        color: '#DA9300' // 100% 处的颜色
-                                    }],
-                                    globalCoord: false, // 缺省为 false
-
-                                }
-                            },
-                        },
-                    },
-                    {
-                        name: '设备安全',
-                        data: this.chartData3,
-                        type: 'bar',
-                        barWidth: 12,
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    type: 'bar',
-                                    colorStops: [{
-                                        offset: 0,
-                                        color: '#00C4F1' // 0% 处的颜色
-                                    }, {
-                                        offset: 1,
-                                        color: '#0091DF' // 100% 处的颜色
-                                    }],
-                                    globalCoord: false, // 缺省为 false
-
-                                }
-                            },
-                        },
-                    }
-                ]
-            }
-        }
-    },
-
-    methods: {
-        resetOption() {
-            this.$refs.chart.setOption(this.option)
         },
+        title: {
+          textStyle: {
+            fontSize: 18,
+            fontWeight: "bold",
+            color: "#1EBBFC",
+          },
+        },
+        legend: {
+          //对图形的解释部分
+          left: "97",
+          y: 63,
+          itemHeight: 12,
+          data: ["用电告警", "消防告警", "给水告警", "设备告警", "耗气告警"],
+          textStyle: {
+            fontSize: 12, //字体大小
+            color: [
+              "#66D19B",
+              "#ECBF00",
+              "#00C1F0",
+              "rgb(236,218,75)",
+              "rgb(190,109,254)",
+            ], //字体颜色
+          },
+        },
+        grid: {
+          left: "26",
+          right: "26",
+          bottom: "33",
+          top: "103",
+          containLabel: true,
+        },
+        xAxis: {
+          axisLine: {
+            // x轴线的颜色以及宽度
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              height: 0,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0, // 横轴信息全部显示
+            margin: 10, // 刻度标签与轴线之间的距离
+            align: "center",
+            fontSize: 13, // 横轴字体大小
+            color: "#bde9e4", // 颜色
+          },
+          // triggerEvent: true,
+          type: "category",
+          data: dataX,
+        },
+        yAxis: {
+          name: ["次数"],
+          type: "value",
+          position: this.yAxisPosition || null,
+          nameTextStyle: {
+            color: "#64D5CD",
+            padding: this.yAxisPadding || [0, 28, 2, 0],
+            fontSize: 12,
+            opacity: 0.5,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "white",
+            },
+          },
+          splitLine: {
+            // 分割线配置
+            show: false,
+            lineStyle: {
+              color: "#078DF0",
+              opacity: 0.3,
+            },
+          },
+          axisLabel: {
+            color: "#bde9e4",
+            fontSize: 14,
+            opacity: 0.5,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "用电告警",
+            data: power,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "bar",
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#6FD8A5", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#3CB06C", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+          },
+          {
+            name: "消防告警",
+            data: fire,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "bar",
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#EFC500", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#DA9300", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+          },
+          {
+            name: "给水告警",
+            data: water,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "bar",
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#00C4F1", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0091DF", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+          },
+          {
+            name: "设备告警",
+            data: equipment,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "bar",
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgb(236,218,75)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgb(236,218,75)", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+          },
+          {
+            name: "耗气告警",
+            data: gas,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "bar",
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgb(190,109,254)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgb(190,109,254)", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
 
-    }
+  methods: {
-}
+    resetOption() {
+      this.$refs.chart.setOption(this.option);
+    },
+  },
+};
 </script>
 
 <style scoped>
-
+.lineBox {
-.lineBox{
+  height: 14px;
-    height: 14px;
+  position: absolute;
-    position: absolute;
+  top: 89px;
-    top: 89px;
+  left: 50px;
-    left: 50px;
+  border-left: 1px solid #fff;
-    border-left: 1px solid #fff;
 }
 </style>
 

src/utils/mqttConfig.js

@@ -34,7 +34,7 @@ class mqttHandle {
         //配置链接
         const { host, port, endpoint, ...options } = this.connect;
         console.log("this.connect.host",this.connect.host)
-        const connectUrl = 'ws://172.16.1.51:7788/';
+        const connectUrl = 'ws://175.27.191.156:10083/mgtt';
         // const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
         // if (!client.connected) {
         //     client.on('connect', function () {

src/views/swiper.vue

@@ -71,6 +71,9 @@
 </template>
 
 <script>
+import {
+  getMostTroubleCensus
+} from "../api/api";
 export default {
   components: {},
   props: {},
@@ -114,7 +117,15 @@ export default {
     },
   },
   methods: {
-
+    getData(){
+      getMostTroubleCensus({
+        projectId: sessionStorage.getItem("projectId"),
+        // size:10,
+        // current:1
+      }).then((res) => {
+        console.log(res.data,'==================');
+      });
+    },
     changePage(index) {
       if (index == 1) {
         this.$refs.carousel.prev()
@@ -145,16 +156,18 @@ export default {
     //定时器
     this.setTimer();
   },
-  mounted() { },
+  mounted() {
+    this.getData()
+   },
 };
 </script>
 
 <style scoped lang="less">
-
+@marginLeft:50px;
 .home {
   display: flex;
   align-items: center;
-  margin-left: 49px;
+  margin-left: @marginLeft;
   .boxChild {
     display: flex;
 
@@ -247,11 +260,16 @@ export default {
   //     }
   //   }
   // }
+
 }
 </style>
 <style>
 .el-carousel__arrow--left,
 .el-carousel__arrow--right {
   display: none;
+}
+ .el-carousel__container {
+    position: relative;
+    height: 180px !important;
 }
 </style>