大屏页面

src/assets/scss/dataBoard/IoTPerception/index.scss

@@ -207,6 +207,33 @@
 	background-size: 100% 100%;
 	margin-top: 5px;
 
+}
+.m-box1 {
+	width: 460px;
+	height:228px;
+	// background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+	background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+	background-size: 100% 100%;
+	margin-top: 10px;
+
+}
+.m-box2 {
+	width: 460px;
+	height:380px;
+	// background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+	background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+	background-size: 100% 100%;
+	margin-top: 10px;
+
+}
+.m-box3 {
+	width: 460px;
+	height:320px;
+	// background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+	background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+	background-size: 100% 100%;
+	margin-top: 10px;
+
 }
 
 .m-rybox {
@@ -221,7 +248,7 @@
 
 .m-jdjs {
 	//height: 548px;
-	padding: 0 16px 10px;
+	padding: 10px 16px 10px;
 
 	&-js {
 		margin: 20px 0;

src/views/dataBoard/IoTPerception/InfrastructureRate/index.scss

@@ -0,0 +1,55 @@
+.m-jdjs{
+    // margin: 10px 16px;
+    .m-jdjs-js{
+        display: grid;
+        grid-template-columns: repeat(2, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
+        gap: 10px; /* 设置每个元素之间的间距 */
+        .m-jdjs-js-one{
+            width: 210px;
+            height: 110px;
+            background: #5d77af;
+            // opacity: 0.1;
+            .charts {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: row;
+                // justify-content: space-between;
+                padding: 20px;
+                #DissatisfiedReason2 {
+                    flex: calc(100% - 100px);
+                    width: calc(100% - 100px);
+                    height: 80px;
+                    z-index: 50px;
+                    opacity: 1;
+                    
+                }
+                #DissatisfiedReason3 {
+                    flex: calc(100% - 100px);
+                    width: calc(100% - 100px);
+                    height: 80px;
+                    z-index: 50px;
+                    opacity: 1;
+                    
+                }
+                #DissatisfiedReason4 {
+                    flex: calc(100% - 100px);
+                    width: calc(100% - 100px);
+                    height: 80px;
+                    z-index: 50px;
+                    opacity: 1;
+                    
+                }
+                #DissatisfiedReason5 {
+                    flex: calc(100% - 100px);
+                    width: calc(100% - 100px);
+                    height: 80px;
+                    z-index: 50px;
+                    opacity: 1;
+                    
+                }
+            }
+        }
+
+    }
+}

src/views/dataBoard/IoTPerception/InfrastructureRate/index.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="m-jdjs">
+    <div class="m-jdjs-js">
+      <div class="m-jdjs-js-one">
+        <div class="charts">
+          <div id="DissatisfiedReason2" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+          <div style="width: 70%; display: flex; flex-direction:column; margin-left: 5px;">
+            <span style="width: 49px;height: 18px;font-family: Microsoft YaHei;font-weight: bold;font-size: 22px;color: #FFFFFF;">94%</span>
+            <span style="margin-top: 5px;height: 14px;font-family: Adobe Heiti Std;font-weight: normal;font-size: 14px;color: #A3B9DA;opacity: 0.75;">有线宽带网络</span>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdjs-js-one">
+        <div class="charts">
+          <div id="DissatisfiedReason3" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+          <div style="width: 70%; display: flex; flex-direction:column; margin-left: 5px;">
+            <span style="width: 49px;height: 18px;font-family: Microsoft YaHei;font-weight: bold;font-size: 22px;color: #FFFFFF;">94%</span>
+            <span style="margin-top: 5px;height: 14px;font-family: Adobe Heiti Std;font-weight: normal;font-size: 14px;color: #A3B9DA;opacity: 0.75;">有线宽带网络</span>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdjs-js-one">
+        <div class="charts">
+          <div id="DissatisfiedReason4" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+          <div style="width: 70%; display: flex; flex-direction:column; margin-left: 5px;">
+            <span style="width: 49px;height: 18px;font-family: Microsoft YaHei;font-weight: bold;font-size: 22px;color: #FFFFFF;">94%</span>
+            <span style="margin-top: 5px;height: 14px;font-family: Adobe Heiti Std;font-weight: normal;font-size: 14px;color: #A3B9DA;opacity: 0.75;">有线宽带网络</span>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdjs-js-one">
+        <div class="charts">
+          <div id="DissatisfiedReason5" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+          <div style="width: 70%; display: flex; flex-direction:column; margin-left: 5px;">
+            <span style="width: 49px;height: 18px;font-family: Microsoft YaHei;font-weight: bold;font-size: 22px;color: #FFFFFF;">94%</span>
+            <span style="margin-top: 5px;height: 14px;font-family: Adobe Heiti Std;font-weight: normal;font-size: 14px;color: #A3B9DA;opacity: 0.75;">有线宽带网络</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+
+  </div>
+</template>
+  <script>
+  import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
+  import * as echarts from "echarts";
+  import resiCategoryMap from "@/views/business/resi-category-map.js";
+  export default {
+    name: "jdjs",
+    props: {
+      currentLevelData: {
+        type: Object,
+        default: {},
+      },
+    },
+    data() {
+      return {
+        orgId: this.$store.state.chooseArea.chooseName,
+        report: "",
+        overview: "",
+        loading: false,
+        rffxDate:'',
+        event12345Num:"",
+        provinceSatisfactionNum:"",
+        selfInspectNum:"",
+        typeConditionList: [
+          {
+            label: "本月",
+            value: 1,
+          },
+          {
+            label: "上月",
+            value: 2,
+          },
+          {
+            label: "近三月",
+            value: 3,
+          },
+          {
+            label: "近半年",
+            value: 4,
+          },
+          {
+            label: "近一年",
+            value: 5,
+          },
+        ],
+        typeCondition:5,
+        endTime:"",
+         startTime:"",
+      };
+    },
+    watch: {
+      currentLevelData(val) {
+        if (val.orgId) {
+          this.getReport(val);
+          this.getData();
+          this.getChartData(val);
+        }
+      },
+    },
+    mounted() {
+        this.initChart()
+        this.initChart1()
+        this.initChart2()
+        this.initChart3()
+    //   if (this.currentLevelData.orgId) {
+    //     this.getReport(this.currentLevelData);
+    //     this.initChart();
+    //     this.getData()
+    //   }
+    },
+    components: {
+      titleSmall,
+    },
+    methods: {
+        initChart(data) {
+        let div = document.getElementById('DissatisfiedReason2');
+        this.myChart1 = echarts.init(div);
+        // var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+        // var getNum = data.map(item => item.qty);
+        // var total = eval(getNum.join('+'))
+        // var data = [{name: getname[i], value: getNum[i]}];
+        // for (var i = 0; i < getname.length; i++) {
+        //   data.push({name: getname[i], value: getNum[i]})
+        // }
+            var option = {
+                // title: {
+                //     text: '80%',
+                //     x: 'center',
+                //     y: 'center',
+                //     textStyle: {
+                //         fontWeight: 'normal',
+                //         color: '#0580f2',
+                //         fontSize: '30'
+                //     }
+                // },
+                color: ['rgba(176, 212, 251, 1)'],
+                series: [{
+                    name: 'Line 1',
+                    type: 'pie',
+                    clockWise: true,
+                    radius: ['90%', '66%'],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [{
+                        value: 80,
+                        name: '01',
+                        itemStyle: {
+                            normal: {
+                                color: { // 完成的圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#00cefc' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#367bec' // 100% 处的颜色
+                                    }]
+                                },
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }
+                        }
+                    }, {
+                        name: '02',
+                        value: 20
+                    }]
+                }]
+            }
+            this.myChart1.setOption(option, true);
+            window.addEventListener("resize", () => this.myChart1.resize());
+        },
+        initChart1(data) {
+        let div = document.getElementById('DissatisfiedReason3');
+        this.myChart2 = echarts.init(div);
+            var option = {
+                // title: {
+                //     text: '80%',
+                //     x: 'center',
+                //     y: 'center',
+                //     textStyle: {
+                //         fontWeight: 'normal',
+                //         color: '#0580f2',
+                //         fontSize: '30'
+                //     }
+                // },
+                color: ['rgba(176, 212, 251, 1)'],
+                series: [{
+                    name: 'Line 1',
+                    type: 'pie',
+                    clockWise: true,
+                    radius: ['90%', '66%'],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [{
+                        value: 80,
+                        name: '01',
+                        itemStyle: {
+                            normal: {
+                                color: { // 完成的圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#00cefc' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#367bec' // 100% 处的颜色
+                                    }]
+                                },
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }
+                        }
+                    }, {
+                        name: '02',
+                        value: 20
+                    }]
+                }]
+            }
+            this.myChart2.setOption(option, true);
+            window.addEventListener("resize", () => this.myChart2.resize());
+        },
+        initChart2(data) {
+        let div = document.getElementById('DissatisfiedReason4');
+        this.myChart3 = echarts.init(div);
+        // var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+        // var getNum = data.map(item => item.qty);
+        // var total = eval(getNum.join('+'))
+        // var data = [{name: getname[i], value: getNum[i]}];
+        // for (var i = 0; i < getname.length; i++) {
+        //   data.push({name: getname[i], value: getNum[i]})
+        // }
+            var option = {
+                // title: {
+                //     text: '80%',
+                //     x: 'center',
+                //     y: 'center',
+                //     textStyle: {
+                //         fontWeight: 'normal',
+                //         color: '#0580f2',
+                //         fontSize: '30'
+                //     }
+                // },
+                color: ['rgba(176, 212, 251, 1)'],
+                series: [{
+                    name: 'Line 1',
+                    type: 'pie',
+                    clockWise: true,
+                    radius: ['90%', '66%'],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [{
+                        value: 80,
+                        name: '01',
+                        itemStyle: {
+                            normal: {
+                                color: { // 完成的圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#00cefc' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#367bec' // 100% 处的颜色
+                                    }]
+                                },
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }
+                        }
+                    }, {
+                        name: '02',
+                        value: 20
+                    }]
+                }]
+            }
+            this.myChart3.setOption(option, true);
+            window.addEventListener("resize", () => this.myChart3.resize());
+        },
+        initChart3(data) {
+        let div = document.getElementById('DissatisfiedReason5');
+        this.myChart4 = echarts.init(div);
+        // var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+        // var getNum = data.map(item => item.qty);
+        // var total = eval(getNum.join('+'))
+        // var data = [{name: getname[i], value: getNum[i]}];
+        // for (var i = 0; i < getname.length; i++) {
+        //   data.push({name: getname[i], value: getNum[i]})
+        // }
+            var option = {
+                // title: {
+                //     text: '80%',
+                //     x: 'center',
+                //     y: 'center',
+                //     textStyle: {
+                //         fontWeight: 'normal',
+                //         color: '#0580f2',
+                //         fontSize: '30'
+                //     }
+                // },
+                color: ['rgba(176, 212, 251, 1)'],
+                series: [{
+                    name: 'Line 1',
+                    type: 'pie',
+                    clockWise: true,
+                    radius: ['90%', '66%'],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [{
+                        value: 80,
+                        name: '01',
+                        itemStyle: {
+                            normal: {
+                                color: { // 完成的圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#00cefc' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#367bec' // 100% 处的颜色
+                                    }]
+                                },
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }
+                        }
+                    }, {
+                        name: '02',
+                        value: 20
+                    }]
+                }]
+            }
+            this.myChart4.setOption(option, true);
+            window.addEventListener("resize", () => this.myChart4.resize());
+        },
+
+
+      getReport({ orgId, orgLevel }) {
+        this.$http
+          .get(
+            "/actual/base/streetOverview/communityOverview?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.overview = data;
+          });
+        this.$http
+          .get(
+            "/actual/base/streetOverview/summaryReport?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.report = data;
+          });
+      },
+    //   getChartData({ orgId, orgLevel }) {
+    //     this.loading = true
+    //     this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
+    //           orgId +
+    //           "&level=" +
+    //           orgLevel
+    //       ).then(({data: {data}}) => {
+    //       this.initCharts(data)
+    //     })
+    //   },
+      getData() {
+        this.loading = true;
+        let {startTime,endTime } = this
+        let params = {
+          level: this.currentLevelData.orgLevel,
+          orgId: this.currentLevelData.orgId,
+          startTime,
+          endTime,
+        };
+        this.$http
+          .get(
+            "/governance/satisfactionOverview/satisfactionFollowGroup?" +
+              this.$paramsFormat(params)
+          )
+          .then(({ data: { data } }) => {
+            this.event12345Num = data.event12345Num;
+            this.provinceSatisfactionNum = data.provinceSatisfactionNum;
+            this.selfInspectNum = data.selfInspectNum;
+            this.loading = false;
+          });
+      },
+      timeChange() {
+        let startTime = "",
+          endTime = "";
+        if (this.typeCondition === 1) {
+          startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 3) {
+          startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 4) {
+          startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 5) {
+          startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+        } else {
+          endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+        }
+        this.startTime = startTime;
+        this.endTime = endTime;
+        this.getData();
+      },
+    },
+  };
+  </script>
+  <style lang="scss" src="./index.scss" scoped />
+  <style lang="scss" scoped>
+  /deep/ .el-input__inner {
+      width: 90px !important;
+      height: 24px !important;
+      background: #021c49 !important;
+      border: 1px solid #125aaa !important;
+      border-radius: 12px !important;
+      color: #a0cdff;
+    }
+    /deep/ .el-input__icon {
+      line-height: 24px !important;
+      color: #a0cdff;
+    }
+  .f-hflex{
+    width: 100px;
+  }
+  .f-flex{
+    margin-top: 20px;
+  }
+  .f-darkGray{
+    margin-top: 10px;
+  }
+  .event-statistics {
+    margin-bottom: 27px;
+  }
+
+  </style>
+  

src/views/dataBoard/IoTPerception/Videosurveillance/index.scss

@@ -1,10 +1,10 @@
 .m-jdjs{
-    // margin: 20px 15px;
+    // margin: 10px 16px;
     .m-jdjs-js{
         display: grid;
         grid-template-columns: repeat(2, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
         gap: 10px; /* 设置每个元素之间的间距 */
-        img {
+        video {
                 width: 210px;
                 height: 120px;
             }

src/views/dataBoard/IoTPerception/Videosurveillance/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="m-jdjs">
       <div class="m-jdjs-js">
-          <img src="../image/jiedaotu.jpg" />
-          <img src="../image/jiedaotu.jpg" />
-          <img src="../image/jiedaotu.jpg" />
-          <img src="../image/jiedaotu.jpg" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
       </div>
 
     </div>

src/views/dataBoard/IoTPerception/devicesNumber/index.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="charts">
+      <div id="DissatisfiedReason" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+    </div>
+  </template>
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    name: "DissatisfiedReason",
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+      this.$http("/governance/satisfaction/communitySelfInsp/stats/dissatisfactionReason/classification", {}).then(({data: {data}}) => {
+        this.initChart(data);
+      })
+    },
+    methods: {
+      timeChange() {
+      },
+      initChart(data) {
+        let div = document.getElementById('DissatisfiedReason');
+        this.myChart = echarts.init(div);
+        var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+        var getNum = data.map(item => item.qty);
+        var total = eval(getNum.join('+'))
+        var data = [];
+        for (var i = 0; i < getname.length; i++) {
+          data.push({name: getname[i], value: getNum[i]})
+        }
+        const color = ['#1A95FF', '#27B5BD', '#F95619', '#FFAA01']
+        var option = {
+          color,
+          tooltip: {
+            trigger: "item"
+          },
+          legend: {
+            type: "plain",
+            orient: "vertical",
+            right: 20,
+            top: "center",
+            align: "left",
+            itemGap: 16,
+            itemWidth: 10,
+            itemHeight: 10,
+            symbolKeepAspect: false,
+            selectedMode: false,
+            formatter: function (name) {
+              for (var i = 0; i < getname.length; i++) {
+                if (name == data[i].name) {
+                  return '{name|' + name + '}{num|' + getNum[i] + '}'
+                }
+              }
+            },
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 12,
+                  width: 80,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  padding: [0, 29, 0, 5],
+                  color: '#A3B9DA',
+                },
+                num: {
+                  fontSize: 14,
+                  fontWeight: 400,
+                  align: 'right',
+                  color: '#FFFFFF',
+                }
+              }
+            }
+          },
+          series: [{
+            name: '',
+            type: "pie",
+            radius: ["65%", "90%"],
+            center: ["20%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              position: "center",
+              color: "rgba(13, 17, 29,0)",
+              formatter: `{primary|${total}}\n{point|门禁设备}}`,
+              rich: {
+                primary: {
+                  fontSize: 24,
+                  color: '#7FCEFF',
+                  align: 'center'
+                },
+                point: {
+                  fontSize: 12,
+                  fontWeight: 400,
+                  color: "#A3B9DA",
+                  align: 'center'
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'normal'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: data,
+            zlevel: 30
+          }]
+        };
+        this.myChart.setOption(option, true);
+        window.addEventListener("resize", () => this.myChart.resize());
+      }
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .charts {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    #DissatisfiedReason {
+      flex: calc(100% - 100px);
+      width: calc(100% - 100px);
+      height: 150px;
+    }
+  }
+  </style>

src/views/dataBoard/IoTPerception/equipmentList/index.scss

@@ -0,0 +1,12 @@
+.m-jdjs{
+    // margin: 10px 16px;
+    .m-jdjs-js{
+        // display: grid;
+        // grid-template-columns: repeat(2, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
+        // gap: 10px; /* 设置每个元素之间的间距 */
+        // video {
+        //         width: 210px;
+        //         height: 120px;
+        //     }
+    }
+}

src/views/dataBoard/IoTPerception/equipmentList/index.vue

@@ -0,0 +1,629 @@
+<template>
+    <div class="m-jdjs">
+        <div class="m-jdjs-js">
+            <div style="display: flex; flex-direction: row;">
+                <el-select v-model="equipmentType" placeholder="选择类型">
+                    <el-option v-for="item in equipmentListType" :key="item.value" :label="item.label"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-input style="margin-left: 5px;" v-model="equipmentName" placeholder="设备名称"></el-input>
+                <el-input style="margin-left: 5px;" v-model="equipmentAdress" placeholder="设备位置"></el-input>
+                <el-button style="width: 70px; height: 33px; background-color: #1a95ff; color: #00153E; ;">查
+                    询</el-button>
+            </div>
+            <div class="m-table">
+                <table class="table" border="0" cellspacing="0" cellpadding="0">
+				<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
+				<thead>
+					<tr class="table-header" >
+						<th class="table-header-th" v-for="item in header" :key="item">
+							{{ item }}
+						</th>
+					</tr>
+				</thead></table>
+                <el-scrollbar :style="{maxHeight:treeHeight}" class="g-scrollar">
+			<table class="table" border="0" cellspacing="0" cellpadding="0">
+				<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
+					<tbody v-if="!loading" class="table-body" style="width: 1886px;">
+						<tr class="table-body-tr" v-for="(value, index) in list" :key="index"
+							@click="handleClickRow(index)">
+							<td class="td" v-for="(item, indexs) in value" :key="indexs">
+								<div v-if="
+									typeof item === 'string' ||
+									typeof item === 'number'
+								" :title="item">
+									{{ item }}
+								</div>
+								<div v-if="
+									typeof item === 'object' ||
+									typeof item.type === 'object'
+								" :title="item.name" :class="item.class">
+									{{ item.name }}
+								</div>
+								<div v-if="
+									typeof item === 'object' &&
+									item.type === 'img'
+								">
+									<!-- <span>{{  item.type+  item.src}}</span> -->
+									<img style="width: 18px; height: 18px" :src="item.src" alt="" />
+								</div>
+								<div v-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'index'
+								">
+									<img v-if="highlightTop3 && index == 0" src="@/assets/img/shuju/top/1.png" alt="" />
+									<img v-else-if="highlightTop3 && index == 1" src="@/assets/img/shuju/top/2.png"
+										alt="" />
+									<img v-else-if="highlightTop3 && index == 2" src="@/assets/img/shuju/top/3.png"
+										alt="" />
+									<span v-else>{{ index + 1 }}</span>
+								</div>
+								<a v-else-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'operate'
+								" fixed v-for="btn in item.list" :key="'operate' + index + btn"
+									@click.stop="handleClickBtn(index, btn)">{{ btn }}</a>
+								<a v-else-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'people'
+								" @click="handleClickPeople(item)">{{ item.name }}</a>
+							</td>
+                            <td class="table-header-th" style="color: #007FF1;">
+                            查看
+						</td>
+						</tr>
+					</tbody>
+					<!-- 	</div> -->
+			</table></el-scrollbar>
+                <!-- <el-table :data="tableData" stripe style="width: 428px">
+                    <el-table-column prop="date" label="日期">
+                    </el-table-column>
+                    <el-table-column prop="name" label="姓名">
+                    </el-table-column>
+                    <el-table-column prop="address" label="地址">
+                    </el-table-column>
+                    <el-table-column  label="操作" width="100">
+                        <template slot-scope="scope">
+                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table> -->
+            </div>
+
+            <!-- <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" /> -->
+        </div>
+
+    </div>
+</template>
+  <script>
+import {    mapGetters} from "vuex";
+import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
+  import * as echarts from "echarts";
+  import resiCategoryMap from "@/views/business/resi-category-map.js";
+  export default {
+    name: "jdjs",
+    props: {
+      currentLevelData: {
+        type: Object,
+        default: {},
+      },
+    },
+    data() {
+      return {
+        colList: [
+				{
+					align: "left",
+					width: "25%",
+				},
+				{
+					align: "left",
+					width: "30%",
+				},
+				{
+					align: "left",
+					width: "30%",
+				},
+				{
+					align: "left",
+					width: "15%",
+				},
+			
+			],
+			header: [
+				"设备类型",
+				"设备编号",
+				"设备位置",
+				"操作",
+			],
+        list: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        equipmentListType: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        equipmentType: '',
+        orgId: this.$store.state.chooseArea.chooseName,
+        report: "",
+        overview: "",
+        loading: false,
+        rffxDate:'',
+        event12345Num:"",
+        provinceSatisfactionNum:"",
+        selfInspectNum:"",
+        typeConditionList: [
+          {
+            label: "本月",
+            value: 1,
+          },
+          {
+            label: "上月",
+            value: 2,
+          },
+          {
+            label: "近三月",
+            value: 3,
+          },
+          {
+            label: "近半年",
+            value: 4,
+          },
+          {
+            label: "近一年",
+            value: 5,
+          },
+        ],
+        typeCondition:5,
+        endTime:"",
+         startTime:"",
+      };
+    },
+    watch: {
+      currentLevelData(val) {
+        if (val.orgId) {
+          this.getReport(val);
+          this.getData();
+          this.getChartData(val);
+        }
+      },
+    },
+    computed: {
+			treeHeight() {
+				return this.$store.state.inIframe ? this.clientHeight - 385 + this.iframeHeight + "px" : this
+					.clientHeight - 385 + "px";
+			},
+			treeWidth() {
+				return document.documentElement.clientWidth;
+			},
+			...mapGetters(["clientHeight", "iframeHeight"]),
+		},
+    mounted() {
+      if (this.currentLevelData.orgId) {
+        this.getReport(this.currentLevelData);
+        this.getChartData();
+        this.getData()
+      }
+    },
+    components: {
+      titleSmall,
+    },
+    methods: {
+      getReport({ orgId, orgLevel }) {
+        this.$http
+          .get(
+            "/actual/base/streetOverview/communityOverview?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.overview = data;
+          });
+        this.$http
+          .get(
+            "/actual/base/streetOverview/summaryReport?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.report = data;
+          });
+      },
+      getChartData({ orgId, orgLevel }) {
+        this.loading = true
+        this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
+              orgId +
+              "&level=" +
+              orgLevel
+          ).then(({data: {data}}) => {
+          this.initCharts(data)
+        })
+      },
+      initCharts(data) {
+        let div = document.getElementById('zdgz');
+        this.myChart = echarts.init(div);
+       let chartData =  data.categoryList.map((item) => {
+              return {
+                name: resiCategoryMap[item.categoryName] || "",
+                count: item.categoryCount,
+              };
+        }).slice(0,8);
+        let xData = chartData.map(item=>item.name);
+        let yData = chartData.map(item=>item.count)
+        let color = [[
+          {
+            offset: 0,
+            color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
+          }
+        ]]
+        let num = yData
+        const max = Math.max(...num)
+        let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+        var option = {
+          title: {
+            show: false,
+            text: '',
+            x: 'center',
+            top: '18px',
+            textStyle: {
+              color: '#333333',
+              fontWeight: 500,
+              fontSize: 12,
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(13,33,71,0.5)',
+            borderColor: 'rgba(143,174,252,0.6)',
+            padding: 8,
+            textStyle: {
+              color: '#fff',
+            },
+            formatter: function (params) {
+              var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>'
+              return res;
+            },
+          },
+  /*        dataZoom: [
+            {
+              "type": "slider",
+              "start": 0,
+              "end": parseInt((5 / xData.length) * 10) / 10 * 100,
+              "height": 10,
+              "bottom": 0,
+              "showDetail": false,
+              "showDataShadow": false,
+              "borderColor": "transparent"
+            }
+          ],*/
+          grid: {
+            top: '18%',
+            left: '2%',
+            right: '4%',
+            bottom: '8%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#323c41'
+                }
+              },
+              axisLabel: {
+                align: 'center',
+                interval: 0,
+                textStyle: {
+                  fontSize: 12,
+                  color: '#A3B9DA'
+                }
+              },
+              boundaryGap: true,
+              data: xData,
+            }, {
+              type: 'category',
+              data: xData,
+              axisLine: {show: false},
+              axisLabel: {
+                show: false,
+              },
+              boundaryGap: true,
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '单位：人',
+              nameLocation: 'end',
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(4,187,255,0.18)',
+                  type: 'dashed'
+                },
+              },
+              nameTextStyle: {
+                color: '#A3B9DA',
+                textStyle: {
+                  fontSize: 12
+                },
+                align: 'right',
+                padding: [0, 5, -5, 5],
+              },
+              axisLabel: {
+                show: true,
+                color: '#A3B9DA',
+                textStyle: {
+                  fontSize: 12
+                },
+              },
+              axisTick: {
+                show: false
+              }
+            }
+          ],
+          series: [
+          {
+            name: "",
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  color[0],
+                  false
+              )
+            },
+            data: yData,
+          },
+            {
+              name: '',
+              type: 'bar',
+              barWidth: 40,
+              barGap: '-60%',
+              data: barArray,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(22,153,152, 0.1)'
+                }
+              },
+              zlevel: -1,
+              xAxisIndex: 1,
+            }
+          ],
+        };
+        this.myChart.setOption(option);
+        window.addEventListener("resize", () => this.myChart.resize());
+        this.loading = false
+      },
+      getData() {
+        this.loading = true;
+        let {startTime,endTime } = this
+        let params = {
+          level: this.currentLevelData.orgLevel,
+          orgId: this.currentLevelData.orgId,
+          startTime,
+          endTime,
+        };
+        this.$http
+          .get(
+            "/governance/satisfactionOverview/satisfactionFollowGroup?" +
+              this.$paramsFormat(params)
+          )
+          .then(({ data: { data } }) => {
+            this.event12345Num = data.event12345Num;
+            this.provinceSatisfactionNum = data.provinceSatisfactionNum;
+            this.selfInspectNum = data.selfInspectNum;
+            this.loading = false;
+          });
+      },
+      timeChange() {
+        let startTime = "",
+          endTime = "";
+        if (this.typeCondition === 1) {
+          startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 3) {
+          startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 4) {
+          startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 5) {
+          startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+        } else {
+          endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+        }
+        this.startTime = startTime;
+        this.endTime = endTime;
+        this.getData();
+      },
+    },
+  };
+  </script>
+  <style lang="scss" src="./index.scss" scoped />
+  <style lang="scss" scoped>
+  .el-table .thead{
+    color: #c0c4cd !important;
+    background: #0d2b57 !important;
+   }
+  /deep/ .el-input__inner {
+      width: 110px !important;
+      height: 32px !important;
+      background: #021c49 !important;
+      border: 1px solid #125aaa !important;
+    //   border-radius: 12px !important;
+      color: #a0cdff;
+    }
+    /deep/ .el-input__icon {
+      line-height: 24px !important;
+      color: #a0cdff;
+    }
+  .f-hflex{
+    width: 100px;
+  }
+  .f-flex{
+    margin-top: 20px;
+  }
+  .f-darkGray{
+    margin-top: 10px;
+  }
+  .event-statistics {
+    margin-bottom: 27px;
+  }
+  .m-table {
+		margin-top: 5px;
+		overflow: hidden;
+		min-height: 200px;
+		.table {
+			box-sizing: border-box;
+			width: 100%;
+			border: none;
+			table-layout: fixed;
+			&-header {
+				width: 100%;
+				// height: 56px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+				line-height: 20px;
+				&-th {
+					text-align: left;
+					border: none;
+					padding: 10px 5px 10px 24px;
+					// width: calc(100% / 5);
+				}
+			}
+			&-body {
+				box-sizing: border-box;
+				width: 100%;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+				line-height: 20px;
+				&-tr {
+					box-sizing: border-box;
+					width: 100%;
+					min-height: 56px;
+					.td {
+						box-sizing: border-box;
+						text-align: left;
+						border: none;
+						padding: 18px 5px 18px 24px;
+						>div {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							word-wrap: normal;
+						}
+						a {
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #1a95ff;
+							line-height: 20px;
+							cursor: pointer;
+						}
+					}
+				}
+				&-tr:nth-child(2n-1) {
+					background: rgba(26, 149, 255, 0.15);
+				}
+				// &-tr:hover {
+				//   background: url("../../../../assets/img/modules/visual/hover-bac.png")
+				//     no-repeat center;
+				//   background-size: 100% 100%;
+				// }
+			}
+			/deep/ .el-scrollbar__wrap {
+				width: 100% !important;
+				overflow-x: hidden !important;
+			}
+		}
+		.g-scrollar {
+			width: 100%;
+			overflow-x: hidden;
+			overflow-y: auto;
+		}
+		.orange {
+			color: #FFAA00
+		}
+		.green {
+			color: #04C790
+		}
+		.table-status {
+			position: relative;
+			height: 300px;
+			// 暂无数据
+			.no-data {
+				&-img {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					margin: auto;
+					width: 120px;
+				}
+			}
+		}
+	}
+  </style>
+  

