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

src/api/system/equdata.js

@@ -0,0 +1,76 @@
+import request from '@/utils/request'
+
+// 查询设备总览1
+export function deviceView(query) {
+  return request({
+    url: '/system/display/deviceView',
+    method: 'get',
+    params: query
+  })
+}
+// 查询设备总览2
+export function deviceOver(query) {
+  return request({
+    url: '/system/display/deviceOver',
+    method: 'get',
+    params: query
+  })
+}
+// 查询设备型号总览
+export function deviceType(query) {
+  return request({
+    url: '/system/display/deviceType',
+    method: 'get',
+    params: query
+  })
+}
+// 查询报警总数
+export function count(query) {
+  return request({
+    url: '/system/display/count',
+    method: 'get',
+    params: query
+  })
+}
+// 查询月新增设备
+export function addDevice(data) {
+  return request({
+    url: '/system/display/addDevice',
+    method: 'get',
+    params: data
+  })
+}
+// 查询用户年龄总览
+export function userAgeAll(query) {
+  return request({
+    url: '/system/display/userAgeAll',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询月新增用户
+export function addUser(query) {
+  return request({
+    url: '/system/display/addUser',
+    method: 'get',
+    params: query
+  })
+}
+// 查询报警列表
+export function alarmStatusList(query) {
+  return request({
+    url: '/system/display/alarmStatusList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地图GPS
+export function mapGpsView(query) {
+  return request({
+    url: '/system/display/mapGpsViewV2',
+    method: 'get',
+    params: query
+  })
+}

src/api/system/search_location.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function searchInfo(query) {
+  return request({
+    url: '/system/search/location/info/search',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】列表
+export function listInfo(query) {
+  return request({
+    url: '/system/search/location/info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getInfo(id) {
+  return request({
+    url: '/system/search/location/info/' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addInfo(data) {
+  return request({
+    url: '/system/search/location/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateInfo(data) {
+  return request({
+    url: '/system/search/location/info',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delInfo(id) {
+  return request({
+    url: '/system/search/location/info' + id,
+    method: 'delete'
+  })
+}

src/router/index.js

@@ -74,19 +74,6 @@ export const constantRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/bigData',
-  //   component: Layout,
-  //   redirect: 'noredirect',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/bigData/index1'),
-  //       name: 'Index',
-  //       meta: { title: '大数据', icon: 'dashboard'}
-  //     }
-  //   ]
-  // },
   {
     path: '/data',
     component: Layout,

src/views/datav/BottomCharts.vue

@@ -1,187 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <div class="bcci-header">赵钱收费站</div>
-      <dv-active-ring-chart :config="config1" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">孙李收费站</div>
-      <dv-active-ring-chart :config="config2" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">周吴收费站</div>
-      <dv-active-ring-chart :config="config3" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">郑王收费站</div>
-      <dv-active-ring-chart :config="config4" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-  </div>
-</template>
-
-<script>
-import LabelTag from './LabelTag'
-
-export default {
-  name: 'BottomCharts',
-  components: {
-    LabelTag
-  },
-  data () {
-    return {
-      config1: {
-        data: [
-          {
-            name: '收费站',
-            value: 356
-          },
-          {
-            name: '监控中心',
-            value: 215
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 317
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        radius: '65%',
-        activeRadius: '70%'
-      },
-
-      config2: {
-        data: [
-          {
-            name: '收费站',
-            value: 615
-          },
-          {
-            name: '监控中心',
-            value: 322
-          },
-          {
-            name: '道路外场',
-            value: 198
-          },
-          {
-            name: '其他',
-            value: 80
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        radius: '65%',
-        activeRadius: '70%'
-      },
-
-      config3: {
-        data: [
-          {
-            name: '收费站',
-            value: 452
-          },
-          {
-            name: '监控中心',
-            value: 512
-          },
-          {
-            name: '道路外场',
-            value: 333
-          },
-          {
-            name: '其他',
-            value: 255
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        radius: '65%',
-        activeRadius: '70%'
-      },
-
-      config4: {
-        data: [
-          {
-            name: '收费站',
-            value: 156
-          },
-          {
-            name: '监控中心',
-            value: 415
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 210
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        radius: '65%',
-        activeRadius: '70%'
-      },
-
-      labelConfig: {
-        data: ['收费站', '监控中心', '道路外场', '其他']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1, .decoration-2, .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/datav/CenterCmp.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="center-cmp">
-    <div class="cc-header">
-      <dv-decoration-1 style="width:200px;height:50px;" />
-      <div>机电设备总数</div>
-      <dv-decoration-1 style="width:200px;height:50px;" />
-    </div>
-
-    <div class="cc-details">
-      <div>设备总数</div>
-      <div class="card">2</div>
-      <div class="card">1</div>
-      <div class="card">3</div>
-      <div class="card">7</div>
-    </div>
-
-    <div class="cc-main-container">
-      <div class="ccmc-left">
-        <div class="station-info">
-          收费站<span>1315</span>
-        </div>
-        <div class="station-info">
-          监控中心<span>415</span>
-        </div>
-      </div>
-
-      <dv-active-ring-chart class="ccmc-middle" :config="config" />
-
-      <div class="ccmc-right">
-        <div class="station-info">
-          <span>90</span>道路外场
-        </div>
-        <div class="station-info">
-          <span>317</span>其他
-        </div>
-      </div>
-
-      <LabelTag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from './LabelTag'
-
-export default {
-  name: 'CenterCmp',
-  components: {
-    LabelTag
-  },
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费站',
-            value: 1315
-          },
-          {
-            name: '监控中心',
-            value: 415
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 317
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        lineWidth: 30,
-        radius: '55%',
-        activeRadius: '60%'
-      },
-
-      labelConfig: {
-        data: ['收费站', '监控中心', '道路外场', '其他']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.center-cmp {
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-
-  .cc-header {
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 30px;
-  }
-
-  .cc-details {
-    height: 120px;
-    display: flex;
-    justify-content: center;
-    font-size: 32px;
-    align-items: center;
-
-    .card {
-      background-color: rgba(4,49,128,.6);
-      color: #08e5ff;
-      height: 70px;
-      width: 70px;
-      font-size: 45px;
-      font-weight: bold;
-      line-height: 70px;
-      text-align: center;
-      margin: 10px;
-    }
-  }
-
-  .cc-main-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-
-    .ccmc-middle {
-      width: 50%;
-      height: 90%;
-
-      .active-ring-name {
-        font-size: 20px !important;
-      }
-    }
-
-    .ccmc-left, .ccmc-right {
-      width: 25%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      font-size: 24px;
-
-      span {
-        font-size: 40px;
-        font-weight: bold;
-      }
-
-      .station-info {
-        height: 80px;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .ccmc-left {
-      align-items: flex-end;
-
-      span {
-        margin-left: 20px;
-      }
-    }
-
-    .ccmc-right {
-      align-items: flex-start;
-
-      span {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  .label-tag {
-    position: absolute;
-    width: 500px;
-    height: 30px;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/datav/LabelTag.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="label-tag">
-    <template v-if="mergedConfig">
-      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
-        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
-
-export default {
-  name: 'LabelTag',
-  props: {
-    config: {
-      type: Object,
-      default: () => ([])
-    }
-  },
-  data () {
-    return {
-      defaultConfig: {
-        /**
-         * @description Label data
-         * @type {Array<String>}
-         * @default data = []
-         * @example data = ['label1', 'label2']
-         */
-        data: [],
-        /**
-         * @description Label color (Hex|Rgb|Rgba|color keywords)
-         * @type {Array<String>}
-         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
-         */
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      },
-
-      mergedConfig: null
-    }
-  },
-  watch: {
-    config () {
-      const { mergeConfig } = this
-
-      mergeConfig()
-    }
-  },
-  methods: {
-    mergeConfig () {
-      let { config, defaultConfig } = this
-
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-    }
-  },
-  mounted () {
-    const { mergeConfig } = this
-
-    mergeConfig()
-  }
-}
-</script>
-
-<style lang="less">
-.label-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .label-item {
-    margin: 5px;
-    font-size: 15px;
-    display: flex;
-    align-items: center;
-
-    div {
-      width: 12px;
-      height: 12px;
-      margin-left: 5px;
-    }
-  }
-}
-</style>

src/views/datav/LeftChart1.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="left-chart-1">
-    <!-- <dv-border-box-1 class="lc1-details">定位监护长者<span>430</span></dv-border-box-1> -->
-    <!-- <div class="lc1-details">定位监护长者<span>{{ number }}</span></div> -->
-    <!-- <div class="lc1-details">
-      定位监护长者
-      <dv-digital-flop :config="config1" style="width: 200px; height: 50px" />
-    </div> -->
     <div class="left-list">
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/sos.png" alt="" />
+          <img src="./img/SOS.svg" alt="" />
           <div class="word">SOS告警</div>
         </div>
         <div class="container-topdown">
@@ -23,7 +17,7 @@
       </div>
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/weilan.png" alt="" />
+          <img src="./img/weilan.svg" alt="" />
           <div class="word">围栏告警</div>
         </div>
         <div class="container-topdown">
@@ -37,7 +31,7 @@
       </div>
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/xinlv.png" alt="" />
+          <img src="./img/xinlv.svg" alt="" />
           <div class="word">心率告警</div>
         </div>
         <div class="container-topdown">
@@ -51,7 +45,7 @@
       </div>
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/diedao.png" alt="" />
+          <img src="./img/diedao.svg" alt="" />
           <div class="word">跌倒告警</div>
         </div>
         <div class="container-topdown">
@@ -65,7 +59,7 @@
       </div>
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/didian.png" alt="" />
+          <img src="./img/didian.svg" alt="" />
           <div class="word">低电提醒</div>
         </div>
         <div class="container-topdown">
@@ -79,7 +73,7 @@
       </div>
       <div class="left-container">
         <div class="container-topdown">
-          <img src="./img/shebei.png" alt="" />
+          <img src="./img/shebei.svg" alt="" />
           <div class="word">设备状态</div>
         </div>
         <div class="container-topdown">
@@ -147,9 +141,6 @@ export default {
   },
   mounted() {
     this.initData();
-    setInterval(() => {
-      this.power(360);
-    }, 500);
     // this.flipToValue(this.number); // 初始化显示数字
     // this.startAnimation()
   },
@@ -170,10 +161,6 @@ export default {
       };
       console.log(typeof String(this.number),777);
     },
-    power(n) {
-      this.config1.number[0] = Math.floor(Math.random() * n + 1);
-      this.config1 = { ...this.config1 }; //对象解构，更新props
-    },
     // startAnimation() {
     //   this.animationInterval = setInterval(() => {
     //     const increment = this.number > this.currentValue ? 1 : -1;
@@ -254,11 +241,12 @@ export default {
         align-items: center;
         justify-content: center;
         img {
-          width: 20px;
-          height: 20px;
+          width: 30px;
+          height: 30px;
         }
         .word {
-          font-size: 12px;
+          margin-top: 5px;
+          font-size: 16px;
         }
         .number {
           color: #fcca00;

src/views/datav/LeftChart11.vue

@@ -2,21 +2,24 @@
   <div class="left-chart-11">
     <!-- <div class="lc1-header">张三收费站</div> -->
     <div class="under-title"><b>告警记录</b></div>
-    <div class="right-container" >
-      <div class="right-box" v-for="(item, index) in dataList">
+    <!-- <dv-scroll-board :config="config" /> -->
+    <div class="right-container">
+      <dv-scroll-board :config="config" />
+
+      <!-- <div class="right-box" v-for="(item, index) in dataList">
         <div class="top">
           <div class="top-left">{{ item.alarmMessage }}</div>
           <div class="top-right">{{ item.createtime }}</div>
         </div>
         <div class="middle">{{ item.name }} ({{ item.telno }})</div>
         <div class="under">告警地址：{{ item.location }}</div>
-      </div>
+      </div> -->
     </div>
-    <div class="page-box" v-show="queryParams.pageTotal ">
+    <!-- <div class="page-box" v-show="queryParams.pageTotal">
       <img src="./img/iconleft.png" alt="" @click="leftPage" />
       <div>{{ queryParams.pageNum }}/{{ queryParams.pageTotal }}</div>
       <img src="./img/iconright.png" alt="" @click="rightPage" />
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -26,84 +29,130 @@ export default {
   name: "LeftChart1",
   data() {
     return {
-      config: {
-        data: [
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "收费系统",
-            adr: "ncjdhfcudjchnd",
-          },
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "通信系统",
-            adr: "cdkojhfcndoj",
-          },
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "监控系统",
-            adr: "ncsojhkla",
-          },
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "供配系统",
-            adr: "ncjdokchnjsak",
-          },
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "其他",
-            adr: "cniskjojcnosakl",
-          },
-          {
-            label: 222,
-            tel: 15202013072,
-            name: "王艺涵",
-            time: "2023-09-12 09:50:00",
-            type: "其他",
-            adr: "cniskjojcnosakl",
-          },
-        ],
-        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        unit: "件",
-      },
       dataList: [],
       queryParams: {
         pageNum: 1,
         pageSize: 7,
         pageTotal: null,
       },
+      config: {
+        // header: ["时间", "病害信息", "数量", "标段"],
+        data: [
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</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.initData();
+    // this.initData();
   },
   methods: {
     initData() {
       list(this.queryParams).then((res) => {
-        this.dataList = res.rows;
-        let pageTotal = res.total / this.queryParams.pageSize;
-        if (String(pageTotal).indexOf(".") > -1) {
-          pageTotal = parseInt(pageTotal) + 1;
-        } else {
-          pageTotal = pageTotal;
-        }
-        this.queryParams.pageTotal = pageTotal;
+        this.dataList = res.rows.map((item) => {
+          let hideName = "";
+          let hideTel = "";
+          if (item.name.length >= 2) {
+            hideName = item.name[0] + "*" + item.name.substring(2);
+          }
+          if (item.telno && item.telno.length === 11) {
+            hideTel = this.hideMiddleDigits(item.telno);
+          }
+          return {
+            ...item,
+            name: hideName,
+            telno: hideTel,
+          };
+        });
+        console.log(this.config.data,'445566');
+
+        console.log('我先执行');
+
+        this.config = {
+          ...this.config,
+          data: (this.dataList || []).map((item) => {
+            return [
+              `<div class="right-box">
+                <div class="top">
+                  <div class="top-left">${item.alarmMessage}</div>
+                  <div class="top-right">${item.createtime}</div>
+                </div>
+                <div class="middle">${item.name} (${item.telno})</div>
+                <div class="under">告警地址：${item.location}</div>
+            </div>`,
+            ];
+          }),
+        };
+
+        // this.config.data=[]
+        // let list = [];
+        // this.dataList.forEach((item) => {
+        //   list.push([
+        //     `<div class="right-box">
+        //         <div class="top">
+        //           <div class="top-left">${item.alarmMessage}</div>
+        //           <div class="top-right">${item.createtime}</div>
+        //         </div>
+        //         <div class="middle">${item.name} (${item.telno})</div>
+        //         <div class="under">告警地址：${item.location}</div>
+        //     </div>`,
+        //   ]);
+        // });
+        // console.log(list,'我是list');
+        // this.config.data = list;
+        // console.log(this.config.data,'112233');
+
+        // 分页
+        // let pageTotal = res.total / this.queryParams.pageSize;
+        // if (String(pageTotal).indexOf(".") > -1) {
+        //   pageTotal = parseInt(pageTotal) + 1;
+        // } else {
+        //   pageTotal = pageTotal;
+        // }
+        // this.queryParams.pageTotal = pageTotal;
       });
     },
+    hideMiddleDigits(phoneNumber) {
+      if (phoneNumber && phoneNumber.length === 11) {
+        const prefix = phoneNumber.substring(0, 3);
+        const suffix = phoneNumber.substring(7);
+        return `${prefix}****${suffix}`;
+      }
+      return phoneNumber;
+    },
     leftPage() {
       if (this.queryParams.pageNum > 1) {
         this.queryParams.pageNum--;
@@ -120,7 +169,57 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+::v-deep .dv-scroll-board .rows .row-item {
+  height: 20% !important;
+  line-height: normal !important;
+  display: flex;
+  align-items: center;
+}
+::v-deep .dv-scroll-board .rows .ceil {
+  height: 100%;
+  width: 100% !important;
+}
+::v-deep .right-box {
+  height: 100%;
+  color: #fff;
+  font-size: 14px;
+  padding: 0 10px;
+  // background-color: #fff;
+  margin-bottom: 5px;
+  // border-bottom: 1px solid #22659e;
+  .top {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // border-bottom: 1px solid #f1f0f0;
+    // line-height: 30%;
+    .top-left {
+      color: #ff2626;
+      font-size: 20px;
+    }
+  }
+  .middle {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    // line-height: 30%;
+    // border-bottom: 1px solid #f1f0f0;
+  }
+  .under {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    // line-height: 30%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+  }
+}
+
+// 以下可能要废掉
 .left-chart-11 {
   width: 100%;
   height: 100%;
@@ -146,9 +245,9 @@ export default {
     height: 90%;
     border: 1px solid #22659e;
     border-radius: 5px;
-    background: rgba(1,58,131,.4);
+    background: rgba(1, 58, 131, 0.4);
     .right-box {
-      height: 14%;
+      // height: 14%;
       color: #fff;
       font-size: 14px;
       padding: 0 10px;
@@ -182,7 +281,7 @@ export default {
     }
   }
   .page-box {
-    height:10%;
+    height: 10%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -204,23 +303,5 @@ export default {
       margin-left: 20px;
     }
   }
-  // .left-list {
-  //   margin-top: 10px;
-  //   .left-container {
-  //     // width: 100%;
-  //     text-align: center;
-  //     // height: 50px;
-  //     // background-color: green;
-  //     margin-top: 10px;
-  //     display: flex;
-  //     // color:red;
-  //     .container-topdown {
-  //       width: 100%;
-  //       display: flex;
-  //       flex-direction: column;
-  //       // border: 1px solid red;
-  //     }
-  //   }
-  // }
 }
 </style>

src/views/datav/LeftChart2.vue

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-2 {
   width: 100%;
   height: 30%;
@@ -75,7 +75,7 @@ export default {
   }
 
   .lc2-chart {
-    height: calc(~"100% - 80px");
+    height: calc(100vh - 80px);
   }
 }
 </style>

src/views/datav/LeftChart3.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="left-chart-3">
-    <div class="lc3-header">王五收费站</div>
-    <div class="lc3-details">设备运行总数<span>245</span></div>
-    <dv-capsule-chart class="lc3-chart" :config="config" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart3',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 78
-          },
-          {
-            name: '通信系统',
-            value: 54
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 167
-          },
-          {
-            name: '其他',
-            value: 77
-          }
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-3 {
-  width: 100%;
-  height: 33%;
-  display: flex;
-  flex-direction: column;
-
-  .lc3-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc3-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;
-    }
-  }
-
-  .lc3-chart {
-    flex: 1;
-  }
-}
-</style>

src/views/datav/RightChart1.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="right-chart-1">
-    <div class="rc1-header">赵六收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">262</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-capsule-chart class="right" :config="config" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 25
-          },
-          {
-            name: '通信系统',
-            value: 66
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 72
-          },
-          {
-            name: '其他',
-            value: 99
-          }
-        ],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.right-chart-1 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/datav/RightChart2.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="right-chart-2">
-    <div class="rc1-header">孙七收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">267</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-charts class="right" :option="option" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart2',
-  data () {
-    return {
-      option: {
-        series: [
-          {
-            type: 'pie',
-            data: [
-              { name: '收费系统', value: 93 },
-              { name: '通信系统', value: 66 },
-              { name: '监控系统', value: 52 },
-              { name: '供配电系统', value: 34 },
-              { name: '其他', value: 22 }
-            ],
-            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="less">
-.right-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/datav/img/SOS.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.62 19.99"><defs><style>.cls-1{fill:#bd3124;fill-rule:evenodd;}</style></defs><title>2</title><path id="矩形_1_拷贝" data-name="矩形 1 拷贝" class="cls-1" d="M2.07,18.3H17.94V20H2.07ZM10.79.87v1a.86.86,0,1,1-1.72,0v-1a.86.86,0,1,1,1.72,0Zm7.63,3.2-.86.57a.87.87,0,0,1-1.2-.25.86.86,0,0,1,.25-1.19h0l.86-.57a.85.85,0,0,1,1.19.24A.86.86,0,0,1,18.42,4.07Zm-16.83,0,.86.57a.86.86,0,0,0,1-1.42l0,0-.87-.57a.86.86,0,0,0-1,1.42ZM10,3.63a7.26,7.26,0,0,1,7.25,7.26h0v6H2.75v-6A7.26,7.26,0,0,1,10,3.63Z" transform="translate(-1.19 -0.01)"/></svg>

src/views/datav/img/didian.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11.34"><defs><style>.cls-1{fill:#ccf783;}</style></defs><title>4</title><path class="cls-1" d="M18.87,7.79h-.79V5.85a1.31,1.31,0,0,0-1.31-1.31H12.88V5.91h3.36a.47.47,0,0,1,.47.47v7.45a.47.47,0,0,1-.47.47H12.88v1.37h3.89a1.31,1.31,0,0,0,1.31-1.31V12.42h.79A1.14,1.14,0,0,0,20,11.29V8.92A1.14,1.14,0,0,0,18.87,7.79Z" transform="translate(0 -4.33)"/><path class="cls-1" d="M1.25,13.83V6.38a.47.47,0,0,1,.46-.47H5.4V4.54H1.31A1.31,1.31,0,0,0,0,5.85v8.51a1.31,1.31,0,0,0,1.31,1.31H5.4V14.3H1.71A.47.47,0,0,1,1.25,13.83Z" transform="translate(0 -4.33)"/><polygon class="cls-1" points="12.88 5.19 7.45 5.19 9.04 0 4.59 6.81 9.85 6.81 7.66 11.34 12.88 5.19"/></svg>

src/views/datav/img/diedao.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19.96"><defs><style>.cls-1{fill:#ff6320;}</style></defs><title>3</title><path class="cls-1" d="M19.23,12.42l-5-6.49a1.66,1.66,0,0,0-1.41-.65A1.68,1.68,0,0,0,11.47,6L9,9.75a.4.4,0,0,1-.59.09L7,8.71a1.63,1.63,0,0,0-1.49-.27l-4,1.29a1.31,1.31,0,0,0,.8,2.5l3-1a1,1,0,0,1,.92.17l1.5,1.18a.13.13,0,0,1-.07.22L5.35,13a1.64,1.64,0,0,0-1.15.62L.84,17.87A1.31,1.31,0,1,0,2.9,19.5l3-3.81a.33.33,0,0,1,.21-.11l4-.32a3,3,0,0,0,2.26-1.32l2-2.93a.27.27,0,0,1,.44,0l2.34,3a1.31,1.31,0,1,0,2.08-1.6Z" transform="translate(-0.5 -0.04)"/><path class="cls-1" d="M9.91,5a2.5,2.5,0,1,0-2.5-2.5A2.5,2.5,0,0,0,9.91,5Z" transform="translate(-0.5 -0.04)"/></svg>

src/views/datav/img/shebei.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.79 20"><defs><style>.cls-1{fill:#fcca00;}</style></defs><title>5</title><path class="cls-1" d="M14.62,3.75h-.88V1.36A1.36,1.36,0,0,0,12.38,0H7.62A1.36,1.36,0,0,0,6.26,1.36V3.75H5.38A1.36,1.36,0,0,0,4,5.11v9.78a1.36,1.36,0,0,0,1.36,1.36h.88v2.39A1.36,1.36,0,0,0,7.62,20h4.76a1.36,1.36,0,0,0,1.36-1.36V16.25h.88A1.36,1.36,0,0,0,16,14.89V5.11A1.36,1.36,0,0,0,14.62,3.75Zm-6.93-2a.48.48,0,0,1,.48-.49h3.66a.48.48,0,0,1,.48.49v2H7.69Zm4.62,16.44a.48.48,0,0,1-.48.49H8.17a.48.48,0,0,1-.48-.49v-2h4.62Zm1.89-3.39H10.79V12.66H9.21v2.17H5.8a.49.49,0,0,1-.48-.49V10.79h2V9.21h-2V5.66a.49.49,0,0,1,.48-.49H9.21V7.34h1.58V5.17H14.2a.49.49,0,0,1,.48.49V9.21h-2v1.58h2v3.55A.49.49,0,0,1,14.2,14.83Z" transform="translate(-0.6)"/><path class="cls-1" d="M18.08,7.24H17v6.35h1a1.32,1.32,0,0,0,1.32-1.31V8.55A1.32,1.32,0,0,0,18.08,7.24Z" transform="translate(-0.6)"/><path class="cls-1" d="M.6,8.55v3.73a1.32,1.32,0,0,0,1.32,1.31H3V7.24H1.92A1.32,1.32,0,0,0,.6,8.55Z" transform="translate(-0.6)"/></svg>

src/views/datav/img/weilan.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17.89"><defs><style>.cls-1{fill:#fcca00;}</style></defs><title>6</title><path class="cls-1" d="M13.76,4.08a1.52,1.52,0,1,0-1.51-1.51A1.51,1.51,0,0,0,13.76,4.08Z" transform="translate(0 -1.05)"/><path class="cls-1" d="M12.62,11.13v-1a9.33,9.33,0,0,1,.29-2.29L13,7.51l1.18,1.82a1,1,0,0,0,.47.38l2.08.79a.84.84,0,0,0,.6-1.56L15.66,8.3a.56.56,0,0,1-.3-.25L13.3,4.89a1.6,1.6,0,0,0-1-.68,1.58,1.58,0,0,0-1.15.14l-3,1.58A1.27,1.27,0,0,0,7.54,7V9.46a.84.84,0,1,0,1.68,0V7.56a.45.45,0,0,1,.23-.39l.92-.48-.15.56a10.9,10.9,0,0,0-.36,2.84v2L7,17.07V11.43a.71.71,0,1,0-1.42,0v3.76H4.19V11.43a.71.71,0,0,0-1.42,0v3.76H1.42V11.43a.71.71,0,0,0-1.42,0v6.16H1.42V16.08H2.77v1.51H4.19V16.08H5.56v1.51h1.2a.83.83,0,0,0,.4.85.84.84,0,0,0,1.15-.31l3.12-5.41h.22l1.6,2.46a1.51,1.51,0,0,1,.25.85v2.08a.85.85,0,0,0,.84.84h0a.84.84,0,0,0,.84-.84V15.55a1.58,1.58,0,0,0-.26-.86Z" transform="translate(0 -1.05)"/><path class="cls-1" d="M19.29,10.72a.71.71,0,0,0-.71.71v3.76H17.23V11.43a.71.71,0,1,0-1.42,0v6.16h1.42V16.08h1.35v1.51H20V11.43A.71.71,0,0,0,19.29,10.72Z" transform="translate(0 -1.05)"/></svg>

src/views/datav/img/xinlv.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16.88"><defs><style>.cls-1{fill:#e99d42;}</style></defs><title>1</title><path class="cls-1" d="M1.58,10.43H4.89L6.35,7a.93.93,0,0,1,.85-.57h0A.94.94,0,0,1,8.07,7l2,4.48L11.9,8a.86.86,0,0,1,.76-.45.84.84,0,0,1,.75.45l1.14,2.17h4.14a5.16,5.16,0,0,0-7.5-7.08L10,4.26,8.81,3.07a5.16,5.16,0,0,0-7.3,7.3Z" transform="translate(0 -1.56)"/><path class="cls-1" d="M13.7,11.55l-1-2-1.91,3.61a.83.83,0,0,1-.74.44h0a.82.82,0,0,1-.73-.49l-2-4.58-1.4,3.3H3l6.31,6.31a1,1,0,0,0,1.43,0l6.58-6.58H13.7Z" transform="translate(0 -1.56)"/></svg>

src/views/datav/index.vue

@@ -1,11 +1,24 @@
 <template>
   <div class="app-container">
-    <div id="data-view" >
+    <div id="data-view">
       <div class="main-header">
         <div class="mh-middle">数字健康社区定位系统</div>
         <div class="mh-right">
-          <img src="./img/quanping.png" alt="" @click="toggleFullscreen" v-if="!isFullscreen">
-          <img src="./img/tuichuquanping.png" alt="" @click="toggleFullscreen" v-if="isFullscreen">
+          <div>{{ dateTime }}</div>
+          <div>
+            <img
+              src="./img/quanping.png"
+              alt=""
+              @click="toggleFullscreen"
+              v-if="!isFullscreen"
+            />
+            <img
+              src="./img/tuichuquanping.png"
+              alt=""
+              @click="toggleFullscreen"
+              v-if="isFullscreen"
+            />
+          </div>
         </div>
       </div>
       <div class="main">
@@ -47,7 +60,7 @@
           </div>
         </div>
         <div class="right">
-          <Left-Chart-11 />
+          <Left-Chart-11 ref="updateData" />
         </div>
       </div>
     </div>
@@ -59,14 +72,7 @@ import LeftChart1 from "./LeftChart1";
 import LeftChart11 from "./LeftChart11";
 import LeftChart99 from "./LeftChart99";
 import LeftChart2 from "./LeftChart2";
-import LeftChart3 from "./LeftChart3";
-
-import CenterCmp from "./CenterCmp";
-
-import RightChart1 from "./RightChart1";
-import RightChart2 from "./RightChart2";
 
-import BottomCharts from "./BottomCharts";
 import equMap from "./Map.vue";
 
 import { percent, alarmList } from "@/api/system/datav";
@@ -78,11 +84,6 @@ export default {
     LeftChart11,
     LeftChart99,
     LeftChart2,
-    LeftChart3,
-    CenterCmp,
-    RightChart1,
-    RightChart2,
-    BottomCharts,
     equMap,
   },
   data() {
@@ -90,54 +91,85 @@ export default {
       mapLoading: false,
       percentData: {},
       flag: false,
-      isFullscreen:false,// 初始状态为非全屏
+      isFullscreen: false, // 初始状态为非全屏
+      dateTime: "",
     };
   },
   mounted() {
     this.initData();
+    this.currentTime();
   },
   methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      var _this = this;
+      let yy = new Date().getFullYear();
+      let mm =
+        new Date().getMonth() + 1 < 10
+          ? "0" + (new Date().getMonth() + 1)
+          : new Date().getMonth() + 1;
+      let dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      _this.dateTime =
+        yy + "- " + mm + "-" + dd + "- " + hh + ":" + mf + ":" + ss;
+    },
+
     toggleFullscreen() {
-            if (this.isFullscreen) {
-                // 退出全屏模式
-                if (document.exitFullscreen) {
-                    document.exitFullscreen();
-                } else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                } else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                }
-                this.isFullscreen=false;
-            } else {
-                // 进入全屏模式
-                const content = document.querySelector('#data-view');
-                // console.log(content,888);
-                // return
-                if (content.requestFullscreen) {
-                    content.requestFullscreen();
-                } else if (content.mozRequestFullScreen) {
-                    content.mozRequestFullScreen();
-                } else if (content.webkitRequestFullscreen) {
-                    content.webkitRequestFullscreen();
-                }
-                this.isFullscreen=true;
-            }
-        },
+      if (this.isFullscreen) {
+        // 退出全屏模式
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+        this.isFullscreen = false;
+      } else {
+        // 进入全屏模式
+        const content = document.querySelector("#data-view");
+        // console.log(content,888);
+        // return
+        if (content.requestFullscreen) {
+          content.requestFullscreen();
+        } else if (content.mozRequestFullScreen) {
+          content.mozRequestFullScreen();
+        } else if (content.webkitRequestFullscreen) {
+          content.webkitRequestFullscreen();
+        }
+        this.isFullscreen = true;
+      }
+    },
     initData() {
       percent().then((res) => {
         this.percentData = res.data;
         this.flag = true;
         console.log("我刚执行");
       });
+      this.$refs.updateData.initData();
     },
     initMap(AMap) {
-      console.log('进来了');
+      console.log("进来了");
       this.AMap = AMap;
       this.map = new AMap.Map("map", {
         // 设置地图容器id
         // viewMode: "3D", // 是否为3D地图模式
         zoom: 5, // 初始化地图级别
         center: [105.602725, 37.076636], // 初始化地图中心点位置
+        mapStyle: "amap://styles/darkblue", //地图样式
       });
       this.clickMarker = new this.AMap.Marker();
       alarmList().then((res) => {
@@ -185,7 +217,7 @@ export default {
       this.markers = [];
       let icon = "";
       data.forEach((item) => {
-        // this.getCalss(item.alarm_type);
+        // icon=this.getCalss(item.alarm_type);
 
         switch (item.alarm_type) {
           case 16:
@@ -209,7 +241,7 @@ export default {
             break;
         }
         // console.log("执行了");
-        // console.log("icon", icon);
+        console.log("icon", icon);
         const marker = new AMap.Marker({
           position: new AMap.LngLat(item.gps_long, item.gps_lat),
           offset: new AMap.Pixel(-13, -30),
@@ -252,13 +284,13 @@ export default {
                       item.name ? item.name : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">手机号</span><span class="value">${
-                      item.telno?item.telno:''
+                      item.telno ? item.telno : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">所在位置</span><span class="value">${
-                      item.address?item.address:''
+                      item.address ? item.address : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">告警时间</span><span class="value">${
-                      item.createtime?item.createtime:''
+                      item.createtime ? item.createtime : ""
                     }</span></p>
                     </div>`,
               anchor: "top-center",
@@ -320,7 +352,7 @@ export default {
   background: url(../../assets/image/bg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  overflow: auto;
+  overflow: hidden;
 
   // #dv-full-screen-container {
   //   background-image: url("./img/bg.png");
@@ -368,7 +400,7 @@ export default {
           }
         }
         .under-box {
-          height: 90%;
+          height: 81%;
           display: flex;
         }
       }
@@ -399,14 +431,21 @@ export default {
       color: #1ae1e6;
       font-size: 24px;
       flex: 1;
-      margin-left:40%;
+      margin-left: 44%;
+      margin-top:0.5%;
     }
-    .mh-right{
-      width: 5%;
-      margin-top:2%;
-      img{
-        width: 20px;
-        height: 20px;
+    .mh-right {
+      width: 25%;
+      margin-top: 2%;
+      padding-right:30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     font-size: 24px;
+     color:#00e1e1;
+      img {
+        width: 30px;
+        height: 30px;
       }
     }
 
@@ -429,7 +468,6 @@ export default {
     padding: 6px 0 6px 8px;
     .equ-info-item {
       margin: 0;
-      // margin-bottom: 8px;
       .label-type {
         color: #f00404;
       }

src/views/equBigData/BottomCharts.vue

@@ -1,90 +0,0 @@
-<template>
-  <div id="box">
-    <div class="box-title">
-      <dv-decoration-5 :dur="dur" class="header-center-decoration" />
-      <div class="center-title">{{ this.title }}</div>
-    </div>
-    <slot name="default"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BorderItem",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      dur:6
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-#box {
-  width: 100%;
-  height: 100%;
-  .box-title {
-    display: flex;
-    flex-direction: column;
-    .header-center-decoration {
-      width: 95%;
-      height: 55px;
-    }
-    .center-title {
-      position: absolute;
-      font-size: 12px;
-      font-weight: bold;
-      left: 50%;
-      top: 14px;
-      transform: translateX(-50%);
-    }
-  }
-}
-
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1,
-  .decoration-2,
-  .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/equBigData/CenterCmp.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="center-cmp">
-    <div class="cc-header">
-      <dv-decoration-1 style="width:200px;height:50px;" />
-      <div>机电设备总数</div>
-      <dv-decoration-1 style="width:200px;height:50px;" />
-    </div>
-
-    <div class="cc-details">
-      <div>设备总数</div>
-      <div class="card">2</div>
-      <div class="card">1</div>
-      <div class="card">3</div>
-      <div class="card">7</div>
-    </div>
-
-    <div class="cc-main-container">
-      <div class="ccmc-left">
-        <div class="station-info">
-          收费站<span>1315</span>
-        </div>
-        <div class="station-info">
-          监控中心<span>415</span>
-        </div>
-      </div>
-
-      <dv-active-ring-chart class="ccmc-middle" :config="config" />
-
-      <div class="ccmc-right">
-        <div class="station-info">
-          <span>90</span>道路外场
-        </div>
-        <div class="station-info">
-          <span>317</span>其他
-        </div>
-      </div>
-
-      <LabelTag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from './LabelTag'
-
-export default {
-  name: 'CenterCmp',
-  components: {
-    LabelTag
-  },
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费站',
-            value: 1315
-          },
-          {
-            name: '监控中心',
-            value: 415
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 317
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        lineWidth: 30,
-        radius: '55%',
-        activeRadius: '60%'
-      },
-
-      labelConfig: {
-        data: ['收费站', '监控中心', '道路外场', '其他']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.center-cmp {
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-
-  .cc-header {
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 30px;
-  }
-
-  .cc-details {
-    height: 120px;
-    display: flex;
-    justify-content: center;
-    font-size: 32px;
-    align-items: center;
-
-    .card {
-      background-color: rgba(4,49,128,.6);
-      color: #08e5ff;
-      height: 70px;
-      width: 70px;
-      font-size: 45px;
-      font-weight: bold;
-      line-height: 70px;
-      text-align: center;
-      margin: 10px;
-    }
-  }
-
-  .cc-main-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-
-    .ccmc-middle {
-      width: 50%;
-      height: 90%;
-
-      .active-ring-name {
-        font-size: 20px !important;
-      }
-    }
-
-    .ccmc-left, .ccmc-right {
-      width: 25%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      font-size: 24px;
-
-      span {
-        font-size: 40px;
-        font-weight: bold;
-      }
-
-      .station-info {
-        height: 80px;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .ccmc-left {
-      align-items: flex-end;
-
-      span {
-        margin-left: 20px;
-      }
-    }
-
-    .ccmc-right {
-      align-items: flex-start;
-
-      span {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  .label-tag {
-    position: absolute;
-    width: 500px;
-    height: 30px;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/equBigData/LabelTag.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="label-tag">
-    <template v-if="mergedConfig">
-      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
-        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
-
-export default {
-  name: 'LabelTag',
-  props: {
-    config: {
-      type: Object,
-      default: () => ([])
-    }
-  },
-  data () {
-    return {
-      defaultConfig: {
-        /**
-         * @description Label data
-         * @type {Array<String>}
-         * @default data = []
-         * @example data = ['label1', 'label2']
-         */
-        data: [],
-        /**
-         * @description Label color (Hex|Rgb|Rgba|color keywords)
-         * @type {Array<String>}
-         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
-         */
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      },
-
-      mergedConfig: null
-    }
-  },
-  watch: {
-    config () {
-      const { mergeConfig } = this
-
-      mergeConfig()
-    }
-  },
-  methods: {
-    mergeConfig () {
-      let { config, defaultConfig } = this
-
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-    }
-  },
-  mounted () {
-    const { mergeConfig } = this
-
-    mergeConfig()
-  }
-}
-</script>
-
-<style lang="less">
-.label-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .label-item {
-    margin: 5px;
-    font-size: 15px;
-    display: flex;
-    align-items: center;
-
-    div {
-      width: 12px;
-      height: 12px;
-      margin-left: 5px;
-    }
-  }
-}
-</style>

src/views/equBigData/LeftChart1.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="left-chart-1">
-    <div class="lc1-header">张三收费站</div>
-    <div class="lc1-details">设备运行总数<span>430</span></div>
-    <dv-capsule-chart class="lc1-chart" :config="config" />
-    <dv-decoration-2 style="height:10px;" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 167
-          },
-          {
-            name: '通信系统',
-            value: 67
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 55
-          },
-          {
-            name: '其他',
-            value: 98
-          }
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-1 {
-  width: 100%;
-  height: 37%;
-  display: flex;
-  flex-grow: 0;
-  flex-direction: column;
-
-  .lc1-header {
-    text-align: center;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    margin-bottom: 20px;
-  }
-
-  .lc1-details {
-    height: 50px;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    text-indent: 20px;
-
-    span {
-      color: #096dd9;
-      font-weight: bold;
-      font-size: 35px;
-      margin-left: 20px;
-    }
-  }
-
-  .lc1-chart {
-    flex: 1;
-  }
-}
-</style>

src/views/equBigData/LeftChart2.vue

@@ -1,71 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 18:03:23
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div class="left-chart-2">
-    <dv-charts class="lc2-chart" :option="option" />
-  </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" scoped>
-.left-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .lc2-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc2-chart {
-    height: calc(100% - 80px);
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/LeftChart3.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="left-chart-3">
-    <!-- <div class="lc3-header">王五收费站</div>
-    <div class="lc3-details">设备运行总数<span>245</span></div> -->
-    <dv-capsule-chart class="lc3-chart" :config="config" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart3',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '40',
-            value: 0.2
-          },
-          {
-            name: '50',
-            value: 0.8
-          },
-          {
-            name: '60',
-            value: 0.5
-          },
-          {
-            name: '70',
-            value: 0.2
-          },
-          {
-            name: '80',
-            value: 0.4
-          },
-          {
-            name: '90',
-            value: 0.1
-          },
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '人'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-3 {
-  width: 100%;
-  height: 33%;
-  display: flex;
-  flex-direction: column;
-
-  .lc3-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc3-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;
-    }
-  }
-
-  .lc3-chart {
-    flex: 1;
-    padding: 0 10px;
-  }
-}
-</style>

src/views/equBigData/LeftChart4.vue

@@ -1,99 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 21:23:37
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div class="left-chart-4">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LeftChart4",
-  data() {
-    return {
-      option: {
-        xAxis: {
-          // name: "第一周",
-          data: ["周一"],
-          axisLabel: {
-            style: {
-              fill: "#fff",
-              fontSize: 10,
-              rotate: 0,
-            },
-          },
-        },
-        grid: {
-          top: 30,
-          bottom: 20,
-        },
-        yAxis: {
-          // name: "销售额",
-          data: "value",
-          splitLine: {
-            show: false,
-          },
-        },
-        series: [
-          {
-            data: [10],
-            type: "bar",
-            barWidth: 10,
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    // this.initData();
-  },
-  methods: {
-    // initData() {
-    //   const option1 = {
-    //     xAxis: {
-    //       name: "第一周",
-    //       data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-    //     },
-    //     yAxis: {
-    //       name: "销售额",
-    //       data: "value",
-    //     },
-    //     series: [
-    //       {
-    //         data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-    //         type: "bar",
-    //       },
-    //     ],
-    //   };
-    //   this.option = option1;
-    // },
-  },
-};
-</script>
-
-<style lang="less">
-.left-chart-4 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .lc2-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc2-chart {
-    height: calc(~"100% - 80px");
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/Maps.vue

@@ -1,88 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-12 08:55:47
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 09:48:43
- * @FilePath: \electronic-file\src\components\datav\Maps.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div id="map" :style="{ width: mapWidth, height: mapHeight }"></div>
-</template>
-
-<script>
-import AMapLoader from "@amap/amap-jsapi-loader";
-export default {
-  props: {
-    width: {
-      type: [Number, String],
-      default: "",
-    },
-    height: {
-      type: [Number, String],
-      default: "50%",
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    mapWidth() {
-      let width = this.width;
-      if (typeof width === "number") {
-        width = width + "px";
-      }
-      return width;
-    },
-    mapHeight() {
-      let height = this.height;
-      if (typeof height === "number") {
-        height = height + "px";
-      }
-      return height;
-    },
-  },
-  mounted() {
-    this.initMap();
-  },
-  methods: {
-    initMap() {
-      AMapLoader.load({
-        key: "40f1ba8477c8eb7f56397febfcd2a656", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        AMapUI: {
-          version: "1.1",
-        },
-        plugins: [
-          "AMap.AutoComplete",
-          "AMap.PlaceSearch",
-          "AMap.Scale",
-          "AMap.OverView",
-          "AMap.ToolBar",
-          "AMap.MapType",
-          "AMap.PolyEditor",
-          "AMap.CircleEditor",
-          "AMap.DistrictSearch",
-          "AMap.RangingTool",
-          "AMap.MarkerCluster",
-          "AMap.IndexCluster",
-          "AMap.Geocoder",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
-        .then((AMap) => {
-          this.$emit("callback", AMap);
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-#map {
-  padding: 0px;
-  margin: 20px 10px 10px 10px;
-}
-</style>

src/views/equBigData/RightBottom.vue

@@ -1,51 +0,0 @@
-
-<template>
-    <div id="scroll-board">
-      <dv-scroll-board :config="config" />
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: "ScrollBoard",
-    data() {
-      return {
-        config: {
-          // header: ["时间", "病害信息", "数量", "标段"],
-          data: [
-            ["2019-07-01 19:25:00", "路面危害-松散", "5", "xxxxxxx"],
-            ["2019-07-02 17:25:00", "路面危害-路面油污清理", "13", "xxxxxxx"],
-            ["2019-07-03 16:25:00", "交安设施-交通标志牌结构", "6", "xxxxxxx"],
-            ["2019-07-04 15:25:00", "路基危害-防尘网", "2", "xxxxxxx"],
-            ["2019-07-05 14:25:00", "交安设施-交通标志牌结构", "1", "xxxxxxx"],
-            ["2019-07-06 13:25:00", "路面危害-松散", "3", "xxxxxxx"],
-            ["2019-07-07 12:25:00", "路基危害-防尘网", "4", "xxxxxxx"],
-            ["2019-07-08 11:25:00", "路面危害-路面油污清理", "2", "xxxxxxx"],
-            ["2019-07-09 10:25:00", "交安设施-交通标志牌结构", "5", "xxxxxxx"],
-            ["2019-07-10 09:25:00", "路基危害-防尘网", "3", "xxxxxxx"],
-          ],
-          index: true,
-          columnWidth: [50],
-          align: ["center"],
-          rowNum: 5,
-          // headerBGC: "#1981f6",
-          // headerHeight: 20,
-          oddRowBGC: "rgba(0, 44, 81, 0.8)",
-          evenRowBGC: "rgba(10, 29, 50, 0.8)",
-        },
-      };
-    },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  #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/RightChart1.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="right-chart-1">
-    <div class="rc1-header">赵六收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">262</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-capsule-chart class="right" :config="config" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 25
-          },
-          {
-            name: '通信系统',
-            value: 66
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 72
-          },
-          {
-            name: '其他',
-            value: 99
-          }
-        ],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.right-chart-1 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/equBigData/RightChart2.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="right-chart-2">
-    <div class="rc1-header">孙七收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">267</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-charts class="right" :option="option" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart2',
-  data () {
-    return {
-      option: {
-        series: [
-          {
-            type: 'pie',
-            data: [
-              { name: '收费系统', value: 93 },
-              { name: '通信系统', value: 66 },
-              { name: '监控系统', value: 52 },
-              { name: '供配电系统', value: 34 },
-              { name: '其他', value: 22 }
-            ],
-            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="less">
-.right-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/equBigData/aaa.vue

@@ -1,205 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option1" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option2" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option3" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from "./LabelTag";
-
-export default {
-  name: "BottomCharts",
-  components: {
-    LabelTag,
-  },
-  data() {
-    return {
-      option: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 89,
-                // 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: 15,
-              },
-            },
-          },
-        ],
-      },
-      option1: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 34,
-                // 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: 15,
-              },
-            },
-          },
-        ],
-      },
-      option2: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 55,
-                // 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: 15,
-              },
-            },
-          },
-        ],
-      },
-      option3: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 67,
-                // 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: 15,
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    box-sizing: border-box;
-    .lc1-chart {
-      height: calc(100% - 80px);
-      position: relative;
-    }
-  }
-}
-</style>

src/views/equBigData/box-item.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <div class="bcci-header">赵钱收费站</div>
-      <dv-active-ring-chart :config="config1" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-    <dv-decoration-2 class="decoration-1" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">孙李收费站</div>
-      <dv-active-ring-chart :config="config2" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-2" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">周吴收费站</div>
-      <dv-active-ring-chart :config="config3" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-3" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">郑王收费站</div>
-      <dv-active-ring-chart :config="config4" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from "./LabelTag";
-
-export default {
-  name: "BottomCharts",
-  components: {
-    LabelTag,
-  },
-  data() {
-    return {
-      config1: {
-        data: [
-          {
-            name: "收费站",
-            value: 356,
-          },
-          {
-            name: "监控中心",
-            value: 215,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 317,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config2: {
-        data: [
-          {
-            name: "收费站",
-            value: 615,
-          },
-          {
-            name: "监控中心",
-            value: 322,
-          },
-          {
-            name: "道路外场",
-            value: 198,
-          },
-          {
-            name: "其他",
-            value: 80,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config3: {
-        data: [
-          {
-            name: "收费站",
-            value: 452,
-          },
-          {
-            name: "监控中心",
-            value: 512,
-          },
-          {
-            name: "道路外场",
-            value: 333,
-          },
-          {
-            name: "其他",
-            value: 255,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config4: {
-        data: [
-          {
-            name: "收费站",
-            value: 156,
-          },
-          {
-            name: "监控中心",
-            value: 415,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 210,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      labelConfig: {
-        data: ["收费站", "监控中心", "道路外场", "其他"],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="less">
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1,
-  .decoration-2,
-  .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/equBigData/index.vue

@@ -1,457 +0,0 @@
-<template>
-  <div id="data-view">
-    <top-header />
-    <div class="main">
-      <div class="left">
-        <div class="left-top">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览1"> <aaa /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-content">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览2"><middleLeftChart /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览3"><Left-Chart-3 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <div class="content">
-        <!-- 22 -->
-        <div>
-          <equ-map v-loading="mapLoading" @callback="initMap" height="400px" />
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览4"><Left-Chart-4 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <div class="right">
-        <div class="left-top">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览5"> <aaa /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-content">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览6"><Left-Chart-2 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览7"
-              ><dv-scroll-board :config="config" />></Border-Item
-            >
-          </dv-border-box-13>
-        </div>
-      </div>
-    </div>
-    <!-- <dv-border-box-3 class="left-chart-container">
-
-      </dv-border-box-3> -->
-
-    <!-- <div class="right-main-container">
-        <div class="rmc-top-container">
-          <dv-border-box-3 class="rmctc-left-container">
-            <Center-Cmp />
-          </dv-border-box-3>
-
-          <div class="rmctc-right-container">
-            <dv-border-box-3 class="rmctc-chart-1">
-              <Right-Chart-1 />
-            </dv-border-box-3>
-
-            <dv-border-box-4 class="rmctc-chart-2" :reverse="true">
-              <Right-Chart-2 />
-            </dv-border-box-4>
-          </div>
-        </div>
-
-        <dv-border-box-4 class="rmc-bottom-container">
-          <Bottom-Charts />
-        </dv-border-box-4>
-      </div> -->
-  </div>
-</template>
-
-<script>
-import topHeader from "./topHeader";
-import LeftChart1 from "./LeftChart1";
-import LeftChart2 from "./LeftChart2";
-import LeftChart3 from "./LeftChart3";
-import LeftChart4 from "./LeftChart4";
-import middleLeftChart from "./middleLeftChart.vue";
-import aaa from "./aaa";
-import equMap from "./Maps";
-import CenterCmp from "./CenterCmp";
-
-import RightChart1 from "./RightChart1";
-import RightChart2 from "./RightChart2";
-
-import BottomCharts from "./BottomCharts";
-import BorderItem from "./BottomCharts";
-
-export default {
-  name: "DataView",
-  components: {
-    topHeader,
-    LeftChart1,
-    LeftChart2,
-    LeftChart3,
-    LeftChart4,
-    CenterCmp,
-    RightChart1,
-    RightChart2,
-    BottomCharts,
-    BorderItem,
-    equMap,
-    aaa,
-    middleLeftChart,
-  },
-  data() {
-    return {
-      mapLoading: false,
-      config: {
-       
-        data: [
-          ["行1列1", "行1列2", "行1列3"],
-          ["行2列1", "行2列2", "行2列3"],
-          ["行3列1", "行3列2", "行3列3"],
-          ["行4列1", "行4列2", "行4列3"],
-          ["行5列1", "行5列2", "行5列3"],
-          ["行6列1", "行6列2", "行6列3"],
-          ["行7列1", "行7列2", "行7列3"],
-          ["行8列1", "行8列2", "行8列3"],
-          ["行9列1", "行9列2", "行9列3"],
-          ["行10列1", "行10列2", "行10列3"],
-        ],
-        index: true,
-        rowNum: 3, // 表行数
-        columnWidth: [50],
-        align: ["center"],
-      },
-    };
-  },
-  methods: {
-    initMap(AMap) {
-      this.AMap = AMap;
-      this.map = new AMap.Map("map", {
-        // 设置地图容器id
-        // viewMode: "3D", // 是否为3D地图模式
-        zoom: 3, // 初始化地图级别
-        center: [105.602725, 37.076636], // 初始化地图中心点位置
-      });
-      this.clickMarker = new this.AMap.Marker();
-      this.addMapMarkers(this.AMap, {
-        equList: [
-          { lng: 105.602725, lat: 37.076636 },
-          { lng: 113.8098755478859, lat: 34.75219686835205 },
-        ],
-      });
-      // this.getEquMap();
-      // 暂时放这里
-      this.map.on("click", (e) => {
-        console.log(e, "e");
-        this.regeoCode(e.lnglat);
-      });
-    },
-    // 地图覆盖物
-    addMapMarkers(AMap, data) {
-      // console.log(data,'data');
-      // // 项目中心点
-      // const centerMarker = new AMap.Marker({
-      //   position: new AMap.LngLat(data.projectLng, data.projectLat),
-      //   offset: new AMap.Pixel(-20, -20),
-      //   icon: require(`@/assets/map-icon/center.png`),
-      // });
-      // 设备分布点
-      this.markers = [];
-      data.equList.forEach((item) => {
-        const marker = new AMap.Marker({
-          position: new AMap.LngLat(item.lng, item.lat),
-          offset: new AMap.Pixel(-13, -30),
-          // icon: require(`@/assets/map-icon/${item.classifyCode}-${
-          //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
-          //   }.png`),
-          icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-          anchor: "bottom-center",
-          extData: {
-            id: item.id,
-            equNo: item.equNo,
-            netCode: data.netCode,
-            classifyCode: item.classifyCode,
-            flag: item.flag,
-            online: item.online,
-          },
-        });
-        this.markers.push(marker);
-        this.map.add(marker);
-      });
-      // console.log('this.markers',this.markers);
-      // const overlayGroups = new AMap.OverlayGroup(this.markers);
-      // // 比例尺
-      // // const scale = new AMap.Scale();
-
-      // this.map.add(overlayGroups);
-      // this.map.add(centerMarker);
-      // this.map.addControl(scale);
-
-      // // 鼠标点击marker弹出自定义的信息窗体
-      // overlayGroups.eachOverlay((overlay, index, collections) => {
-      //   const extData = overlay.getExtData();
-      //   overlay.on("click", () => {
-      //     const params = {
-      //       netCode: extData.netCode,
-      //       equNo: extData.equNo,
-      //     };
-      //     getEquInfo(params).then((res) => {
-      //       const info = res.data;
-      //       const id = extData.id;
-      //       const currentMarker = this.markers.find(
-      //         (item) => item._opts.extData.id === id
-      //       );
-      //       currentMarker.setIcon(
-      //         require(`@/assets/map-icon/${extData.classifyCode}-${
-      //           info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
-      //         }.png`)
-      //       );
-      //       const onlineEnum = {
-      //         0: "离线",
-      //         1: "在线",
-      //       };
-      //       info.projectName = data.projectName;
-      //       const infoWindow = new AMap.InfoWindow({
-      //         content: `<div class="equ-info-box">
-      //               <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
-      //                 info.equNo
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
-      //                 onlineEnum[info.online]
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
-      //                 info.equNo
-      //               }" data-name="${info.projectName}">${
-      //           info.alarmTotal
-      //         }</span></p>
-      //               <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
-      //                 info.positionTime
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
-      //                 info.brand
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
-      //                 info.gpsId
-      //               }</span></p>
-      //               </div>`,
-      //         anchor: "top-center",
-      //       });
-      //       infoWindow.open(this.map, overlay.getPosition());
-      //     });
-      //   });
-      // });
-
-      // // 地图的3km圆
-      // const circle = new AMap.Circle({
-      //   center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
-      //   radius: data.radius * 1000, // 半径
-      //   strokeColor: "#367EF5", // 线颜色
-      //   strokeOpacity: 0.8, // 线透明度
-      //   strokeWeight: 1, // 线粗细度
-      //   fillColor: "#18FFFC", // 填充颜色
-      //   fillOpacity: 0.1, // 填充透明度
-      // });
-      // this.map.add(circle);
-      // this.map.setFitView();
-      /* this.map.on("click", (e) => {
-        this.regeoCode(e.lnglat);
-      }); */
-    },
-  },
-};
-</script>
-
-<style lang="less">
-#data-view {
-  width: 100%;
-  height: 100%;
-  background-color: #030409;
-  color: #fff;
-  overflow: hidden;
-  background-image: url("./img/bg.png");
-  background-size: 100%;
-  background-repeat: no-repeat;
-
-  // #dv-full-screen-container {
-  //   background-image: url("./img/bg.png");
-  //   background-size: 100% 100%;
-  //   box-shadow: 0 0 3px blue;
-  //   display: flex;
-  //   flex-direction: column;
-  // }
-  .main {
-    display: flex;
-    padding: 0 10px 10px 10px;
-    box-sizing: border-box;
-    .left {
-      width: 30%;
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-    }
-
-    // .content {
-    //   flex: 1;
-    // }
-    .content {
-      // width: 30%;
-      flex: 1;
-
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-    }
-    .right {
-      width: 30%;
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .datav-cell {
-
-text-overflow: ellipsis;
-
-overflow: hidden;
-
-white-space: nowrap;
-
-}
-    }
-  }
-  .main-header {
-    height: 80px;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .mh-left {
-      font-size: 20px;
-      color: rgb(1, 134, 187);
-
-      a:visited {
-        color: rgb(1, 134, 187);
-      }
-    }
-
-    .mh-middle {
-      font-size: 30px;
-    }
-
-    .mh-left,
-    .mh-right {
-      width: 450px;
-    }
-  }
-
-  .main-container {
-    height: calc(~"100% - 80px");
-
-    .border-box-content {
-      padding: 20px;
-      box-sizing: border-box;
-      display: flex;
-    }
-  }
-
-  .left-chart-container {
-    width: 22%;
-    padding: 10px;
-    box-sizing: border-box;
-
-    .border-box-content {
-      flex-direction: column;
-    }
-  }
-
-  .right-main-container {
-    width: 78%;
-    padding-left: 5px;
-    box-sizing: border-box;
-  }
-
-  .rmc-top-container {
-    height: 65%;
-    display: flex;
-  }
-
-  .rmctc-left-container {
-    width: 65%;
-  }
-
-  .rmctc-right-container {
-    width: 35%;
-  }
-
-  .rmc-bottom-container {
-    height: 35%;
-  }
-
-  .rmctc-chart-1,
-  .rmctc-chart-2 {
-    height: 50%;
-  }
-}
-</style>

src/views/equBigData/middleLeftChart.vue

@@ -1,50 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 16:55:24
- * @FilePath: \electronic-file\src\components\datav\LeftChart1.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-<div class="left-chart-2">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      option: {
-        series: [
-          {
-            type: "pie",
-            data: [{ name: "可口可乐", value: 23 }],
-            radius: ["50%", "75%"],
-            insideLabel: {
-              show: true,
-              formatter: "{value}",
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.left-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
- 
-
-  .lc2-chart {
-    height: calc(100% - 80px);
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/topHeader.vue

@@ -1,54 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:12:32
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 18:47:01
- * @FilePath: \electronic-file\src\components\datav\topHeader.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div id="top-header">
-    <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
-    <div class="center-title">易益康养</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TopHeader",
-};
-</script>
-
-<style lang="less">
-#top-header {
-  position: relative;
-  width: 100%;
-  height: 77px;
-  display: flex;
-  justify-content: space-between;
-  flex-shrink: 0;
-
-  .header-center-decoration {
-    width: 40%;
-    height: 60px;
-    margin-top: 30px;
-  }
-
-  .header-left-decoration,
-  .header-right-decoration {
-    width: 25%;
-    height: 60px;
-  }
-
-  .center-title {
-    position: absolute;
-    font-size: 30px;
-    font-weight: bold;
-    left: 50%;
-    top: 15px;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/system/search_location/index.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="10">
+        <div class="grid-content bg-purple">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+          >
+            <el-form-item prop="searchValue">
+              <el-input
+                v-model="queryParams.searchValue"
+                placeholder="请输入姓名/电话/设备编号"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+          <el-table v-loading="loading" :data="infoList">
+            <el-table-column label="编号" width="55" type="index" />
+            <el-table-column
+              label="设备编码"
+              align="center"
+              prop="deviceIdCode"
+            />
+            <el-table-column
+              label="客户姓名"
+              align="center"
+              prop="userNickName"
+            />
+            <el-table-column label="电话" align="center" prop="deviceTel" />
+            <el-table-column
+              label="操作"
+              width="160px"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-location-outline"
+                  @click="handleDeviceLocation(scope.row)"
+                  >定位</el-button
+                >
+                <!-- <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleDeviceTrajectory(scope.row)"
+                  >轨迹</el-button
+                > -->
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-view"
+                  @click="handleDeviceFence(scope.row)"
+                  >围栏</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getSearchInfoList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="content bg-purple-dark">
+          <div style="height: 1000px" id="map_container"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-dialog title="电子围栏" :visible.sync="dialogFenceVisible">
+      <el-table :data="fenceInfoList">
+        <el-table-column
+          property="id"
+          label="围栏ID"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          property="name"
+          label="围栏名称"
+          width="200"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          width="160px"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDeviceItemFence(scope.row)"
+              >查询围栏</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { searchInfo } from "@/api/system/search_location";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import axios from "axios";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      //要定位的点
+      lnglat: [],
+      //高德地图
+      amap: null,
+      // 电子围栏对象
+      fence: null,
+      //电子围栏点数据
+      fenceInfo: {},
+      //要定位的点
+      fenceInfoList: [],
+      //展示选择围栏列表
+      dialogFenceVisible: false,
+      // 遮罩层
+      loading: true,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 【请填写功能名称】表格数据
+      infoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        searchValue: null,
+        deviceId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        searchValue: [
+          { required: true, message: "查询内容不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    /**
+     * TODO 根据请求参数去调方法
+     */
+    // this.getSearchInfoList();
+    this.loading = false;
+    //创建地图
+    this.handleCreateMap();
+  },
+  methods: {
+    /** 查询【请填写功能名称】列表 */
+    getSearchInfoList() {
+      this.loading = true;
+      searchInfo(this.queryParams).then((response) => {
+        this.infoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.lnglat = null;
+      this.form = {
+        id: null,
+        userId: null,
+        searchValue: null,
+        deviceId: null,
+        createTime: null,
+        updateTime: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getSearchInfoList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.infoList = null;
+      this.total = 0;
+      this.loading = false;
+      this.lnglat = null;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/info/export",
+        {
+          ...this.queryParams,
+        },
+        `info_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 设备定位 */
+    handleDeviceLocation(rows) {
+      this.lnglat = [rows.gpsLong, rows.gpsLat];
+      this.handleCreateMap();
+    },
+    /** 创建地图 */
+    handleCreateMap() {
+      AMapLoader.load({
+        key: "c968deab485d6e688e7c68689722ffb4",
+        version: "2.0",
+      }).then((AMap) => {
+        this.amap = new AMap.Map("map_container", {
+          zoom: 15,
+        });
+        var geocoder;
+        AMap.plugin(["AMap.Scale", "AMap.Geocoder"], () => {
+          this.amap.addControl(new AMap.Scale());
+          geocoder = new AMap.Geocoder({
+            radius: 500, //范围，默认：500
+          });
+        });
+        /** 定位 */
+        let marker = new AMap.Marker();
+        if (this.lnglat.length) {
+          this.amap.setCenter(this.lnglat);
+          this.amap.add(marker);
+          marker.setPosition(this.lnglat);
+        }
+      });
+    },
+    /** 设备轨迹 */
+    handleDeviceTrajectory(rows) {
+      console.debug("您获取的围栏是：" + rows);
+    },
+    /** 设备围栏 */
+    handleDeviceFence(rows) {
+      this.dialogFenceVisible = true;
+      this.fenceInfoList = rows.aMapFenceList;
+      // console.debug("设备围栏数据：" + rows.aMapFenceList[0]);
+      // this.getFenceInfo(rows.aMapFenceList[0]).then((res) => {
+      //   if (res.data.results[0].shape.radius) {
+      //     console.debug(
+      //       "res.data.results[0].shape.radius:" +
+      //         res.data.results[0].shape.radius
+      //     );
+      //     // this.fenceInfo.center = res.data.results[0].shape.center;
+      //     // this.fenceInfo.radius = res.data.results[0].shape.radius;
+      //     // this.fenceInfo.geofence_type = 0;
+      //     // let lnglat = new AMap.LngLat(
+      //     //   res.data.results[0].shape.center.split(",")[0],
+      //     //   res.data.results[0].shape.center.split(",")[1]
+      //     // );
+      //     // this.fence = new AMap.Circle({
+      //     //   center: lnglat,
+      //     //   radius: res.data.results[0].shape.radius, //半径
+      //     //   borderWeight: 3,
+      //     //   fillOpacity: 0.4,
+      //     //   strokeStyle: "dashed",
+      //     //   strokeDasharray: [10, 10],
+      //     //   // 线样式还支持 'dashed'
+      //     //   fillColor: "#1791fc",
+      //     //   zIndex: 50,
+      //     // });
+      //     // this.map.add(this.fence);
+      //     // this.map.setCenter(lnglat);
+      //     // this.map.setFitView([this.fence]);
+      //   } else if (res.data.results[0].shape.points) {
+      //     // console.debug(
+      //     //   "res.data.results[0].shape.points:" +
+      //     //     res.data.results[0].shape.points
+      //     // );
+      //     let arr = res.data.results[0].shape.points.split(";");
+      //     let path = [];
+      //     arr.map((item) => {
+      //       path.push(item.split(","));
+      //     });
+      //     console.log("当前路径为：" + path);
+      //     this.fenceInfo.points = res.data.results[0].shape.points;
+      //     this.fenceInfo.geofence_type = 1;
+      //     this.fence = new AMap.Polygon({
+      //       path: path,
+      //       strokeColor: "#FF33FF",
+      //       strokeWeight: 6,
+      //       strokeOpacity: 0.2,
+      //       fillOpacity: 0.4,
+      //       fillColor: "#1791fc",
+      //       zIndex: 50,
+      //       bubble: true,
+      //       // draggable: true,
+      //     });
+      //     this.amap.add(this.fence);
+      //     this.amap.setFitView([this.fence]);
+      //   }
+      // });
+    },
+    /** 设备围栏 */
+    handleDeviceItemFence(rows) {
+      this.getFenceInfo(rows).then((res) => {
+        if (res.data.results[0].shape.radius) {
+          console.debug(
+            "res.data.results[0].shape.radius:" +
+              res.data.results[0].shape.radius
+          );
+          // this.fenceInfo.center = res.data.results[0].shape.center;
+          // this.fenceInfo.radius = res.data.results[0].shape.radius;
+          // this.fenceInfo.geofence_type = 0;
+          // let lnglat = new AMap.LngLat(
+          //   res.data.results[0].shape.center.split(",")[0],
+          //   res.data.results[0].shape.center.split(",")[1]
+          // );
+          // this.fence = new AMap.Circle({
+          //   center: lnglat,
+          //   radius: res.data.results[0].shape.radius, //半径
+          //   borderWeight: 3,
+          //   fillOpacity: 0.4,
+          //   strokeStyle: "dashed",
+          //   strokeDasharray: [10, 10],
+          //   // 线样式还支持 'dashed'
+          //   fillColor: "#1791fc",
+          //   zIndex: 50,
+          // });
+          // this.map.add(this.fence);
+          // this.map.setCenter(lnglat);
+          // this.map.setFitView([this.fence]);
+        } else if (res.data.results[0].shape.points) {
+          // console.debug(
+          //   "res.data.results[0].shape.points:" +
+          //     res.data.results[0].shape.points
+          // );
+          let arr = res.data.results[0].shape.points.split(";");
+          let path = [];
+          arr.map((item) => {
+            path.push(item.split(","));
+          });
+          console.log("当前路径为：" + path);
+          this.fenceInfo.points = res.data.results[0].shape.points;
+          this.fenceInfo.geofence_type = 1;
+          this.fence = new AMap.Polygon({
+            path: path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            fillColor: "#1791fc",
+            zIndex: 50,
+            bubble: true,
+            // draggable: true,
+          });
+          this.amap.add(this.fence);
+          this.amap.setFitView([this.fence]);
+        }
+        this.dialogFenceVisible = false;
+      });
+    },
+    // 获取围栏信息
+    getFenceInfo(aMapFence) {
+      return new Promise((resolve, reject) => {
+        axios({
+          url: "https://tsapi.amap.com/v1/track/geofence/list",
+          method: "GET",
+          params: {
+            key: aMapFence.key,
+            sid: aMapFence.sid,
+            gfids: aMapFence.gfid,
+            outputshape: 1,
+          },
+        }).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+  },
+};
+</script>

src/views/test/BottomCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="box">
     <div class="box-title">
-      <dv-decoration-5 class="header-center-decoration" />
+      <dv-decoration-5 :dur="dur" class="header-center-decoration" />
       <div class="center-title">{{ this.title }}</div>
     </div>
     <slot class="content" name="default"></slot>
@@ -19,7 +19,9 @@ export default {
   },
 
   data() {
-    return {};
+    return {
+      dur:4
+    };
   },
 };
 </script>

src/views/test/CenterCmp.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="center-cmp">
-    <div class="cc-header">
-      <dv-decoration-1 style="width:200px;height:50px;" />
-      <div>机电设备总数</div>
-      <dv-decoration-1 style="width:200px;height:50px;" />
-    </div>
-
-    <div class="cc-details">
-      <div>设备总数</div>
-      <div class="card">2</div>
-      <div class="card">1</div>
-      <div class="card">3</div>
-      <div class="card">7</div>
-    </div>
-
-    <div class="cc-main-container">
-      <div class="ccmc-left">
-        <div class="station-info">
-          收费站<span>1315</span>
-        </div>
-        <div class="station-info">
-          监控中心<span>415</span>
-        </div>
-      </div>
-
-      <dv-active-ring-chart class="ccmc-middle" :config="config" />
-
-      <div class="ccmc-right">
-        <div class="station-info">
-          <span>90</span>道路外场
-        </div>
-        <div class="station-info">
-          <span>317</span>其他
-        </div>
-      </div>
-
-      <LabelTag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from './LabelTag'
-
-export default {
-  name: 'CenterCmp',
-  components: {
-    LabelTag
-  },
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费站',
-            value: 1315
-          },
-          {
-            name: '监控中心',
-            value: 415
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 317
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        lineWidth: 30,
-        radius: '55%',
-        activeRadius: '60%'
-      },
-
-      labelConfig: {
-        data: ['收费站', '监控中心', '道路外场', '其他']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.center-cmp {
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-
-  .cc-header {
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 30px;
-  }
-
-  .cc-details {
-    height: 120px;
-    display: flex;
-    justify-content: center;
-    font-size: 32px;
-    align-items: center;
-
-    .card {
-      background-color: rgba(4,49,128,.6);
-      color: #08e5ff;
-      height: 70px;
-      width: 70px;
-      font-size: 45px;
-      font-weight: bold;
-      line-height: 70px;
-      text-align: center;
-      margin: 10px;
-    }
-  }
-
-  .cc-main-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-
-    .ccmc-middle {
-      width: 50%;
-      height: 90%;
-
-      .active-ring-name {
-        font-size: 20px !important;
-      }
-    }
-
-    .ccmc-left, .ccmc-right {
-      width: 25%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      font-size: 24px;
-
-      span {
-        font-size: 40px;
-        font-weight: bold;
-      }
-
-      .station-info {
-        height: 80px;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .ccmc-left {
-      align-items: flex-end;
-
-      span {
-        margin-left: 20px;
-      }
-    }
-
-    .ccmc-right {
-      align-items: flex-start;
-
-      span {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  .label-tag {
-    position: absolute;
-    width: 500px;
-    height: 30px;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/test/LabelTag.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="label-tag">
-    <template v-if="mergedConfig">
-      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
-        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
-
-export default {
-  name: 'LabelTag',
-  props: {
-    config: {
-      type: Object,
-      default: () => ([])
-    }
-  },
-  data () {
-    return {
-      defaultConfig: {
-        /**
-         * @description Label data
-         * @type {Array<String>}
-         * @default data = []
-         * @example data = ['label1', 'label2']
-         */
-        data: [],
-        /**
-         * @description Label color (Hex|Rgb|Rgba|color keywords)
-         * @type {Array<String>}
-         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
-         */
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      },
-
-      mergedConfig: null
-    }
-  },
-  watch: {
-    config () {
-      const { mergeConfig } = this
-
-      mergeConfig()
-    }
-  },
-  methods: {
-    mergeConfig () {
-      let { config, defaultConfig } = this
-
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-    }
-  },
-  mounted () {
-    const { mergeConfig } = this
-
-    mergeConfig()
-  }
-}
-</script>
-
-<style lang="less">
-.label-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .label-item {
-    margin: 5px;
-    font-size: 15px;
-    display: flex;
-    align-items: center;
-
-    div {
-      width: 12px;
-      height: 12px;
-      margin-left: 5px;
-    }
-  }
-}
-</style>

src/views/test/LeftChart1.vue

@@ -1,11 +1,3 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 16:55:24
- * @FilePath: \electronic-file\src\components\datav\LeftChart1.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <template>
   <div class="left-chart-middle">
     <dv-charts class="lc1-chart" :option="option" />
@@ -15,23 +7,59 @@
 <script>
 export default {
   name: "LeftChart1",
+  props: {
+    datalist: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
       option: {
         series: [
           {
             type: "pie",
-            data: [{ name: "可口可乐", value: 93 }],
+            data: [],
             radius: ["50%", "75%"],
+            axisTick: {},
             insideLabel: {
-              show: true,
-              formatter: "{value}",
+              show: false,
+              formatter: "{value}%",
             },
+            outsideLabel:{
+              show:true,
+              formatter:"{name}  {value}个  {percent}%",
+              style:{
+                fontSize:18,
+              }
+            }
           },
         ],
       },
     };
   },
+  created() {
+    this.getData();
+  },
+  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
+      // })
+    },
+  },
 };
 </script>
 

src/views/test/LeftChart2.vue

@@ -1,11 +1,3 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 18:49:43
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <template>
   <div class="left-chart-2">
     <dv-charts class="lc2-chart" :option="option" />
@@ -13,8 +5,20 @@
 </template>
 
 <script>
+import { addDevice } from "@/api/system/equdata";
+
 export default {
   name: "LeftChart2",
+  props:{
+   xlist:{
+    type:Array,
+    default:[],
+   },
+   ylist:{
+    type:Array,
+    default:[],
+   }
+  },
   data() {
     return {
       option: {
@@ -51,8 +55,9 @@ export default {
           bottom: 20,
         },
         xAxis: {
-          name: "第二周",
-          data: ["周一"],
+          name: "",
+          // data: ["周一","周二"],
+          data: this.xlist,
           axisLine: {
             style: {
               stroke: "#324686",
@@ -89,7 +94,8 @@ export default {
         },
         series: [
           {
-            data: [2],
+            // data: [2,6],
+            data: this.ylist,
             type: "line",
             lineArea: {
               show: true,
@@ -100,6 +106,21 @@ export default {
       },
     };
   },
+  created() {
+    this.getEquData();
+  },
+  methods: {
+    getEquData() {
+      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
+      })
+    },
+  },
 };
 </script>
 

src/views/test/LeftChart3.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="left-chart-3">
-    <div class="lc3-header">王五收费站</div>
-    <div class="lc3-details">设备运行总数<span>245</span></div>
-    <dv-capsule-chart class="lc3-chart" :config="config" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart3',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 78
-          },
-          {
-            name: '通信系统',
-            value: 54
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 167
-          },
-          {
-            name: '其他',
-            value: 77
-          }
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-3 {
-  width: 100%;
-  height: 33%;
-  display: flex;
-  flex-direction: column;
-
-  .lc3-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc3-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;
-    }
-  }
-
-  .lc3-chart {
-    flex: 1;
-  }
-}
-</style>

src/views/test/LeftChart4.vue

@@ -1,108 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-13 15:40:20
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div class="left-chart-4">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LeftChart4",
-  data() {
-    return {
-      // option: {
-      //   xAxis: {
-      //     name: "第一周",
-      //     data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-
-      //     axisTick: {
-      //       show: false,
-      //     },
-      //     axisLine: {
-      //       show: true,
-      //     },
-      //     axisLabel: {
-      //       show: false,
-      //     },
-      //     nameTextStyle: {
-      //       fill: "red",
-      //       fontSize: 10,
-      //     },
-      //   },
-      //   yAxis: {
-      //     name: "销售额",
-      //     data: "value",
-      //     axisTick: {
-      //       show: false,
-      //     },
-      //     axisLine: {
-      //       show: true,
-      //     },
-      //     axisLabel: {
-      //       show: true,
-      //     },
-      //     splitLine: {
-      //       show: false,
-      //     },
-      //   },
-
-      //   grid: {
-      //     bottom: 10,
-      //     top: 30,
-      //   },
-      //   series: [
-      //     {
-      //       data: [0, 2, 3, 4, 5, 6, 7],
-      //       type: "bar",
-      //       barWidth: "30%",
-      //     },
-      //   ],
-      // },
-      option: {
-        xAxis: {
-          name: "第一周",
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-        },
-        yAxis: {
-          name: "销售额",
-          data: "value",
-          splitLine: {
-            show: false,
-          },
-        },
-        grid: {
-          bottom: 10,
-          top: 20,
-        },
-        series: [
-          {
-            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-            type: "bar",
-            barWidth: "30%",
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.left-chart-4 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .lc2-chart {
-    height: calc(100% - 80px);
-    position: relative;
-  }
-}
-</style>

src/views/test/LeftChartUnder.vue

@@ -8,48 +8,43 @@
 
 <script>
 export default {
-  name: 'LeftChart3',
-  data () {
+  name: "LeftChart3",
+  props: {
+    dataList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
     return {
       config: {
-        data: [
-          {
-            name: '40',
-            value: 0.2
-          },
-          {
-            name: '50',
-            value: 0.8
-          },
-          {
-            name: '60',
-            value: 0.5
-          },
-          {
-            name: '70',
-            value: 0.2
-          },
-          {
-            name: '80',
-            value: 0.4
-          },
-          {
-            name: '90',
-            value: 0.1
-          },
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '人'
-      }
-    }
-  }
-}
+        data: [],
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        unit: "人",
+        showValue: true
+      },
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.config.data = this.dataList.map((item) => {
+        return {
+          name: item.age,
+          value: item.count,
+        };
+      });
+    },
+  },
+};
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-3 {
   width: 100%;
-  height: 33%;
+  height: 70%;
   display: flex;
   flex-direction: column;
 

src/views/test/MiddleChart.vue

@@ -8,19 +8,31 @@
 -->
 <template>
   <div class="left-chart-4">
-    <dv-charts class="lc2-chart" :option="option" />
+    <dv-charts class="middle-chart" :option="option" />
   </div>
 </template>
 
 <script>
+import { addUser } from "@/api/system/equdata";
 export default {
   name: "LeftChart4",
+  props:{
+   xlist:{
+    type:Array,
+    default:[],
+   },
+   ylist:{
+    type:Array,
+    default:[],
+   }
+  },
   data() {
     return {
       option: {
         xAxis: {
           // name: "第一周",
-          data: ["周一"],
+          // data: ["周一"],
+          data: this.xlist,
           axisLabel: {
             style: {
               fill: "#fff",
@@ -42,7 +54,8 @@ export default {
         },
         series: [
           {
-            data: [10],
+            // data: [10],
+            data: this.ylist,
             type: "bar",
             barWidth: 10,
           },
@@ -50,10 +63,21 @@ export default {
       },
     };
   },
-  mounted() {
+  created() {
     // this.initData();
+    this.getAddUser()
   },
   methods: {
+    getAddUser(){
+      addUser().then(res=>{
+        let xlist=res.data.map(item=>item.month)
+        let ylist=res.data.map(item=>item.count)
+        console.log(xlist,333);
+        console.log(ylist,555);
+        this.option.xAxis.data=xlist
+        this.option.series[0].data=ylist
+      })
+    }
     // initData() {
     //   const option1 = {
     //     xAxis: {
@@ -77,7 +101,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-4 {
   width: 100%;
   height: 100%;
@@ -91,8 +115,8 @@ export default {
     margin-top: 10px;
   }
 
-  .lc2-chart {
-    height: calc(~"100% - 80px");
+  .middle-chart {
+    height: calc(100% - 80px);
     position: relative;
   }
 }

src/views/test/RightBottom.vue

@@ -1,40 +1,52 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-12 19:08:02
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-14 20:01:13
- * @FilePath: \electronic-file\src\components\datav\RightBottom.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <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: [
-          ["2019-07-01 19:25:00", "路面危害-松散", "5", "xxxxxxx"],
-          ["2019-07-02 17:25:00", "路面危害-路面油污清理", "13", "xxxxxxx"],
-          ["2019-07-03 16:25:00", "交安设施-交通标志牌结构", "6", "xxxxxxx"],
-          ["2019-07-04 15:25:00", "路基危害-防尘网", "2", "xxxxxxx"],
-          ["2019-07-05 14:25:00", "交安设施-交通标志牌结构", "1", "xxxxxxx"],
-          ["2019-07-06 13:25:00", "路面危害-松散", "3", "xxxxxxx"],
-          ["2019-07-07 12:25:00", "路基危害-防尘网", "4", "xxxxxxx"],
-          ["2019-07-08 11:25:00", "路面危害-路面油污清理", "2", "xxxxxxx"],
-          ["2019-07-09 10:25:00", "交安设施-交通标志牌结构", "5", "xxxxxxx"],
-          ["2019-07-10 09:25:00", "路基危害-防尘网", "3", "xxxxxxx"],
-        ],
+        // 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)",
@@ -42,10 +54,75 @@ export default {
       },
     };
   },
+  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;

src/views/test/RightChart1.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="right-chart-1">
-    <div class="rc1-header">赵六收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">262</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-capsule-chart class="right" :config="config" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 25
-          },
-          {
-            name: '通信系统',
-            value: 66
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 72
-          },
-          {
-            name: '其他',
-            value: 99
-          }
-        ],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.right-chart-1 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/test/RightChart2.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="right-chart-2">
-    <div class="rc1-header">孙七收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">267</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-charts class="right" :option="option" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart2',
-  data () {
-    return {
-      option: {
-        series: [
-          {
-            type: 'pie',
-            data: [
-              { name: '收费系统', value: 93 },
-              { name: '通信系统', value: 66 },
-              { name: '监控系统', value: 52 },
-              { name: '供配电系统', value: 34 },
-              { name: '其他', value: 22 }
-            ],
-            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="less">
-.right-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/test/aaa.vue

@@ -18,21 +18,29 @@
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option3" />
       <div class="item-chart-word gaojingshu">告警数</div>
-
     </div>
   </div>
 </template>
 
 <script>
-import LabelTag from "./LabelTag";
 
 export default {
   name: "BottomCharts",
+  props:{
+    data:{
+      type:Object,
+      default:{},
+    }
+  },
   components: {
-    LabelTag,
   },
   data() {
     return {
+      equTotalData: {},
+      deviceCount: 0,
+      deviceOnline: 0,
+      un_deviceOnline: 0,
+      alarmCount: 0,
       option: {
         series: [
           {
@@ -43,7 +51,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.deviceCount,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#01dcdf"],
               },
@@ -62,7 +70,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -81,7 +89,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.deviceOnline,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#33faaa"],
               },
@@ -100,7 +108,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -119,10 +127,9 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.un_deviceOnline,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#f7ac20"],
-
               },
             ],
             axisLabel: {
@@ -139,7 +146,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -158,9 +165,9 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.alarmCount,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f93496", "#f61967","#f2053e"],
+                gradient: ["#f93496", "#f61967", "#f2053e"],
               },
             ],
             axisLabel: {
@@ -177,7 +184,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -189,6 +196,12 @@ export default {
       },
     };
   },
+  mounted() {
+    // this.deviceView();
+  },
+  methods: {
+   
+  },
 };
 </script>
 
@@ -208,20 +221,20 @@ export default {
       height: calc(100% - 80px);
       position: relative;
     }
-    .item-chart-word{
+    .item-chart-word {
       font-size: 16px;
     }
-    .zongshu{
-      color:rgb(0, 253, 250);
+    .zongshu {
+      color: rgb(0, 253, 250);
     }
-    .zaixianshu{
-      color:rgb(7, 247, 168);
+    .zaixianshu {
+      color: rgb(7, 247, 168);
     }
-    .lixianshu{
-      color:rgb(227, 179, 55);
+    .lixianshu {
+      color: rgb(227, 179, 55);
     }
-    .gaojingshu{
-      color:rgb(245, 2, 61);
+    .gaojingshu {
+      color: rgb(245, 2, 61);
     }
   }
 }

src/views/test/bbb.vue

@@ -24,15 +24,25 @@
 </template>
 
 <script>
-import LabelTag from "./LabelTag";
+import { count, alarm } from "@/api/system/datav";
 
 export default {
   name: "BottomCharts",
+  props: {
+    number: {
+      type: Number,
+      default: 0,
+    },
+    data:{
+      type:Object,
+      default:{},
+    }
+  },
   components: {
-    LabelTag,
   },
   data() {
     return {
+      // userTotal:0,
       option: {
         series: [
           {
@@ -43,7 +53,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.number,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#01dcdf"],
               },
@@ -62,7 +72,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -81,7 +91,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.bindDevice,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#33faaa"],
               },
@@ -100,7 +110,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -119,7 +129,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.bindUser,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#f7ac20"],
               },
@@ -138,7 +148,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -157,7 +167,7 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 89,
+                value: this.data.deviceOnline,
                 // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                 gradient: ["#f93496", "#f61967","#f2053e"],
               },
@@ -176,7 +186,7 @@ export default {
             },
             details: {
               show: true,
-              formatter: "{value}%",
+              formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,

src/views/test/box-item.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <div class="bcci-header">赵钱收费站</div>
-      <dv-active-ring-chart :config="config1" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-    <dv-decoration-2 class="decoration-1" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">孙李收费站</div>
-      <dv-active-ring-chart :config="config2" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-2" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">周吴收费站</div>
-      <dv-active-ring-chart :config="config3" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-3" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">郑王收费站</div>
-      <dv-active-ring-chart :config="config4" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from "./LabelTag";
-
-export default {
-  name: "BottomCharts",
-  components: {
-    LabelTag,
-  },
-  data() {
-    return {
-      config1: {
-        data: [
-          {
-            name: "收费站",
-            value: 356,
-          },
-          {
-            name: "监控中心",
-            value: 215,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 317,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config2: {
-        data: [
-          {
-            name: "收费站",
-            value: 615,
-          },
-          {
-            name: "监控中心",
-            value: 322,
-          },
-          {
-            name: "道路外场",
-            value: 198,
-          },
-          {
-            name: "其他",
-            value: 80,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config3: {
-        data: [
-          {
-            name: "收费站",
-            value: 452,
-          },
-          {
-            name: "监控中心",
-            value: 512,
-          },
-          {
-            name: "道路外场",
-            value: 333,
-          },
-          {
-            name: "其他",
-            value: 255,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config4: {
-        data: [
-          {
-            name: "收费站",
-            value: 156,
-          },
-          {
-            name: "监控中心",
-            value: 415,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 210,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      labelConfig: {
-        data: ["收费站", "监控中心", "道路外场", "其他"],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="less">
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1,
-  .decoration-2,
-  .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/test/topHeader.vue

@@ -1,23 +1,72 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:12:32
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-14 19:04:10
- * @FilePath: \electronic-file\src\components\datav\topHeader.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <template>
   <div id="top-header">
     <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
-    <div class="center-title">qqq</div>
+    <dv-decoration-5 :dur="dur" class="header-center-decoration" />
+    <!-- <dv-decoration-8 class="header-right-decoration" :reverse="true" /> -->
+    <div class="header-right-decoration right-box"><div>{{ dateTime }}</div>
+          <div>
+            <img
+              src="./img/quanping.png"
+              alt=""
+              @click="toggleFullscreen"
+              v-if="!isFullscreen"
+            />
+            <img
+              src="./img/tuichuquanping.png"
+              alt=""
+              @click="toggleFullscreen"
+              v-if="isFullscreen"
+            />
+          </div></div>
+    <div class="center-title">易益康养</div>
   </div>
 </template>
 
 <script>
 export default {
   name: "TopHeader",
+  data(){
+    return{
+      dur:4,
+      dateTime: "",
+      isFullscreen: false, // 初始状态为非全屏
+    }
+  },
+  mounted() {
+    this.currentTime();
+  },
+  methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      var _this = this;
+      let yy = new Date().getFullYear();
+      let mm =
+        new Date().getMonth() + 1 < 10
+          ? "0" + (new Date().getMonth() + 1)
+          : new Date().getMonth() + 1;
+      let dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      _this.dateTime =
+        yy + "- " + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
+    },
+
+    toggleFullscreen(){
+      this.$parent.toggleFullscreen()
+    },
+  }
 };
 </script>
 
@@ -25,7 +74,7 @@ export default {
 #top-header {
   position: relative;
   width: 100%;
-  height: 20%;
+  height: 10%;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
@@ -41,6 +90,18 @@ export default {
     width: 25%;
     height: 60px;
   }
+  .right-box{
+    display: flex;
+      justify-content: space-between;
+      align-items: center;
+     font-size: 24px;
+     color:#00e1e1;
+     padding-right:30px;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+  }
 
   .center-title {
     position: absolute;
@@ -48,6 +109,7 @@ export default {
     font-weight: bold;
     left: 50%;
     top: 0;
+    color: #00e1e1;
     transform: translateX(-50%);
   }
 }

vue.config.js

@@ -35,8 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://118.195.207.241:8088`,
-        target: `http://43.138.30.29:8080`,
+        target: `http://118.195.207.241:8088`,
+        // target: `http://43.138.30.29:8080`,
         //  target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {