Merge branch 'master' of http://app.tjzhxx.cn:3001/yyky/yyky_web

src/router/index.js

@@ -68,7 +68,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index'),
+        component: () => import('@/views/datav/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }

src/views/datav/LeftChart2.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="left-chart-2">
-    <div class="lc2-header">李四收费站</div>
-    <div class="lc2-details">设备运行总数<span>245</span></div>
-    <dv-charts class="lc2-chart" :option="option" />
-    <dv-decoration-2 style="height:10px;" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart2',
-  data () {
-    return {
-      option: {
-        series: [
-          {
-            type: 'pie',
-            data: [
-              { name: '收费系统', value: 93 },
-              { name: '通信系统', value: 32 },
-              { name: '监控系统', value: 65 },
-              { name: '供配电系统', value: 44 },
-              { name: '其他', value: 52 }
-            ],
-            radius: ['45%', '65%'],
-            insideLabel: {
-              show: false
-            },
-            outsideLabel: {
-              labelLineEndLength: 10,
-              formatter: '{percent}%\n{name}',
-              style: {
-                fontSize: 14,
-                fill: '#fff'
-              }
-            }
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.left-chart-2 {
-  width: 100%;
-  height: 30%;
-  display: flex;
-  flex-direction: column;
-
-  .lc2-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc2-details {
-    height: 40px;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    text-indent: 20px;
-
-    span {
-      color: #096dd9;
-      font-weight: bold;
-      font-size: 35px;
-      margin-left: 20px;
-    }
-  }
-
-  .lc2-chart {
-    height: calc(100vh - 80px);
-  }
-}
-</style>

src/views/datav/LeftChart11.vue → src/views/datav/LeftChartRight.vue

@@ -134,7 +134,7 @@ export default {
           let hideName = "";
           let hideTel = "";
           if (item.name.length >= 2) {
-            hideName = item.name[0] + "*" + item.name.substring(2);
+            hideName = item.name[0] + " " + "*" + item.name.substring(2);
           }
           if (item.telno && item.telno.length === 11) {
             hideTel = this.hideMiddleDigits(item.telno);
@@ -145,9 +145,9 @@ export default {
             telno: hideTel,
           };
         });
-        console.log(this.config.data,'445566');
+        console.log(this.config.data, "445566");
 
-        console.log('我先执行');
+        console.log("我先执行");
 
         this.config = {
           ...this.config,
@@ -218,7 +218,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .dv-scroll-board .rows{
+::v-deep .dv-scroll-board .rows {
   // overflow: visible !important;
 }
 ::v-deep .dv-scroll-board .rows .row-item {

src/views/datav/index.vue

@@ -24,7 +24,7 @@
       <div class="main">
         <div class="left">
           <div class="left-top">
-            <div class="top-left"><Left-Chart-1 /></div>
+            <div class="top-left"><Left-Chart-Top /></div>
             <div class="top-right">
               <equ-map
                 v-loading="mapLoading"
@@ -36,31 +36,31 @@
           <div class="left-under">
             <div class="under-title"><b>告警处理完成</b></div>
             <dv-border-box-8 class="under-box" v-if="flag">
-              <Left-Chart-99
+              <Left-Chart-Bottom
                 title="SOS报警处理"
                 :value="percentData.alarmSOS"
-              ></Left-Chart-99>
-              <Left-Chart-99
+              ></Left-Chart-Bottom>
+              <Left-Chart-Bottom
                 title="电子围栏报警"
                 :value="percentData.alarmRail"
-              ></Left-Chart-99>
-              <Left-Chart-99
+              ></Left-Chart-Bottom>
+              <Left-Chart-Bottom
                 title="跌倒报警"
                 :value="percentData.alarmFall"
-              ></Left-Chart-99>
-              <Left-Chart-99
+              ></Left-Chart-Bottom>
+              <Left-Chart-Bottom
                 title="设备在线率"
                 :value="percentData.alarmStauts"
-              ></Left-Chart-99>
-              <Left-Chart-99
+              ></Left-Chart-Bottom>
+              <Left-Chart-Bottom
                 title="全部报警"
                 :value="percentData.alarmAll"
-              ></Left-Chart-99>
+              ></Left-Chart-Bottom>
             </dv-border-box-8>
           </div>
         </div>
         <div class="right">
-          <Left-Chart-11 ref="updateData" />
+          <Left-Chart-Right ref="updateData" />
         </div>
       </div>
     </div>
@@ -68,10 +68,9 @@
 </template>
 
 <script>
-import LeftChart1 from "./LeftChart1";
-import LeftChart11 from "./LeftChart11";
-import LeftChart99 from "./LeftChart99";
-import LeftChart2 from "./LeftChart2";
+import LeftChartTop from "./LeftChartTop";
+import LeftChartRight from "./LeftChartRight";
+import LeftChartBottom from "./LeftChartBottom";
 
 import equMap from "./Map.vue";
 
@@ -80,10 +79,9 @@ import { percent, alarmList } from "@/api/system/datav";
 export default {
   name: "DataView",
   components: {
-    LeftChart1,
-    LeftChart11,
-    LeftChart99,
-    LeftChart2,
+    LeftChartTop,
+    LeftChartRight,
+    LeftChartBottom,
     equMap,
   },
   data() {
@@ -347,6 +345,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .amap-maps{
+  border:1px solid #235fa7 !important;
+}
 #data-view {
   color: #fff;
   width: 100%;

src/views/equBigData/BottomCharts.vue

@@ -33,11 +33,11 @@ export default {
   .box-title {
     height: 20%;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     .header-center-decoration {
       width: 95%;
       height: 70px;
-      margin-top:22px;
+      margin-top: 3px;
     }
     .center-title {
       position: absolute;
@@ -47,13 +47,9 @@ export default {
       top: 14px;
       transform: translateX(-50%);
     }
-
   }
-  .content{
+  .content {
     height: 100%;
   }
-  .aa {
-    display: flex;
-  }
 }
 </style>

src/views/equBigData/LeftChart1.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="left-chart-middle">
     <dv-charts class="lc1-chart" :option="option" />
-    <!-- dv-active-ring-chart -->
   </div>
 </template>
 
@@ -23,17 +22,22 @@ export default {
             data: [],
             radius: ["50%", "75%"],
             axisTick: {},
+            percentToFixed: 2,
             insideLabel: {
               show: false,
               formatter: "{value}%",
             },
-            outsideLabel:{
-              show:true,
-              formatter:"{name}  {percent}%",
-              style:{
-                fontSize:18,
-              }
-            }
+            outsideLabel: {
+              show: true,
+              formatter: (params) => {
+                return (
+                  params.name + "  " + Number(params.percent).toFixed(2) + "%"
+                );
+              },
+              style: {
+                fontSize: 18,
+              },
+            },
           },
         ],
       },
@@ -44,21 +48,12 @@ export default {
   },
   methods: {
     getData() {
-      console.log(this.datalist,'我是ist');
-      this.option.series[0].data=this.datalist.map(item=>{
-        return{
-          name:item.deviceStr,
-          value:item.count
-        }
-      })
-      // addDevice().then(res=>{
-      //   let xlist=res.data.map(item=>item.month)
-      //   let ylist=res.data.map(item=>item.count)
-      //   console.log(xlist,777);
-      //   console.log(ylist,888);
-      //   this.option.xAxis.data=xlist
-      //   this.option.series[0].data=ylist
-      // })
+      this.option.series[0].data = this.datalist.map((item) => {
+        return {
+          name: item.deviceStr,
+          value: item.count,
+        };
+      });
     },
   },
 };

src/views/equBigData/LeftChart2.vue

@@ -32,7 +32,7 @@ export default {
         xAxis: {
           name: "",
           data: this.xlist,
-          // data: ['周一', '周二', '周三'],
+          boundaryGap: false,
           axisLine: {
             style: {
               stroke: "#324686",
@@ -48,13 +48,13 @@ export default {
           },
           axisTick:{
             show: false,
-          }
+          },
         },
         yAxis: {
           name: "",
           data: "value",
+          min:0,
           splitLine: {
-            // show:false,
             style: {
               stroke: "#09111e",
               lineWidth: 1,
@@ -85,6 +85,10 @@ export default {
           {
             data: this.ylist,
             type: "line",
+            label:{
+              show:true,
+            },
+            // animationCurve:'easeOutCubic',
             lineArea: {
               show: true,
               gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],

src/views/equBigData/MiddleChart.vue

@@ -69,6 +69,9 @@ export default {
             data: this.ylist,
             type: "bar",
             barWidth: 15,
+            label:{
+              show:true,
+            }
           },
         ],
       },

src/views/equBigData/RightBottom copy.vue

@@ -1,135 +0,0 @@
-<template>
-  <div id="scroll-board">
-    <dv-scroll-board :config="config" />
-    <!-- <div class="box">
-      <div class="box-left">
-        <div class="box-left-top">
-          <div>设备ID:<span>3500000</span></div>
-          <div>时间:<span>2023-08-04 10:25:34</span></div>
-        </div>
-        <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-      </div>
-      <div class="box-right">王艺涵</div>
-    </div> -->
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ScrollBoard",
-  props: {
-    data: {
-      type: Array,
-      default: [],
-    },
-  },
-  data() {
-    return {
-      config: {
-        // header: ["时间", "病害信息", "数量", "标段"],
-        // data: [
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        // ],
-        data: [],
-        index: true,
-        columnWidth: [50],
-        align: ["center"],
-        rowNum: 5,
-        waitTime: 1500,
-        // headerBGC: "#1981f6",
-        // headerHeight: 20,
-        oddRowBGC: "rgba(0, 44, 81, 0.8)",
-        evenRowBGC: "rgba(10, 29, 50, 0.8)",
-      },
-    };
-  },
-  mounted() {
-    this.getData();
-  },
-  methods: {
-    getData() {
-      let dataList = this.data;
-      let list = [];
-      dataList.forEach((item) => {
-        list.push([
-          `<div class="box">
-          <div class="box-left">
-            <div class="box-left-top">
-              <div>设备ID:<span class="idspan">${item.device_id_code}</span></div>
-              <div class="time">时间: <span>${item.createtime}</span></div>
-            </div>
-            <div class="box-left-under">消息:<span>${item.alarm_msg}</span></div>
-          </div>
-          <div class="box-right">${item.name}</div>
-        </div>`,
-        ]);
-      });
-      this.config.data = list;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .dv-scroll-board .rows .row-item {
-  height: 20% !important;
-  line-height: normal !important;
-  display: flex;
-  align-items: center;
-}
-.dv-scroll-board .rows .ceil {
-  overflow: auto;
-}
-::v-deep .box {
-  display: flex;
-  justify-content: space-between;
-  height: 100%;
-}
-::v-deep .box-left {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  // align-items: center;
-  .box-left-top {
-    height: 50%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-
-    .idspan {
-      color: #1790ff;
-      font-size: 15px;
-    }
-    .time {
-      margin-left: 5px;
-    }
-  }
-  .box-left-under {
-    height: 50%;
-  }
-}
-::v-deep .box-right {
-  color: #1fcb21;
-}
-#scroll-board {
-  width: 100%;
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  transform: scale3d(0.9, 0.7, 0.86);
-  margin-top: -46px;
-  // margin: -46px 10px 0 10px;
-}
-</style>

src/views/equBigData/RightBottom.vue

@@ -1,16 +1,6 @@
 <template>
   <div id="scroll-board">
     <dv-scroll-board :config="config"/>
-    <!-- <div class="box">
-      <div class="box-left">
-        <div class="box-left-top">
-          <div>设备ID:<span>3500000</span></div>
-          <div>时间:<span>2023-08-04 10:25:34</span></div>
-        </div>
-        <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-      </div>
-      <div class="box-right">王艺涵</div>
-    </div> -->
   </div>
 </template>
 
@@ -26,29 +16,12 @@ export default {
   data() {
     return {
       config: {
-        // header: ["时间", "病害信息", "数量", "标段"],
-        // data: [
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        // ],
         data: [],
         index: true,
         columnWidth: [50],
         align: ["center"],
         rowNum: 5,
         waitTime: 1500,
-        // headerBGC: "#1981f6",
-        // headerHeight: 20,
         oddRowBGC: "rgba(0, 44, 81, 0.8)",
         evenRowBGC: "rgba(10, 29, 50, 0.8)",
       },
@@ -140,6 +113,5 @@ export default {
   overflow: hidden;
   transform: scale3d(0.9, 0.7, 0.86);
   margin-top: -46px;
-  // margin: -46px 10px 0 10px;
 }
 </style>

src/views/equBigData/bbb copy.vue

@@ -1,243 +0,0 @@
-<template>
-  <div class="left-charts">
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option" />
-      <div class="item-chart-word zongshu">用户总数</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option1" />
-      <div class="item-chart-word zaixianshu">绑定设备</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option2" />
-      <div class="item-chart-word lixianshu">绑定用户数</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option3" />
-      <div class="item-chart-word gaojingshu">设备活跃度</div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import { count, alarm } from "@/api/system/datav";
-
-export default {
-  name: "BottomCharts",
-  props: {
-    number: {
-      type: Number,
-      default: 0,
-    },
-    data:{
-      type:Object,
-      default:{},
-    }
-  },
-  components: {
-  },
-  data() {
-    return {
-      // userTotal:0,
-      option: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius:'80%',
-            data: [
-              {
-                name: "itemA",
-                value: this.number,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#01dcdf"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option1: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius:'80%',
-            data: [
-              {
-                name: "itemA",
-                value: this.data.bindDevice,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#33faaa"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option2: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius:'80%',
-            data: [
-              {
-                name: "itemA",
-                value: this.data.bindUser,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f7ac20"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option3: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius:'80%',
-            data: [
-              {
-                name: "itemA",
-                value: this.data.deviceOnline,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f93496", "#f61967","#f2053e"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-            animationFrame: 10,
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.left-charts {
-  width: 100%;
-  height: 80%;
-  display: flex;
-  position: relative;
-
-  .left-chart-item {
-    width: 25%;
-    height: 100%;
-    box-sizing: border-box;
-    text-align: center;
-    .item-chart {
-      height: calc(100% - 80px);
-      position: relative;
-    }
-    .item-chart-word{
-      font-size: 20px;
-      margin-top: 15px;
-      font-weight: bold;
-    }
-    .zongshu{
-      color:rgb(0, 253, 250);
-    }
-    .zaixianshu{
-      color:rgb(7, 247, 168);
-    }
-    .lixianshu{
-      color:rgb(227, 179, 55);
-    }
-    .gaojingshu{
-      color:rgb(245, 2, 61);
-    }
-  }
-}
-</style>

src/views/equBigData/equ.vue

@@ -38,7 +38,6 @@
 
 <script>
 import { count,deviceOver} from "@/api/system/equdata";
-// import { currentGET } from "api/modules";
 let style = {
   fontSize: 24,
 };
@@ -97,9 +96,7 @@ export default {
       return msg || 0;
     },
   },
-  created() {
-    // this.getData();
-  },
+  created() {},
   mounted() {
     this.deviceView();
   },
@@ -147,46 +144,14 @@ export default {
             ...this.activeconfig,
             number: [res.data.deviceOnline],
           };
-          this.switper();
+          // this.switper();
         } else {
           this.pageflag = false;
           this.$Message.warning(res.msg);
         }
-
-        this.switper();
+        // this.switper();
       });
     },
-    // getData() {
-    //   this.pageflag = true;
-    //   currentGET("big2").then((res) => {
-    //     if (!this.timer) {
-    //       console.log("设备总览", res);
-    //     }
-    //     if (res.success) {
-    //       this.userOverview = res.data;
-    //       this.equconfig = {
-    //         ...this.equconfig,
-    //         number: [res.data.onlineNum],
-    //       };
-    //       this.config = {
-    //         ...this.config,
-    //         number: [res.data.totalNum],
-    //       };
-    //       this.userconfig = {
-    //         ...this.userconfig,
-    //         number: [res.data.offlineNum],
-    //       };
-    //       this.activeconfig = {
-    //         ...this.activeconfig,
-    //         number: [res.data.alarmNum],
-    //       };
-    //       this.switper();
-    //     } else {
-    //       this.pageflag = false;
-    //       this.$Message.warning(res.msg);
-    //     }
-    //   });
-    // },
     //轮询
     switper() {
       if (this.timer) {

src/views/equBigData/equTotal.vue

@@ -1,290 +0,0 @@
-<template>
-  <div class="left-charts">
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option" />
-      <!-- <div class="user_Overview_nums allnum">
-        <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
-      </div> -->
-      <div class="item-chart-word-num zongshu">总数</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option1" />
-      <div class="item-chart-word-num zaixianshu">在线数</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option2" />
-      <div class="item-chart-word-num lixianshu">离线数</div>
-    </div>
-
-    <div class="left-chart-item">
-      <dv-charts class="item-chart" :option="option3" />
-      <div class="item-chart-word-num gaojingshu">告警数</div>
-    </div>
-  </div>
-</template>
-
-<script>
-let style = {
-  fontSize: 24,
-};
-export default {
-  name: "BottomCharts",
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
-  },
-  components: {},
-  data() {
-    return {
-      config: {
-        number: [100],
-        content: "{nt}",
-        style: {
-          ...style,
-          // stroke: "#00fdfa",
-          fill: "#00fdfa",
-        },
-      },
-      timer: null,
-      equTotalData: {},
-      deviceCount: 0,
-      deviceOnline: 0,
-      un_deviceOnline: 0,
-      alarmCount: 0,
-      option: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius: "80%",
-            data: [
-              {
-                name: "itemA",
-                value: this.data.deviceCount,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#01dcdf"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option1: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius: "80%",
-            data: [
-              {
-                name: "itemA",
-                value: this.data.deviceOnline,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#33faaa"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option2: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius: "80%",
-            data: [
-              {
-                name: "itemA",
-                value: this.data.un_deviceOnline,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f7ac20"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-          },
-        ],
-      },
-      option3: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 10,
-            radius: "80%",
-            data: [
-              {
-                name: "itemA",
-                value: this.data.alarmCount,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f93496", "#f61967", "#f2053e"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 30,
-              },
-            },
-            animationFrame: 10,
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    // this.deviceView();
-  },
-  methods: {},
-};
-</script>
-
-<style lang="scss">
-.user_Overview_nums {
-  width: 100px;
-  height: 100px;
-  text-align: center;
-  line-height: 100px;
-  font-size: 22px;
-  margin: 50px auto 30px;
-  background-size: cover;
-  background-position: center center;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-
-  &.bgdonghua::before {
-    animation: rotating 14s linear infinite;
-  }
-
-}
-  .allnum {
-    &::before {
-      background-image: url("./img/left_top_lan.png");
-    }
-  }
-
-.left-charts {
-  width: 100%;
-  height: 80%;
-  display: flex;
-  position: relative;
-
-  .left-chart-item {
-    width: 25%;
-    height: 100%;
-    box-sizing: border-box;
-    text-align: center;
-    .item-chart {
-      height: calc(100% - 80px);
-      position: relative;
-    }
-    .item-chart-word-num {
-      font-size: 20px;
-      margin-top: 15px;
-      font-weight: bold;
-    }
-    .zongshu {
-      color: rgb(0, 253, 250);
-    }
-    .zaixianshu {
-      color: rgb(7, 247, 168);
-    }
-    .lixianshu {
-      color: rgb(227, 179, 55);
-    }
-    .gaojingshu {
-      color: rgb(245, 2, 61);
-    }
-  }
-}
-</style>

src/views/equBigData/index.vue

@@ -6,7 +6,6 @@
         <div class="left-top">
           <dv-border-box-13>
             <Border-Item title="设备总览">
-              <!-- <equTotal v-if="equDataFlag" :data="equTotalData" /> -->
               <leftTop :data="equTotalData" />
             </Border-Item>
           </dv-border-box-13>
@@ -27,12 +26,12 @@
         </div>
       </div>
       <div class="content">
-        <equ-map v-loading="mapLoading" @callback="initMap" />
+        <equ-map style="border: 1px solid #6586ec;" v-loading="mapLoading" @callback="initMap" />
         <div class="left-under">
           <dv-border-box-13>
             <Border-Item title="报警列表">
-              <Right-Bottom v-if="alarmListFlag" :data="alarmList"/>            
-              <!-- <LeftBottom /> -->
+              <!-- <Right-Bottom v-if="alarmListFlag" :data="alarmList"/>             -->
+              <LeftBottom />
             </Border-Item>
           </dv-border-box-13>
           <!-- <ItemWrap
@@ -85,7 +84,6 @@ import LeftChartUnder from "./LeftChartUnder";
 import equMap from "./Maps";
 
 import BorderItem from "./BottomCharts";
-import equTotal from "./equTotal";
 import equ from "./equ";
 
 import RightBottom from "./RightBottom";
@@ -116,7 +114,6 @@ export default {
     LeftChart2,
     BorderItem,
     equMap,
-    equTotal,
     equ,
     RightBottom,
     LeftChartUnder,
@@ -128,7 +125,6 @@ export default {
   data() {
     return {
       mapLoading: false,
-      equTotalData: {},
       equDataFlag: false,
       userAgeFlag: false,
       userTotalFlag: false,
@@ -148,11 +144,10 @@ export default {
     };
   },
   mounted() {
-    // this.deviceView();
     this.userAgeAll();
     this.userTotal();
     // this.getUserData();
-    this.getAlarmStatusList();
+    // this.getAlarmStatusList();
     this.getEquData();
     this.getAddUser();
     this.getDeviceType();
@@ -208,13 +203,6 @@ export default {
         this.xylistFlag = true;
       });
     },
-    // deviceView() {
-    //   deviceView().then((res) => {
-    //     this.equTotalData = res.data;
-    //     this.equDataFlag = true;
-    //     this.swiper();
-    //   });
-    // },
     //轮询
     // swiper() {
     //   if (this.timer) {
@@ -246,25 +234,25 @@ export default {
         this.userAgeFlag = true;
       });
     },
-    getAlarmStatusList() {
-      alarmStatusList().then((res) => {
-        this.alarmList = res.data.map((item) => {
-          let hideName = "";
-          if (item.name?.length >= 2) {
-            hideName = item.name[0] + "*" + item.name.substring(2);
-            return {
-              ...item,
-              name: hideName,
-            };
-          } else {
-            return {
-              ...item,
-            };
-          }
-        });
-        this.alarmListFlag = true;
-      });
-    },
+    // getAlarmStatusList() {
+    //   alarmStatusList().then((res) => {
+    //     this.alarmList = res.data.map((item) => {
+    //       let hideName = "";
+    //       if (item.name?.length >= 2) {
+    //         hideName = item.name[0] + "*" + item.name.substring(2);
+    //         return {
+    //           ...item,
+    //           name: hideName,
+    //         };
+    //       } else {
+    //         return {
+    //           ...item,
+    //         };
+    //       }
+    //     });
+    //     this.alarmListFlag = true;
+    //   });
+    // },
     initMap(AMap) {
       this.AMap = AMap;
       this.map = new AMap.Map("map", {
@@ -876,20 +864,19 @@ export default {
 <style lang="scss">
 #data-view-container {
   width: 100%;
-  // height: 100%;
-  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  // min-height: calc(100vh - 84px);
   background-color: #030409;
   color: #fff;
   overflow: hidden;
   background-image: url("./img/bg.png");
   background-size: 100%;
   background-repeat: no-repeat;
-
   .main {
     display: flex;
     padding: 0 10px 10px 10px;
     box-sizing: border-box;
-    min-height: 85vh;
+    height: calc(100% - 27px);
     .left {
       width: 30%;
       // box-sizing: border-box;
@@ -906,21 +893,17 @@ export default {
       .left-under {
         margin-top: 10px;
         height: 30%;
-        .contetn_lr-item {
-          height: 310px;
+        .left-border {
         }
       }
     }
-
     // .content {
     //   flex: 1;
     // }
     .content {
       // width: 30%;
       flex: 1;
-
       // box-sizing: border-box;
-
       .left-under {
         height: 40%;
         // margin-top: 10px;

src/views/equBigData/left-bottom.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="pageflag"
     class="left_boottom_wrap beautify-scroll-def"
     :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
   >
@@ -13,31 +12,22 @@
             <div class="flex">
               <div class="info">
                 <span class="labels">设备ID：</span>
-                <span class="contents zhuyao doudong wangguan">
-                  {{ item.gatewayno }}</span
-                >
+                <span class="idspan"> {{ item.device_id_code }}</span>
               </div>
               <div class="info">
                 <span class="labels">时间：</span>
                 <span class="contents" style="font-size: 12px">
-                  {{ item.createTime }}</span
+                  {{ item.createtime }}</span
                 >
               </div>
             </div>
 
-            <span
-              class="types doudong"
-              :class="{
-                typeRed: item.onlineState == 0,
-                typeGreen: item.onlineState == 1,
-              }"
-              >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
-            >
+            <span class="box-right">{{ item.name }}</span>
 
             <div class="info addresswrap">
-              <span class="labels">地址：</span>
+              <span class="labels">消息：</span>
               <span class="contents ciyao" style="font-size: 12px">
-                {{ addressHandle(item) }}</span
+                {{ item.alarm_msg }}</span
               >
             </div>
           </div>
@@ -45,11 +35,248 @@
       </ul>
     </component>
   </div>
-
-  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px" /> -->
 </template>
 
 <script>
+import { alarmStatusList } from "@/api/system/equdata";
+// import { currentGET } from "api";
+import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
+// import Kong from "../../components/kong.vue";
+import Kong from "../components/kong.vue";
+export default {
+  components: { vueSeamlessScroll, Kong },
+  data() {
+    return {
+      list: [],
+      pageflag: true,
+      components: vueSeamlessScroll,
+      defaultOption: {
+        ...this.$store.state.settings.defaultOption,
+        singleHeight: 240,
+        limitMoveNum: 5,
+        step: 0,
+      },
+    };
+  },
+  computed: {
+    sbtxSwiperFlag() {
+      let sbtxSwiper = this.$store.state.settings.sbtxSwiper;
+      if (sbtxSwiper) {
+        this.components = vueSeamlessScroll;
+      } else {
+        this.components = Kong;
+      }
+      return sbtxSwiper;
+    },
+  },
+  created() {},
+
+  mounted() {
+    // this.getData();
+    this.getAlarmStatusList();
+    // this.deviceView();
+  },
+  methods: {
+    addressHandle(item) {
+      let name = item.provinceName;
+      if (item.cityName) {
+        name += "/" + item.cityName;
+        if (item.countyName) {
+          name += "/" + item.countyName;
+        }
+      }
+      return name;
+    },
+
+    getAlarmStatusList() {
+      alarmStatusList().then((res) => {
+        this.countUserNumData = res.data;
+        this.list = res.data.map((item) => {
+          let hideName = "";
+          if (item.name?.length >= 2) {
+            hideName = item.name[0] + " "+"*" + item.name.substring(2);
+            return {
+              ...item,
+              name: hideName,
+            };
+          } else {
+            return {
+              ...item,
+            };
+          }
+        });
+        let timer = setTimeout(() => {
+          clearTimeout(timer);
+          this.defaultOption.step =
+            this.$store.state.settings.defaultOption.step;
+        }, this.$store.state.settings.defaultOption.waitTime);
+      });
+    },
+
+    getData() {
+      this.pageflag = true;
+      // this.pageflag =false
+      currentGET("big3", { limitNum: 20 }).then((res) => {
+        console.log("设备提醒", res);
+        if (res.success) {
+          this.countUserNumData = res.data;
+          this.list = res.data.list;
+          let timer = setTimeout(() => {
+            clearTimeout(timer);
+            this.defaultOption.step =
+              this.$store.state.settings.defaultOption.step;
+          }, this.$store.state.settings.defaultOption.waitTime);
+        } else {
+          this.pageflag = false;
+          this.$Message({
+            text: res.msg,
+            type: "warning",
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_boottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: calc(100% - 106px);
+  margin-top: 15px;
+}
+
+.doudong {
+  //  vertical-align:middle;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.left_boottom {
+  width: 100%;
+  height: 100%;
+  padding-left: 0;
+
+  .left_boottom_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 14px;
+    margin: 10px 0;
+    .orderNum {
+      margin: 0 16px 0 -20px;
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+
+      .labels {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .zhuyao {
+        color: #1890ff;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 85%;
+      flex-shrink: 0;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("./img/zuo_xuxian.png");
+        bottom: -10px;
+        left: -2%;
+        background-size: cover;
+      }
+      .addresswrap {
+        width: 100%;
+        display: flex;
+        margin-top: 8px;
+      }
+      .flex {
+        display: flex;
+      }
+      .idspan {
+      color: #1790ff;
+      // font-size: 12px;
+    }
+      .box-right {
+        color: #1fcb21;
+        margin-right: 6%;
+      }
+
+    }
+
+    .wangguan {
+      color: #1890ff;
+      font-weight: 900;
+      font-size: 15px;
+      width: 80px;
+      flex-shrink: 0;
+    }
+
+    .time {
+      font-size: 12px;
+      // color: rgba(211, 210, 210,.8);
+      color: #fff;
+    }
+
+    .address {
+      font-size: 12px;
+      cursor: pointer;
+      // @include text-overflow(1);
+    }
+
+    .types {
+      width: 30px;
+      flex-shrink: 0;
+    }
+
+    .typeRed {
+      color: #fc1a1a;
+    }
+
+    .typeGreen {
+      color: #29fc29;
+    }
+  }
+}
+</style>
+
+<!-- <script>
 // import { currentGET } from "api";
 import { alarmStatusList } from "@/api/system/equdata";
 import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
@@ -445,4 +672,4 @@ export default {
     }
   }
 }
-</style>
+</style> -->

src/views/equBigData/left-top.vue

@@ -38,7 +38,6 @@
 
 <script>
 import { deviceView } from "@/api/system/equdata";
-// import { currentGET } from "api/modules";
 let style = {
   fontSize: 24,
 };
@@ -55,7 +54,7 @@ export default {
       pageflag: true,
       timer: null,
       config: {
-        number: [100],
+        number: [0],
         content: "{nt}",
         style: {
           ...style,
@@ -109,11 +108,12 @@ export default {
   methods: {
     clearData() {
       if (this.timer) {
+        // this.onlineconfig = {
+        //   ...this.onlineconfig,
+        //   number: [0],
+        // };
         clearInterval(this.timer);
         this.timer = null;
-        this.onlineconfig = {
-          number: [0],
-        };
       }
     },
     deviceView() {
@@ -136,55 +136,29 @@ export default {
             ...this.laramnumconfig,
             number: [res.data.alarmCount],
           };
-          this.switper();
+          // this.switper();
         } else {
           this.pageflag = false;
           this.$Message.warning(res.msg);
         }
 
-        this.switper();
+        // this.switper();
       });
     },
-    // getData() {
-    //   this.pageflag = true;
-    //   currentGET("big2").then((res) => {
-    //     if (!this.timer) {
-    //       console.log("设备总览", res);
-    //     }
-    //     if (res.success) {
-    //       this.userOverview = res.data;
-    //       this.onlineconfig = {
-    //         ...this.onlineconfig,
-    //         number: [res.data.onlineNum],
-    //       };
-    //       this.config = {
-    //         ...this.config,
-    //         number: [res.data.totalNum],
-    //       };
-    //       this.offlineconfig = {
-    //         ...this.offlineconfig,
-    //         number: [res.data.offlineNum],
-    //       };
-    //       this.laramnumconfig = {
-    //         ...this.laramnumconfig,
-    //         number: [res.data.alarmNum],
-    //       };
-    //       this.switper();
-    //     } else {
-    //       this.pageflag = false;
-    //       this.$Message.warning(res.msg);
-    //     }
-    //   });
-    // },
     //轮询
     switper() {
       if (this.timer) {
         console.log(this.timer, "1212");
-        return;
+        // return;
+      }else{
+        console.log('我在else', this.onlineconfig.number);
+        // this.onlineconfig = {
+        //   ...this.onlineconfig,
+        //   number: [0],
+        // };
       }
       let looper = (a) => {
-        console.log(a, "aa");
-        this.deviceView();
+        // this.deviceView();
       };
       this.timer = setInterval(
         looper,