src/views/dataBoard/IoTPerception/equipmentWarning/index.scss

@@ -0,0 +1,12 @@
+.m-jdjs{
+    // margin: 10px 16px;
+    .m-jdjs-js{
+        // display: grid;
+        // grid-template-columns: repeat(2, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
+        // gap: 10px; /* 设置每个元素之间的间距 */
+        // video {
+        //         width: 210px;
+        //         height: 120px;
+        //     }
+    }
+}

src/views/dataBoard/IoTPerception/equipmentWarning/index.vue

@@ -0,0 +1,627 @@
+<template>
+    <div class="m-jdjs">
+        <div class="m-jdjs-js">
+            <div class="m-table">
+                <table class="table" border="0" cellspacing="0" cellpadding="0">
+				<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
+				<thead>
+					<tr class="table-header" >
+						<th class="table-header-th" v-for="item in header" :key="item">
+							{{ item }}
+						</th>
+					</tr>
+				</thead></table>
+                <el-scrollbar :style="{maxHeight:treeHeight}" class="g-scrollar">
+			<table class="table" border="0" cellspacing="0" cellpadding="0">
+				<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
+					<tbody v-if="!loading" class="table-body" style="width: 1886px;">
+						<tr class="table-body-tr" v-for="(value, index) in list" :key="index"
+							@click="handleClickRow(index)">
+							<td class="td" v-for="(item, indexs) in value" :key="indexs">
+								<div v-if="
+									typeof item === 'string' ||
+									typeof item === 'number'
+								" :title="item">
+									{{ item }}
+								</div>
+								<div v-if="
+									typeof item === 'object' ||
+									typeof item.type === 'object'
+								" :title="item.name" :class="item.class">
+									{{ item.name }}
+								</div>
+								<div v-if="
+									typeof item === 'object' &&
+									item.type === 'img'
+								">
+									<!-- <span>{{  item.type+  item.src}}</span> -->
+									<img style="width: 18px; height: 18px" :src="item.src" alt="" />
+								</div>
+								<div v-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'index'
+								">
+									<img v-if="highlightTop3 && index == 0" src="@/assets/img/shuju/top/1.png" alt="" />
+									<img v-else-if="highlightTop3 && index == 1" src="@/assets/img/shuju/top/2.png"
+										alt="" />
+									<img v-else-if="highlightTop3 && index == 2" src="@/assets/img/shuju/top/3.png"
+										alt="" />
+									<span v-else>{{ index + 1 }}</span>
+								</div>
+								<a v-else-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'operate'
+								" fixed v-for="btn in item.list" :key="'operate' + index + btn"
+									@click.stop="handleClickBtn(index, btn)">{{ btn }}</a>
+								<a v-else-if="
+									typeof item === 'object' &&
+									item &&
+									item.type == 'people'
+								" @click="handleClickPeople(item)">{{ item.name }}</a>
+							</td>
+                            <td class="table-header-th" style="color: #007FF1;">
+                            查看
+						</td>
+						</tr>
+					</tbody>
+					<!-- 	</div> -->
+			</table></el-scrollbar>
+                <!-- <el-table :data="tableData" stripe style="width: 428px">
+                    <el-table-column prop="date" label="日期">
+                    </el-table-column>
+                    <el-table-column prop="name" label="姓名">
+                    </el-table-column>
+                    <el-table-column prop="address" label="地址">
+                    </el-table-column>
+                    <el-table-column  label="操作" width="100">
+                        <template slot-scope="scope">
+                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table> -->
+            </div>
+
+            <!-- <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" />
+          <video src="../image/123.mp4" /> -->
+        </div>
+
+    </div>
+</template>
+  <script>
+import {    mapGetters} from "vuex";
+import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
+  import * as echarts from "echarts";
+  import resiCategoryMap from "@/views/business/resi-category-map.js";
+  export default {
+    name: "jdjs",
+    props: {
+      currentLevelData: {
+        type: Object,
+        default: {},
+      },
+    },
+    data() {
+      return {
+        colList: [
+				{
+					align: "left",
+					width: "20%",
+				},
+                {
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "25%",
+				},
+				{
+					align: "left",
+					width: "15%",
+				},
+			
+			],
+			header: [
+				"保修时间",
+				"保修类型",
+				"报警状态",
+                "设备位置",
+				"操作",
+			],
+        list: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          status:"离线",
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          status:"离线",
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          status:"离线",
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          status:"离线",
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        equipmentListType: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        equipmentType: '',
+        orgId: this.$store.state.chooseArea.chooseName,
+        report: "",
+        overview: "",
+        loading: false,
+        rffxDate:'',
+        event12345Num:"",
+        provinceSatisfactionNum:"",
+        selfInspectNum:"",
+        typeConditionList: [
+          {
+            label: "本月",
+            value: 1,
+          },
+          {
+            label: "上月",
+            value: 2,
+          },
+          {
+            label: "近三月",
+            value: 3,
+          },
+          {
+            label: "近半年",
+            value: 4,
+          },
+          {
+            label: "近一年",
+            value: 5,
+          },
+        ],
+        typeCondition:5,
+        endTime:"",
+         startTime:"",
+      };
+    },
+    watch: {
+      currentLevelData(val) {
+        if (val.orgId) {
+          this.getReport(val);
+          this.getData();
+          this.getChartData(val);
+        }
+      },
+    },
+    computed: {
+			treeHeight() {
+				return this.$store.state.inIframe ? this.clientHeight - 385 + this.iframeHeight + "px" : this
+					.clientHeight - 385 + "px";
+			},
+			treeWidth() {
+				return document.documentElement.clientWidth;
+			},
+			...mapGetters(["clientHeight", "iframeHeight"]),
+		},
+    mounted() {
+      if (this.currentLevelData.orgId) {
+        this.getReport(this.currentLevelData);
+        this.getChartData();
+        this.getData()
+      }
+    },
+    components: {
+      titleSmall,
+    },
+    methods: {
+      getReport({ orgId, orgLevel }) {
+        this.$http
+          .get(
+            "/actual/base/streetOverview/communityOverview?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.overview = data;
+          });
+        this.$http
+          .get(
+            "/actual/base/streetOverview/summaryReport?orgId=" +
+              orgId +
+              "&level=" +
+              orgLevel
+          )
+          .then(({ data: { data } }) => {
+            this.report = data;
+          });
+      },
+      getChartData({ orgId, orgLevel }) {
+        this.loading = true
+        this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
+              orgId +
+              "&level=" +
+              orgLevel
+          ).then(({data: {data}}) => {
+          this.initCharts(data)
+        })
+      },
+      initCharts(data) {
+        let div = document.getElementById('zdgz');
+        this.myChart = echarts.init(div);
+       let chartData =  data.categoryList.map((item) => {
+              return {
+                name: resiCategoryMap[item.categoryName] || "",
+                count: item.categoryCount,
+              };
+        }).slice(0,8);
+        let xData = chartData.map(item=>item.name);
+        let yData = chartData.map(item=>item.count)
+        let color = [[
+          {
+            offset: 0,
+            color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
+          }
+        ]]
+        let num = yData
+        const max = Math.max(...num)
+        let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+        var option = {
+          title: {
+            show: false,
+            text: '',
+            x: 'center',
+            top: '18px',
+            textStyle: {
+              color: '#333333',
+              fontWeight: 500,
+              fontSize: 12,
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(13,33,71,0.5)',
+            borderColor: 'rgba(143,174,252,0.6)',
+            padding: 8,
+            textStyle: {
+              color: '#fff',
+            },
+            formatter: function (params) {
+              var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>'
+              return res;
+            },
+          },
+  /*        dataZoom: [
+            {
+              "type": "slider",
+              "start": 0,
+              "end": parseInt((5 / xData.length) * 10) / 10 * 100,
+              "height": 10,
+              "bottom": 0,
+              "showDetail": false,
+              "showDataShadow": false,
+              "borderColor": "transparent"
+            }
+          ],*/
+          grid: {
+            top: '18%',
+            left: '2%',
+            right: '4%',
+            bottom: '8%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#323c41'
+                }
+              },
+              axisLabel: {
+                align: 'center',
+                interval: 0,
+                textStyle: {
+                  fontSize: 12,
+                  color: '#A3B9DA'
+                }
+              },
+              boundaryGap: true,
+              data: xData,
+            }, {
+              type: 'category',
+              data: xData,
+              axisLine: {show: false},
+              axisLabel: {
+                show: false,
+              },
+              boundaryGap: true,
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '单位：人',
+              nameLocation: 'end',
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(4,187,255,0.18)',
+                  type: 'dashed'
+                },
+              },
+              nameTextStyle: {
+                color: '#A3B9DA',
+                textStyle: {
+                  fontSize: 12
+                },
+                align: 'right',
+                padding: [0, 5, -5, 5],
+              },
+              axisLabel: {
+                show: true,
+                color: '#A3B9DA',
+                textStyle: {
+                  fontSize: 12
+                },
+              },
+              axisTick: {
+                show: false
+              }
+            }
+          ],
+          series: [
+          {
+            name: "",
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  color[0],
+                  false
+              )
+            },
+            data: yData,
+          },
+            {
+              name: '',
+              type: 'bar',
+              barWidth: 40,
+              barGap: '-60%',
+              data: barArray,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(22,153,152, 0.1)'
+                }
+              },
+              zlevel: -1,
+              xAxisIndex: 1,
+            }
+          ],
+        };
+        this.myChart.setOption(option);
+        window.addEventListener("resize", () => this.myChart.resize());
+        this.loading = false
+      },
+      getData() {
+        this.loading = true;
+        let {startTime,endTime } = this
+        let params = {
+          level: this.currentLevelData.orgLevel,
+          orgId: this.currentLevelData.orgId,
+          startTime,
+          endTime,
+        };
+        this.$http
+          .get(
+            "/governance/satisfactionOverview/satisfactionFollowGroup?" +
+              this.$paramsFormat(params)
+          )
+          .then(({ data: { data } }) => {
+            this.event12345Num = data.event12345Num;
+            this.provinceSatisfactionNum = data.provinceSatisfactionNum;
+            this.selfInspectNum = data.selfInspectNum;
+            this.loading = false;
+          });
+      },
+      timeChange() {
+        let startTime = "",
+          endTime = "";
+        if (this.typeCondition === 1) {
+          startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 3) {
+          startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 4) {
+          startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 5) {
+          startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+        }
+        if (this.typeCondition === 2) {
+          endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+        } else {
+          endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+        }
+        this.startTime = startTime;
+        this.endTime = endTime;
+        this.getData();
+      },
+    },
+  };
+  </script>
+  <style lang="scss" src="./index.scss" scoped />
+  <style lang="scss" scoped>
+  .el-table .thead{
+    color: #c0c4cd !important;
+    background: #0d2b57 !important;
+   }
+  /deep/ .el-input__inner {
+      width: 110px !important;
+      height: 32px !important;
+      background: #021c49 !important;
+      border: 1px solid #125aaa !important;
+    //   border-radius: 12px !important;
+      color: #a0cdff;
+    }
+    /deep/ .el-input__icon {
+      line-height: 24px !important;
+      color: #a0cdff;
+    }
+  .f-hflex{
+    width: 100px;
+  }
+  .f-flex{
+    margin-top: 20px;
+  }
+  .f-darkGray{
+    margin-top: 10px;
+  }
+  .event-statistics {
+    margin-bottom: 27px;
+  }
+  .m-table {
+		margin-top: 5px;
+		overflow: hidden;
+		min-height: 200px;
+		.table {
+			box-sizing: border-box;
+			width: 100%;
+			border: none;
+			table-layout: fixed;
+			&-header {
+				width: 100%;
+				// height: 56px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+				line-height: 20px;
+				&-th {
+					text-align: left;
+					border: none;
+					padding: 10px 5px 10px 24px;
+					// width: calc(100% / 5);
+				}
+			}
+			&-body {
+				box-sizing: border-box;
+				width: 100%;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+				line-height: 20px;
+				&-tr {
+					box-sizing: border-box;
+					width: 100%;
+					min-height: 56px;
+					.td {
+						box-sizing: border-box;
+						text-align: left;
+						border: none;
+						padding: 18px 5px 18px 24px;
+						>div {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							word-wrap: normal;
+						}
+						a {
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #1a95ff;
+							line-height: 20px;
+							cursor: pointer;
+						}
+					}
+				}
+				&-tr:nth-child(2n-1) {
+					background: rgba(26, 149, 255, 0.15);
+				}
+				// &-tr:hover {
+				//   background: url("../../../../assets/img/modules/visual/hover-bac.png")
+				//     no-repeat center;
+				//   background-size: 100% 100%;
+				// }
+			}
+			/deep/ .el-scrollbar__wrap {
+				width: 100% !important;
+				overflow-x: hidden !important;
+			}
+		}
+		.g-scrollar {
+			width: 100%;
+			overflow-x: hidden;
+			overflow-y: auto;
+		}
+		.orange {
+			color: #FFAA00
+		}
+		.green {
+			color: #04C790
+		}
+		.table-status {
+			position: relative;
+			height: 300px;
+			// 暂无数据
+			.no-data {
+				&-img {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					margin: auto;
+					width: 120px;
+				}
+			}
+		}
+	}
+  </style>
+  

src/views/dataBoard/IoTPerception/eventWarningStatistics/index.scss

@@ -0,0 +1,12 @@
+.m-jdjs{
+    // margin: 10px 16px;
+    .m-jdjs-js{
+        // display: grid;
+        // grid-template-columns: repeat(2, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
+        // gap: 10px; /* 设置每个元素之间的间距 */
+        // video {
+        //         width: 210px;
+        //         height: 120px;
+        //     }
+    }
+}

src/views/dataBoard/IoTPerception/eventWarningStatistics/index.vue

@@ -0,0 +1,131 @@
+<template>
+    
+    <div class="charts">
+        <!-- <div class="charts-one">
+        </div> -->
+        <div id="DissatisfiedReason1" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div>
+        <div style="width: 70%;">
+            <div style="display: flex;flex-direction:column;">
+                <div style="display: flex;flex-direction:row; justify-content: space-between;">
+                    <div>本月预警数量</div>
+                    <div>20</div>
+                </div>
+             
+            </div>
+           
+            <div>12324</div>
+        </div>
+
+    </div>
+  </template>
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    name: "DissatisfiedReason1",
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+      this.$http("/governance/satisfaction/communitySelfInsp/stats/dissatisfactionReason/classification", {}).then(({data: {data}}) => {
+        this.initChart(data);
+      })
+    },
+    methods: {
+      timeChange() {
+      },
+      initChart(data) {
+        let div = document.getElementById('DissatisfiedReason1');
+        this.myChart1 = echarts.init(div);
+        // var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+        // var getNum = data.map(item => item.qty);
+        // var total = eval(getNum.join('+'))
+        // var data = [{name: getname[i], value: getNum[i]}];
+        // for (var i = 0; i < getname.length; i++) {
+        //   data.push({name: getname[i], value: getNum[i]})
+        // }
+            var option = {
+                title: {
+                    text: '80%',
+                    x: 'center',
+                    y: 'center',
+                    textStyle: {
+                        fontWeight: 'normal',
+                        color: '#0580f2',
+                        fontSize: '30'
+                    }
+                },
+                color: ['rgba(176, 212, 251, 1)'],
+                series: [{
+                    name: 'Line 1',
+                    type: 'pie',
+                    clockWise: true,
+                    radius: ['85%', '66%'],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [{
+                        value: 80,
+                        name: '01',
+                        itemStyle: {
+                            normal: {
+                                color: { // 完成的圆环的颜色
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#00cefc' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: '#367bec' // 100% 处的颜色
+                                    }]
+                                },
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }
+                        }
+                    }, {
+                        name: '02',
+                        value: 20
+                    }]
+                }]
+            }
+            this.myChart1.setOption(option, true);
+            window.addEventListener("resize", () => this.myChart1.resize());
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.charts {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    // justify-content: space-between;
+    padding: 20px;
+
+    #DissatisfiedReason1 {
+        flex: calc(100% - 100px);
+        width: calc(100% - 100px);
+        height: 150px;
+        z-index: 50px;
+    }
+}
+  
+</style>

src/views/dataBoard/IoTPerception/index.vue

@@ -1,92 +1,157 @@
 <template>
-    <div>
-      <div class="g-row">
-        <div class="g-left" style="z-index: 10;">
-          <div class="m-box">
-            <title-box
-            text="视频监控"/>
-            <jdjs :currentLevelData="currentLevelData"/>
+  <div>
+    <div class="g-row">
+      <div class="g-left" style="z-index: 10;">
+        <div class="m-box">
+          <title-box text="视频监控" />
+          <jdjs :currentLevelData="currentLevelData" />
+        </div>
+        <div class="m-box1">
+          <title-box text="设备数量统计" />
+          <RequirementList :currentLevelData="currentLevelData" />
+        </div>
+        <div class="m-box2">
+          <title-box text="设备列表" />
+          <!-- <RequirementList :currentLevelData="currentLevelData"/> -->
+          <equipmentList :currentLevelData="currentLevelData" />
+        </div>
+      </div>
+      <div class="g-center" style="z-index: 10;">
+        <div class="m-per">
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/1.png" />设备总数
+              </div>
+              <div>
+                <b>10</b>
+              </div>
+            </div>
           </div>
-          <div class="m-box">
-            <title-box text="需求清单"/>
-            <RequirementList :currentLevelData="currentLevelData"/>
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/2.png" />设备类型
+              </div>
+              <div>
+                <b>10</b>
+              </div>
+            </div>
           </div>
-        </div>
-        <!-- <div class="g-center"> -->
-          <div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden;position: fixed;">
-            <!-- <map-top :currentLevelData="currentLevelData" :level="currentLevel" :peopleType="peopleType"
-                     @changeType="changeType" @search="search"/> -->
-            <!-- <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
-              <img src="~@/assets/images/shuju/overview/go-back.png"/>
-            </div> -->
-            <grid-map
-                ref="map"
-                :level="currentLevel"
-                :peopleType="peopleType"
-                :srcGridData="orgData"
-                @clickAgency="clickAgencyItem"
-                @clickDotBtn="handleClickDotBtn"
-                @resourcesPointClick="resourcesPointClick"
-                @showMapDialog="showMapDialog"
-            />
-            <!-- <div class="map-legend">
-              <div class="legend-title">
-                供需匹配地图
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/3.png" />设备在线
               </div>
-              <div class="legend-list">
-                <div class="legend-item blue">
-                  未完成需求
-                </div>
-                <div class="legend-item orange">
-                  难解决问题
-                </div>
-                <div class="legend-item green">
-                  可调配资源
-                </div>
-                <div class="legend-item red">
-                  不满意问题
-                </div>
+              <div>
+                <b>10</b>
               </div>
-            </div> -->
+            </div>
           </div>
-  
-        <!-- </div> -->
-  
-        <!-- <div class="g-right">
-  
-          <div class="m-box">
-            <title-box text="问题清单"></title-box>
-            <wtqd v-if="eventType === 1" :currentLevelData="currentLevelData" :date="sjhfDate"/>
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/4.png" />设备警告
+              </div>
+              <div>
+                <b>10</b>
+              </div>
+            </div>
           </div>
-  
-        </div> -->
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/5.png" />设备告警
+              </div>
+              <div>
+                <b>10</b>
+              </div>
+            </div>
+          </div>
+          <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+            <div class="item-info">
+              <div>
+                <img src="./image/icon/6.png" />时间预警
+              </div>
+              <div>
+                <b>10</b>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="map-legend">
+          <div class="legend-title">
+            供需匹配地图
+          </div>
+          <div class="legend-list">
+            <div class="legend-item blue">
+              未完成需求
+            </div>
+            <div class="legend-item orange">
+              难解决问题
+            </div>
+            <div class="legend-item green">
+              可调配资源
+            </div>
+            <div class="legend-item red">
+              不满意问题
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="g-right" style="z-index: 10;">
+        <div class="m-box3">
+          <title-box text="基础设施覆盖路" />
+          <InfrastructureRate :currentLevelData="currentLevelData" />
+        </div>
+        <div class="m-box2">
+          <title-box text="设备报警" textSon="事件预警" />
+          <equipmentWarning :currentLevelData="currentLevelData" />
+        </div>
+        <div class="m-box1">
+          <title-box text="事件统计" textSon="事件预警" />
+          <eventWarningStatistics :currentLevelData="currentLevelData" />
+        </div>
+
+      </div>
+      <div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden;position: fixed;">
+        <grid-map ref="map" :level="currentLevel" :peopleType="peopleType" :srcGridData="orgData"
+          @clickAgency="clickAgencyItem" @clickDotBtn="handleClickDotBtn" @resourcesPointClick="resourcesPointClick"
+          @showMapDialog="showMapDialog" />
+
       </div>
-      <!--
+    </div>
+    <!--
         -- MapDialog
         -- type必填
         -- njjwtqk = 难解决问题情况
         -- bmysxqk = 不满意事项情况
         -- xqwwcqk = 需求未完成情况
       -->
-      <MapDialog v-if="isShowMapDialog" ref="MapDialog" :currentLevelData="currentLevelData" :type="mapType"
-                 @close="isShowMapDialog = false"/>
-      <cpt-loading v-show="false"/>
-      <MapResourceInfo ref="MapResourceInfo" :currentLevelData="currentLevelData"/>
-    </div>
-  </template>
+    <MapDialog v-if="isShowMapDialog" ref="MapDialog" :currentLevelData="currentLevelData" :type="mapType"
+      @close="isShowMapDialog = false" />
+    <cpt-loading v-show="false" />
+    <MapResourceInfo ref="MapResourceInfo" :currentLevelData="currentLevelData" />
+  </div>
+</template>
   <script>
   import gridMap from "@/views/dataBoard/cpts/sjkb-map/index";
   import cptBread from "@/views/dataBoard/renfang/cpts/bread";
   import cptLoading from "@/views/dataBoard/cpts/loading";
   import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";
   import jdjs from "@/views/dataBoard/IoTPerception/Videosurveillance/index.vue";
+  import equipmentList from "@/views/dataBoard/IoTPerception/equipmentList/index.vue";
+  import eventWarningStatistics from "@/views/dataBoard/IoTPerception/eventWarningStatistics/index.vue";
+  import equipmentWarning from "@/views/dataBoard/IoTPerception/equipmentWarning/index.vue";
+  import InfrastructureRate from "@/views/dataBoard/IoTPerception/InfrastructureRate/index.vue";
   import jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
   import mapTop from "@/views/dataBoard/overview/components/map-top.vue";
   import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
   import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
   import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
   import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
-  import RequirementList from "@/views/dataBoard/overview/components/RequirementList.vue";
+  import RequirementList from "@/views/dataBoard/IoTPerception/devicesNumber/index.vue";
   import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
   import GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.vue";
   import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
@@ -105,6 +170,10 @@
   export default {
     name: "overview",
     components: {
+      eventWarningStatistics,
+      equipmentWarning,
+      InfrastructureRate,
+      equipmentList,
       gridMap,
       cptLoading,
       cptBread,
@@ -131,6 +200,13 @@
   
     data() {
       return {
+      //   centerList:[
+      // {
+      //   // title:"设备总数",
+      //   // imgs:"./image/icon/1.png"
+      //   // number:""
+      // }
+      //   ],
         loading: false,
         rfphDate: this.$moment().subtract(1, "month").format("YYYY-MM"),
         sq12345Date: this.$moment().subtract(1, "month").format("YYYY-MM"),

src/views/dataBoard/cpts/Title/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="title" :class="noBg ? 'no-bg' : ''">
     <span class="text">
-      <span class="txt">{{ text }}</span>
+      <span class="txt">{{ text }} <span v-if="textSon" class="">{{ textSon }}</span></span>
+   
       <span class="text-shadow">{{ text }}</span>
     </span>
+  
     <slot></slot>
   </div>
 </template>
@@ -15,6 +17,10 @@ export default {
       type: String,
       default: "",
     },
+    textSon: {
+      type: String,
+      default: "",
+    },
     noBg: {
       type: Boolean,
       default: false,