迁移大屏UI库和应用

2022-03-25 11:09:26 +08:00
parent 60bd0b1dff
commit cc87206dbc
104 changed files with 7124 additions and 139 deletions
--- a/project/dvui/AppDVDemo.vue
+++ b/project/dvui/AppDVDemo.vue
@@ -0,0 +1,145 @@
+<template>
+  <section class="AppDVDemo">
+    <ai-list>
+      <ai-title slot="title" title="数据大屏草稿板" isShowBottomBorder/>
+      <template #content>
+        <div class="showPanel">
+          <ai-dv-wrapper :views="views" v-model="active">
+            <AiMonitor style="width: 600px; height: 300px" type="slw"
+                       src="http://120.221.159.18:8000/flv/MT_20220319123025570adZa68OLywxi?encrypt=m3sbNQg2wFw9HdZn&timestamp=1647992818471"></AiMonitor>
+          </ai-dv-wrapper>
+        </div>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+
+import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
+import ops from './components/AiEchart/template/pie/pieChart2'
+import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
+import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
+import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
+import AiMonitor from "./components/AiMonitor/AiMonitor";
+
+export default {
+  name: "AppDVDemo",
+  label: "数据大屏草稿板",
+  components: {AiMonitor, AiDvPanel, AiDvWrapper, AiDvDisplay, AiDvSummary},
+  data() {
+    return {
+      ops,
+      active: '',
+      views: [
+        {label: '标准大屏', id: '0'},
+        {label: '当前大屏', id: '1'},
+        {label: '平安乡村', id: '2'},
+        {label: '人口数据', id: '3'},
+        {label: '人口数据', id: '4'},
+        {label: '人口数据', id: '5'},
+        {label: '宅基地', id: '6'},
+      ],
+      list: [
+        {name: '阿斯达', v1: 23, v2: 33},
+        {name: '水电费', v1: 12, v2: 34},
+        {name: '凡哥', v1: 67, v2: 25},
+        {name: '党费', v1: 98, v2: 85},
+        {name: '阿萨德', v1: 98, v2: 85},
+        {name: '电饭锅', v1: 98, v2: 85},
+        {name: '户籍科', v1: 98, v2: 85},
+      ],
+      data: [
+        {
+          "key": "阿斯达",
+          "value": '22',
+          "percentage": 33,
+          text: '同比上月'
+        },
+        {
+          "key": "阿斯达",
+          "value": '22',
+          "percentage": -33,
+          text: '同比上月'
+        }
+      ],
+      value: [
+        {
+          "key": "宅基地 ",
+          "value": 1252292,
+          "value1": 12592,
+          "value2": 12592,
+          "value3": 12592,
+          "value4": 12592
+        },
+        {
+          "key": "人数",
+          "value": 12592,
+          "value1": 12592,
+          "value2": 12592,
+          "value3": 12592,
+          "value4": 12592
+        },
+        {
+          "key": "户数 ",
+          "value": 12592,
+          "value1": 12592,
+          "value2": 12592,
+          "value3": 12592,
+          "value4": 12592
+        },
+        {
+          "key": "村社区",
+          "value": 12592,
+          "value1": 12592,
+          "value2": 12592,
+          "value3": 12592,
+          "value4": 12592
+        }
+      ],
+      markers: []
+    }
+  },
+  methods: {
+    getMarkers() {
+      this.$request.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
+        params: {current: 1, size: 1000000},
+        withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.markers = res.data.map(e => ({
+            ...e,
+            icon: "https://cdn.cunwuyun.cn/dvcp/dv/monitor.svg",
+            label: e.communityName
+          }))
+        }
+      })
+    }
+  },
+  created() {
+    // this.getMarkers()
+    setTimeout(() => {
+      this.list = this.list.map(e => ({name: e.name, '电费': e.v1, '水费': e.v2 * 2}))
+    }, 2000)
+  },
+  mounted() {
+    this.$initWxOpenData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./lib/animation";
+
+.AppDVDemo {
+  height: 100%;
+
+  .showPanel {
+    height: 600px;
+  }
+
+  .AiDvPanel {
+    width: 600px;
+  }
+}
+</style>