电子巡查

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@kjgl77/datav-vue3": "^1.7.4",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: 2.3.1
         version: 2.3.1(vue@3.4.31)
+      '@kjgl77/datav-vue3':
+        specifier: ^1.7.4
+        version: 1.7.4(vue@3.4.31)
       '@vueup/vue-quill':
         specifier: 1.2.0
         version: 1.2.0(vue@3.4.31)
@@ -106,6 +109,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.27.0':
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.27.0':
     resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
     engines: {node: '>=6.9.0'}
@@ -270,9 +277,27 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    resolution: {integrity: sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==}
+
+  '@jiaminghi/c-render@0.4.3':
+    resolution: {integrity: sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==}
+
+  '@jiaminghi/charts@0.2.18':
+    resolution: {integrity: sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==}
+
+  '@jiaminghi/color@1.1.3':
+    resolution: {integrity: sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==}
+
+  '@jiaminghi/transition@1.1.11':
+    resolution: {integrity: sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==}
+
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@kjgl77/datav-vue3@1.7.4':
+    resolution: {integrity: sha512-zYVTVKkklUxwtiNKS1qPBilm4rTW+WItfp0zVpaRAI8wgXkLSPbDR9xPq2+UcU/Jft7/DVdMfBp709E2ResuPQ==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -502,18 +527,27 @@ packages:
   '@vueuse/core@10.11.0':
     resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
   '@vueuse/metadata@10.11.0':
     resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
   '@vueuse/shared@10.11.0':
     resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -1648,6 +1682,9 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   regex-not@1.0.2:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
     engines: {node: '>=0.10.0'}
@@ -2100,6 +2137,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.27.0
 
+  '@babel/runtime@7.27.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/types@7.27.0':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
@@ -2200,8 +2241,40 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    dependencies:
+      '@babel/runtime': 7.27.0
+
+  '@jiaminghi/c-render@0.4.3':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@jiaminghi/bezier-curve': 0.0.9
+      '@jiaminghi/color': 1.1.3
+      '@jiaminghi/transition': 1.1.11
+
+  '@jiaminghi/charts@0.2.18':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@jiaminghi/c-render': 0.4.3
+
+  '@jiaminghi/color@1.1.3': {}
+
+  '@jiaminghi/transition@1.1.11':
+    dependencies:
+      '@babel/runtime': 7.27.0
+
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@kjgl77/datav-vue3@1.7.4(vue@3.4.31)':
+    dependencies:
+      '@jiaminghi/c-render': 0.4.3
+      '@jiaminghi/charts': 0.2.18
+      '@jiaminghi/color': 1.1.3
+      '@vueuse/core': 10.11.1(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2420,6 +2493,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@10.11.1(vue@3.4.31)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.31)
+      vue-demi: 0.14.10(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.4.31)':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -2432,6 +2515,8 @@ snapshots:
 
   '@vueuse/metadata@10.11.0': {}
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@9.13.0': {}
 
   '@vueuse/shared@10.11.0(vue@3.4.31)':
@@ -2441,6 +2526,13 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@10.11.1(vue@3.4.31)':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.4.31)':
     dependencies:
       vue-demi: 0.14.10(vue@3.4.31)
@@ -3736,6 +3828,8 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
+  regenerator-runtime@0.14.1: {}
+
   regex-not@1.0.2:
     dependencies:
       extend-shallow: 3.0.2

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 
 import Cookies from 'js-cookie'
 
+import DataVVue3 from '@kjgl77/datav-vue3'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
@@ -67,6 +68,7 @@ app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
+app.use(DataVVue3)
 app.component('svg-icon', SvgIcon)
 
 directive(app)

src/views/index.vue

@@ -16,6 +16,7 @@ import reightDesk from './index/reightDesk.vue'
   width: 100%;
   height: 100vh;
   padding-top: 45px;
+  overflow: hidden;
 }
 
 .color-cyan {

src/views/system/inspection/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="inspection">
+    <div class="left_spection">
+      <HeadlineTag value="巡检点列表"></HeadlineTag>
+      <div class="box_arch_point">
+        <div class="point_box" style="margin-top: 10px;">
+          <el-input v-model="input" placeholder="按巡查点名称搜索" />
+        </div>
+      </div>
+    </div>
+    <div class="right_spection">
+      <div class="operation_spection">
+        <HeadlineTag value="运行统计"></HeadlineTag>
+        <div class="box_arch">
+          <div class="image_tubbiness">
+            <div class="work_num">3714<span>个</span></div>
+            <div class="work_title">今日总数</div>
+          </div>
+          <div class="right_content">
+            <div class="work_week">
+              <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
+              <span>巡检点数:</span>20
+            </div>
+            <div class="work_week">
+              <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
+              <span>巡检计划:</span>10
+            </div>
+            <div class="work_week">
+              <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
+              <span>巡检线路:</span>15
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="巡检统计"></HeadlineTag>
+        <div class="box_arch">
+          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="实时巡检"></HeadlineTag>
+        <div class="box_arch">
+          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+import * as echarts from 'echarts'
+const input = ref('')
+const config = ref({
+  headerBGC: '#10285c',
+  oddRowBGC: '#10285c7f',
+  evenRowBGC: '#10285c00',
+  header: ['名称', '位置', '列3'],
+  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']
+  ]
+})
+const chartRouting = ref(null);
+let chartInstance = null;
+// 初始化图表
+const initChart = () => {
+  chartInstance = echarts.init(chartRouting.value);
+  chartInstance.setOption({
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['产值', '增加值'],
+      icon: 'rich',
+      show: true,
+      itemWidth: 18,
+      itemHeight: 2,
+      textStyle: {
+        color: '#AFBDD1',
+        fontSize: '12px',
+      },
+      top: 8,
+      right: 10,
+      itemGap: 34,
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      bottom: '10%',
+      top: '16%',
+      containLabel: true,
+    },
+    xAxis: {
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      type: 'category',
+      boundaryGap: false,
+      axisLine: {
+        symbol: 'none',
+        lineStyle: {
+          color: '#50637A',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        color: '#ffffff',
+        fontSize: 12,
+        padding: [10, 0, 0, 0],
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#ffffff',
+        fontSize: 12,
+        padding: [0, 10, 0, 0],
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        name: '增加值',
+        data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
+        type: 'line',
+        smooth: true,
+        color: '#00F7FF',
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [{
+              offset: 0,
+              color: 'rgba(0, 247, 255, .6)',
+            },
+            {
+              offset: 0.8,
+              color: 'rgba(0, 247, 255, .2)',
+            },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+      },
+    ],
+  });
+};
+// 生命周期
+onMounted(initChart);
+// 窗口自适应
+window.addEventListener('resize', () => {
+  chartInstance?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.inspection {
+  position: relative;
+  width: 100%;
+  padding-top: 45px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left_spection {
+  position: absolute;
+  left: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.right_spection {
+  position: absolute;
+  right: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.box_arch_point {
+  height: calc(100% - 40px);
+}
+
+.operation_spection {
+  height: 250px;
+  color: #fff;
+}
+
+.flex_spection {
+  flex: 1;
+  color: #fff;
+}
+
+.box_arch {
+  display: flex;
+  align-items: center;
+  height: calc(100% - 40px);
+}
+
+.image_tubbiness {
+  position: relative;
+  flex: none;
+  width: 200px;
+  height: 100%;
+  background: url("@/assets/images/tubbiness.png");
+  background-size: 80% 80%;
+  background-position: center center;
+  background-repeat: no-repeat;
+
+  .work_num {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    color: rgb(84, 218, 250);
+    font-size: 20px;
+
+    span {
+      font-size: 14px;
+      color: rgb(158, 174, 195);
+    }
+  }
+
+  .work_title {
+    position: absolute;
+    bottom: 36px;
+    left: 0px;
+    right: 0px;
+    text-align: center;
+  }
+}
+
+.right_content {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  .work_week {
+    display: flex;
+    align-items: center;
+    font-size: 22px;
+    font-weight: bold;
+    color: #fff;
+
+    span {
+      padding-right: 10px;
+      font-size: 16px;
+      color: rgb(214, 218, 222);
+    }
+  }
+}
+
+.color_line_xj {
+  width: 6px;
+  height: 6px;
+  margin-right: 10px;
+}
+</style>
+<style lang="scss" scoped>
+.point_box :deep(.el-input__wrapper) {
+  background-color: transparent !important;
+  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
+}
+
+.point_box :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF inset !important;
+}
+
+.point_box :deep(.el-input__inner) {
+  color: #ffffff !important;
+}
+</style>