From 3ff144d18ed3ecd4a831f32bde9475f6e34fc585 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Wed, 3 Jul 2024 09:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B7=20UI(=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=A7=E5=B1=8F=E6=A0=B7=E5=BC=8F=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/assets/images/big/v3/tabel-bg-active.png  | Bin 0 -> 3478 bytes
 src/assets/images/big/v3/tabel-bg.png         | Bin 0 -> 2117 bytes
 src/assets/images/big/v3/tabel-num-active.png | Bin 0 -> 1302 bytes
 src/assets/images/big/v3/tabel-num.png        | Bin 0 -> 1366 bytes
 src/main.js                                   |   4 +
 src/views/bigScreen/v3/index.vue              |   6 +-
 .../bigScreen/v3/profile/deviceTable.vue      | 173 ++++++++++++++++++
 yarn.lock                                     |  57 ++++++
 9 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/big/v3/tabel-bg-active.png
 create mode 100644 src/assets/images/big/v3/tabel-bg.png
 create mode 100644 src/assets/images/big/v3/tabel-num-active.png
 create mode 100644 src/assets/images/big/v3/tabel-num.png
 create mode 100644 src/views/bigScreen/v3/profile/deviceTable.vue

diff --git a/package.json b/package.json
index 7d9c183b..7751e133 100644
--- 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",
diff --git a/src/assets/images/big/v3/tabel-bg-active.png b/src/assets/images/big/v3/tabel-bg-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d40f3da4f4592b8ad5b59184a8064f4505ab336
GIT binary patch
literal 3478
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
G`2PT?jZ`QA

literal 0
HcmV?d00001

diff --git a/src/assets/images/big/v3/tabel-bg.png b/src/assets/images/big/v3/tabel-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9f562214f41d38c3f981544c2c8255bd5117740
GIT binary patch
literal 2117
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/big/v3/tabel-num-active.png b/src/assets/images/big/v3/tabel-num-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..3135d891dc44c77c173945177fa9421f186b94a9
GIT binary patch
literal 1302
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!`(NH^KQz(B#=QqR=P
zEHx?FG|5Cq!N|bKNZ-Iz-@sDWz{1MN)XLOU0Sc6W78a$XSp~VcL9GMwY?U%fN(!v>
z^~=l4^~#O)@{7{-4J|D#^$m>ljf`}GDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_p
zOiaozEwNPsIu_!K+yc0<dBxC>0*0A>MPh-zp`HQAS1^UXzW9~q=E7AMmjtCE+>6!V
z;*iRMRQ;gT;{4L0WMJH-DTAykuyQU+O)SYT3dzsUfdynhMt(_taYlZDf|0SFiGoIW
zW?o8ud9fx~gRifZXI^nhVqS8pr;Du;&<MTE%oHmNR|88US5s4C3lld(LsvIPGh+)E
zHxp+kQ&(3<Lq{{1UYGpj(%jU%5}4i;gkGQy9C|^?A-4c%vrB4GW?5>ATTy<l0@%-1
znYi6zjMF@*-W1$!F~O-<ALtl;P|PC5G)xGXd_YWi(gkwhi9a<DnBt3oN!#UNVlD#%
zW1FXoV@SoVq(A@v+cWDja(DdL<$Q7K!`qXm_B2&_OK#QP7L@g3|Kg3@5;JbTFZ^A*
zg(>>Lfg_)$H#+B-U-+PuwPRM`rJHa6zZU+RV5ZTrZ-107OG@@XYnd{UocV9HKE>2o
z^f0cH&yiam@gh(xg;k-sv1^9IjF{`pXMZ#wIxeWcCSwLGXR>f}=Vk`k;~j!0Ga4jU
z&4~HXJ%Lr>@J)x0%_`sId;4|HHK=`Ooz1GyT0h~4g@&ig4V?=9BkB`t4)`r(ec$jy
zW1qsJUHonHS>N0cN%r);5hNbQ{i7j5utPuSBzwW<hzUB64o>cpn0U#?Q0&0j<b#1B
z4}6#HD3U$*i@`haVB56dz(dmn>;2RuPU=`3;bdBIz95=G_xyY2kL+BRp6f3WXo&dm
z-)r@&|NHHo7vB7>xWT91!?X4C|9?Uc|G(E?W>DdvJ?H;^J1*mz>N!U=a=uLuT%BUh
zI+gdxqQ{(<8~^=m;ZSm0c9&<5mKKlBo%@Y@<VC_y#cX=!;9P(BbxIUd0|PUI?TYM!
Tl8FI3KqZx@tDnm{r-UW|ngP*w

literal 0
HcmV?d00001

diff --git a/src/assets/images/big/v3/tabel-num.png b/src/assets/images/big/v3/tabel-num.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd7a6ceaee1cd854c00e59361a178fb765f792ec
GIT binary patch
literal 1366
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!`(NH^KQz(B#=QqR=P
zEHx?FG|5Cq!N|bKNZ-Iz-@sDWz{1MN)XLOU0Sc6W78a$XSp~VcL9GMwY?U%fN(!v>
z^~=l4^~#O)@{7{-4J|D#^$m>ljf`}GDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_p
zOiaozEwNPsIu_!K+yc0<dBxC>0*0A>MPh-zp`HQAS1^UXzW9~q=E7AMmjtCE+>6!V
z;*iRMRQ;gT;{4L0WMJH-DTAykuyQU+O)SYT3dzsUfdynhMt(_taYlZDf|0SFiGoIW
zW?o8ud9fx~gRifZXI^nhVqS8pr;Du;&<MTE%oHmN3sYAMS64S<3lld(LsvIP3sXl+
zM;AvEGZzCF6JuAHUYGpj(%jU%5}4i;xL!8{oO(gYA-4c%vrB4GW?5>ATTy<l0@%-1
znYi8Jg3~;x-V~f}adpM1S0CsYeNfCI#WYL^n0!D?c+v%O;E6vq518VMfJr-A*fyJi
zf$^B9i(^Q|t)xHy|JyU`GIDoRY`g8z_w)Vs7w7lv5<mA^f0x_Jg=OwMi~kvKw3}S8
zd(Q+;l><Niuje~{{`txJh>DiRm^!V5(mr|rt_OA%%8zPhKm7mSZz;R*v=erb2R5Aj
zD;=r#{nkm=W%{qqtrPoGpya`jc93`Lwe1eCq%JV6YWW?!^2K|H8b9GQMxKV4eKUK7
zMRI(eNbI@!-M;z#`uFt{j?O4>v5^+oJgM<!17FG!4_6BvhNbZ{k|d-fdl=dOvu_kL
zSR{F-Ax)8al7!KJZZmF&lg}8Z@EXl&Zn8*oG2>5TJQ3|bQRnFb1I2@94~w}d$QL}i
z&>{Ei27~ZI3k4CE7m0p5bex#iRMa@|9C*b%Vc{KzKa8iAneaV$b};8LYf`R?=LFU_
z88etY=P<L+mz8QM_*}p$C_Qb%G0|@~t_aS(xM8Uho6OExDcl+-Gj1fyM9njH)KwHu
zRtxT&E`9UAQ6Wdujmzf7@0i7I|JGPpz!yDN=<&a@=$1xxu83$R?Z3}=f7xqMXO~^6
zBs-gXP0hT3sD}~rO86fCtg>}G@P4n|4fg+%Gv)s$C+$A{_iLZrgx@oRxGm~!On#r$
k+9Mlu|MHHTOaciEO3&Lw=N>=Q3o7Y6UHx3vIVCg!0LEME3IG5A

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index d99b6075..46c0c96b 100644
--- 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({
diff --git a/src/views/bigScreen/v3/index.vue b/src/views/bigScreen/v3/index.vue
index 34126ac6..a3a5066d 100644
--- 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,
diff --git a/src/views/bigScreen/v3/profile/deviceTable.vue b/src/views/bigScreen/v3/profile/deviceTable.vue
new file mode 100644
index 00000000..d288bfb1
--- /dev/null
+++ 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>
diff --git a/yarn.lock b/yarn.lock
index 778224e9..0043269b 100644
--- 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"