冗余数据整理

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,11 +1,5 @@
 <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">

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/index.vue

@@ -59,14 +59,9 @@ 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 +73,6 @@ export default {
     LeftChart11,
     LeftChart99,
     LeftChart2,
-    LeftChart3,
-    CenterCmp,
-    RightChart1,
-    RightChart2,
-    BottomCharts,
     equMap,
   },
   data() {
@@ -429,7 +419,6 @@ export default {
     padding: 6px 0 6px 8px;
     .equ-info-item {
       margin: 0;
-      // margin-bottom: 8px;
       .label-type {
         color: #f00404;
       }

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" />

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" />

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

@@ -65,7 +65,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-3 {
   width: 100%;
   height: 33%;

src/views/test/MiddleChart.vue

@@ -101,7 +101,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-4 {
   width: 100%;
   height: 100%;
@@ -116,7 +116,7 @@ export default {
   }
 
   .middle-chart {
-    height: calc(~"100% - 80px");
+    height: calc(100% - 80px);
     position: relative;
   }
 }

src/views/test/RightBottom.vue

@@ -1,11 +1,3 @@
-<!--
- * @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" />

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

@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import LabelTag from "./LabelTag";
 
 export default {
   name: "BottomCharts",
@@ -34,7 +33,6 @@ export default {
     }
   },
   components: {
-    LabelTag,
   },
   data() {
     return {

src/views/test/bbb.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import LabelTag from "./LabelTag";
 import { count, alarm } from "@/api/system/datav";
 
 export default {
@@ -40,7 +39,6 @@ export default {
     }
   },
   components: {
-    LabelTag,
   },
   data() {
     return {

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/index.vue

@@ -71,31 +71,6 @@
         </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>
 
@@ -104,15 +79,9 @@ import topHeader from "./topHeader";
 import LeftChart1 from "./LeftChart1";
 import LeftChart2 from "./LeftChart2";
 import LeftChartUnder from "./LeftChartUnder";
-import LeftChart3 from "./LeftChart3";
-import LeftChart4 from "./LeftChart4";
 import equMap from "./Maps";
-import CenterCmp from "./CenterCmp";
 
-import RightChart1 from "./RightChart1";
-import RightChart2 from "./RightChart2";
 
-import BottomCharts from "./BottomCharts";
 import BorderItem from "./BottomCharts";
 import aaa from "./aaa";
 import bbb from "./bbb";
@@ -128,12 +97,6 @@ export default {
     topHeader,
     LeftChart1,
     LeftChart2,
-    LeftChart3,
-    LeftChart4,
-    CenterCmp,
-    RightChart1,
-    RightChart2,
-    BottomCharts,
     BorderItem,
     equMap,
     aaa,

src/views/test/topHeader.vue

@@ -1,17 +1,9 @@
-<!--
- * @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>
+    <div class="center-title">易益康养</div>
   </div>
 </template>