🌷 UI(大屏): 调整大屏样式轮播表

2024-07-03 09:26:10 +08:00 · 2024-07-03 09:26:10 +08:00 · 3ff144d18e
parent 6124b9adc7
commit 3ff144d18e
9 changed files with 238 additions and 3 deletions
--- a/package.json
+++ b/package.json
@ -40,6 +40,7 @@
    "url": "https://github.com/histroniot/smart-power-ui.git"
  },
  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
    "@liveqing/liveplayer": "^2.7.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.21.0",
--- a/src/assets/images/big/v3/tabel-bg-active.png
+++ b/src/assets/images/big/v3/tabel-bg-active.png
--- a/src/assets/images/big/v3/tabel-bg.png
+++ b/src/assets/images/big/v3/tabel-bg.png
--- a/src/assets/images/big/v3/tabel-num-active.png
+++ b/src/assets/images/big/v3/tabel-num-active.png
--- a/src/assets/images/big/v3/tabel-num.png
+++ b/src/assets/images/big/v3/tabel-num.png
--- a/src/main.js
+++ b/src/main.js
@ -20,6 +20,9 @@ import {  parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 import {  pluginsCope, getGuid } from "@/utils/hciot";
 import Pagination from "@/components/Pagination";
 import VueClipboard from 'vue-clipboard2'
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+

 // import VueCron from 'vue-cron';
 // 自定义表格工具扩展
@ -59,6 +62,7 @@ Vue.prototype.msgInfo = function (msg) {
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.use(iView)
+Vue.use(dataV)
 Vue.use(VueClipboard)
 Vue.use(VueAMap);
 VueAMap.initAMapApiLoader({
--- a/src/views/bigScreen/v3/index.vue
+++ b/src/views/bigScreen/v3/index.vue
@ -81,9 +81,7 @@
            >
              <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>

-              <device-proportion-wrap
-                :projectId="projectId"
-              ></device-proportion-wrap>
+              <device-table :projectId="projectId"></device-table>
            </div>
          </div>
        </div>
@ -130,6 +128,7 @@
 <script>
 import EHead from "./profile/EHead";
 import DeviceProportionWrap from "./profile/deviceProportion";
+import DeviceTable from "./profile/deviceTable";
 import WraringInfoWrap from "./profile/wraringInfo";
 import AlarmTableListWrap from "./profile/alarmTableList";
 import TypeDistributionWrap from "./profile/typeDistribution";
@ -151,6 +150,7 @@ export default {
  components: {
    EHead,
    DeviceProportionWrap,
+    DeviceTable,
    WraringInfoWrap,
    AlarmTableListWrap,
    // ETodayRatio,
--- a/src/views/bigScreen/v3/profile/deviceTable.vue
+++ b/src/views/bigScreen/v3/profile/deviceTable.vue
@ -0,0 +1,173 @@
+<template>
+  <div class="big-device-table-wrap">
+    <nav-temp htmlType="t1" :title="title">
+      <div slot="mk-center" class="tabel-carousel-box">
+        <dv-scroll-board  :config="config" class="tabel-scroll-board"  />
+      </div>
+    </nav-temp>
+  </div>
+</template>
+<script>
+import titleImg from "@/assets/images/big/b.png";
+import EchartsRadarWrap from "./echartsRadar";
+import { appDeviceStatistics } from "@/api/app";
+import NavTemp from "./navTemp";
+import { scrollBoard } from '@jiaminghi/data-view'
+export default {
+  name: "DeviceTableWrap",
+  components: {
+    EchartsRadarWrap,
+    NavTemp,
+    scrollBoard,
+  },
+  props: ["projectId"],
+  data() {
+    return {
+      config:{
+        header: ['设备类型', '数量', '设备占比'],
+        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']
+        ],
+        indexHeader:'序号',
+        index: true,
+        columnWidth: [60,180],
+        align: ['center','center','center','center'],
+      },
+
+      list: [],
+      titleImg,
+      title: "所有设备占比分析",
+      radarOption: {
+        indicator: [
+          { name: "物联网断路器", max: 100 },
+          { name: "智能摄像机", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "烟雾传感器", max: 100 },
+          { name: "智能气表", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "智能水表", max: 100 },
+        ],
+        seriesList: [
+          {
+            value: [],
+            name: "预算分配（Allocated Budget）",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    projectId(val) {
+      this.getDeviceProportionList();
+    },
+  },
+  created() {
+    this.getDeviceProportionList();
+  },
+  methods: {
+    getDeviceProportionList() {
+      appDeviceStatistics({ projectId: this.projectId }).then((res) => {
+        const list = res.data;
+        console.log("获取设备占比列表", res);
+        let data = [];
+        list.forEach((item)=>{
+          let percentage = ((item.thisTotal / item.total) * 100).toFixed(2)+'%';
+          data.push([item.deviceTypeName,item.thisTotal+'',percentage])
+        })
+        console.log("Data",data)
+
+        this.config = { data: data ,header: ['设备类型', '数量', '设备占比'],
+          indexHeader:'序号',
+          index: true,
+          columnWidth: [60,180],
+          align: ['center','center','center','center'],}
+        // this.radarOption.indicator = [];
+        // this.radarOption.seriesList = [];
+        // var _this = this;
+        // for (var i = 0; i < list.length; i++) {
+        //   _this.radarOption.indicator.push({
+        //     name: list[i].deviceTypeName,
+        //     max: list[i].total <= 0 ? 1 : list[i].total,
+        //   });
+        //   _this.radarOption.seriesList.push(list[i].thisTotal);
+        //   _this.config.data.push([list[i].deviceTypeName,list[i].total <= 0 ? 1 : list[i].total,0])
+        // }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.big-device-table-wrap {
+  width: calc((100% - 20px) / 2);
+  height: 190px;
+  .count-info {
+    width: 100%;
+    height: 190px;
+    // background-image: url("../../../../assets/images/big/boxleft-center.png");
+    // background-size: contain;
+    padding-top: 10px;
+  }
+}
+.tabel-carousel-box {
+  width: 100%;
+  height: 190px;
+  padding-top: 10px;
+  position: relative;
+  .tabel-scroll-board{
+    position: absolute;
+    width: 100%;
+    height: 210px;
+  }
+  .dv-scroll-board .header{
+    background-color: transparent !important;
+    background: url("../../../../assets/images/big/v3/tabel-bg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .dv-scroll-board .rows .row-item{
+    cursor: pointer;
+    background-color: transparent !important;
+    background: url("../../../../assets/images/big/v3/tabel-bg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .dv-scroll-board .rows .ceil{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dv-scroll-board .rows .index{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 29px;
+    height: 26px;
+    background-color: transparent !important;
+    background: url("../../../../assets/images/big/v3/tabel-num.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .dv-scroll-board .rows .ceil{
+    color: #00F5F7;
+  }
+  .dv-scroll-board .rows .row-item:hover{
+      background: url("../../../../assets/images/big/v3/tabel-bg-active.png") no-repeat;
+      background-size: 100% 100%;
+    .index{
+      background: url("../../../../assets/images/big/v3/tabel-num-active.png") no-repeat;
+      background-size: 100% 100%;
+    }
+      .ceil{
+        color: #fff;
+      }
+  }
+}
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@ -813,6 +813,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.5.5":
+  version "7.24.7"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.0.0", "@babel/template@^7.10.4", "@babel/template@^7.12.7":
  version "7.12.7"
  resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz"
@ -903,6 +910,51 @@
    cssnano-preset-default "^4.0.0"
    postcss "^7.0.0"

+"@jiaminghi/bezier-curve@*":
+  version "0.0.9"
+  resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee"
+  integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+"@jiaminghi/c-render@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8"
+  integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/bezier-curve" "*"
+    "@jiaminghi/color" "*"
+    "@jiaminghi/transition" "*"
+
+"@jiaminghi/charts@*":
+  version "0.2.18"
+  resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f"
+  integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/c-render" "^0.4.3"
+
+"@jiaminghi/color@*":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611"
+  integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==
+
+"@jiaminghi/data-view@^2.10.0":
+  version "2.10.0"
+  resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f"
+  integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/charts" "*"
+
+"@jiaminghi/transition@*":
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c"
+  integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 "@liveqing/liveplayer@^2.7.0":
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/@liveqing/liveplayer/-/liveplayer-2.7.0.tgz#06b7c4093cc299b6f9cff060e9ef4835ff6f8f70"
@ -7436,6 +7488,11 @@ regenerator-runtime@^0.13.4:
  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz"
  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==

+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.14.2:
  version "0.14.5"
  resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz"