大屏应用位置整合

project/dvui/AppDVDemo.vue

@@ -1,157 +0,0 @@
-<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">
-            <ai-echart :ops="ops" :data="views" theme="1"></ai-echart>
-          </ai-dv-wrapper>
-        </div>
-      </template>
-    </ai-list>
-  </section>
-</template>
-
-<script>
-
-import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
-import ops from './components/AiEchart/template/pie/pieChart3'
-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: [
-        {
-          "name": "阿斯达",
-          "v1": 23,
-          "v2": 33
-        },
-        {
-          "name": "水电费",
-          "v1": 12,
-          "v2": 34
-        },
-        {
-          "name": "凡哥",
-          "v1": 67,
-          "v2": 25
-        },
-        {
-          "name": "党费",
-          "v1": 98,
-          "v2": 85
-        }
-      ],
-      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>

project/dvui/components/AiDataPanel.vue

@@ -0,0 +1,88 @@
+<template>
+  <section class="AiDataPanel">
+    <b class="item-title" v-text="label"/>
+    <div class="num-bg">
+      <span ref="num" class="num" v-text="num"/>
+    </div>
+  </section>
+</template>
+
+<script>
+import {gsap} from 'gsap'
+
+export default {
+  name: "AiDataPanel",
+  props: {
+    label: {default: "标题"},
+    value: {default: 0}
+  },
+  data() {
+    return {
+      num: 0
+    }
+  },
+  methods: {
+    animation() {
+      let demo = {num: Math.max(this.value - 30, 0)}
+      gsap.to(demo, 1, {
+        num: this.value, onUpdate: () => {
+          this.num = demo.num?.toFixed(0)
+        }
+      })
+    }
+  },
+  mounted() {
+    this.animation()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDataPanel {
+  flex: 1;
+  width: 172px;
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #000;
+
+  & + .AiDataPanel {
+    margin-left: 16px;
+  }
+
+  .item-title {
+    font-size: 24px;
+    line-height: 32px;
+    background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-top: 30px;
+  }
+
+  .num-bg {
+    width: 100%;
+    height: 160px;
+    background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
+    background-size: 100% 100%;
+    position: relative;
+    margin-top: -76px;
+
+    .num {
+      position: absolute;
+      left: 0;
+      bottom: 30px;
+      width: 100%;
+      text-align: center;
+      height: 50px;
+      font-size: 40px;
+      font-family: D-DIN-Bold, D-DIN;
+      font-weight: bold;
+      line-height: 54px;
+      background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+</style>

project/dvui/components/AiDvRender.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="AiDvRender" style="width: 100%; height: 100%;">
+    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
+    <ai-dv-panel
+        style="height: 100%; width: 100%;"
+        v-if="data.type !== 'display'"
+        :title="data.title"
+        :border="data.border || ''">
+      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
+      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
+      <dv-scroll-board
+          v-if="data.type === 'table'"
+          :class="'dvScrollBoard' + theme"
+          :config="formatTable(values, data.isShowIndex, data.rowNum)"
+          :key="data.height"
+          :theme="theme"
+          :style="{height: data.height + 'px', width: '100%'}"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart2'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :theme="theme"
+          :key="`chart${index}`"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart5'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart7'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart8'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'barChart9'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'lineChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart1"/>
+      <ai-echart
+          v-else-if="data.type === 'lineChart2'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart2"/>
+      <ai-echart
+          v-else-if="data.type === 'lineChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'lineChart4'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
+      <ai-echart
+          v-else-if="data.type === 'lineChart5'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart5"/>
+      <ai-echart
+          v-else-if="data.type === 'pieChart'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart"/>
+      <ai-echart
+          v-else-if="data.type === 'pieChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart1"/>
+      <ai-echart
+          v-else-if="data.type === 'pieChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart3"/>
+      <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
+              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
+      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
+      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
+      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
+    </ai-dv-panel>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import AiSwiper from './AiSwiper.vue'
+import pieChart from './AiEchart/template/pie/pieChart2'
+import pieChart1 from './AiEchart/template/pie/pieChart1'
+import pieChart3 from './AiEchart/template/pie/pieChart3'
+import lineChart1 from './AiEchart/template/line/lineChart1'
+import lineChart2 from './AiEchart/template/line/lineChart2'
+import lineChart5 from './AiEchart/template/line/lineChart5'
+import AiMonitor from "./AiMonitor/AiMonitor";
+import AiDvPanel from "../layout/AiDvPanel/AiDvPanel";
+import AiDvDisplay from "../layout/AiDvDisplay/AiDvDisplay";
+import AiDvSummary from "../layout/AiDvSummary/AiDvSummary";
+
+
+export default {
+  name: 'AiDvRender',
+  props: ['data', 'index', 'theme', 'instance'],
+  components: {
+    AiDvSummary,
+    AiDvDisplay,
+    AiDvPanel,
+    AiMonitor,
+    AiSwiper
+  },
+
+  data() {
+    return {
+      lineChart1,
+      lineChart2,
+      lineChart5,
+      pieChart,
+      pieChart1,
+      pieChart3,
+      map: null,
+      lib: null
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    values() {
+      if (!this.data) {
+        return []
+      }
+
+      return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
+        return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
+      }) : this.data[this.data.dataType]
+    }
+  },
+  methods: {
+    formatTable(data, isShowIndex, rowNum) {
+      if (!data.length) {
+        return {
+          header: [],
+          data: []
+        }
+      }
+      let rows = []
+      const header = data.map(v => {
+        return v[Object.keys(v)[0]]
+      })
+      Object.keys(data[0]).forEach((item, index) => {
+        if (index !== 0) {
+          rows.push(item)
+        }
+      })
+      return {
+        header: header,
+        data: rows.map(item => {
+          return data.map(v => {
+            return v[item]
+          })
+        }),
+        headerBGC: 'transparent',
+        evenRowBGC: 'transparent',
+        oddRowBGC: 'rgba(0, 133, 255, 0.2)',
+        headerHeight: 42,
+        rowNum: rowNum || 7,
+        index: isShowIndex === '1',
+        waitTime: 8000,
+        carousel: 'page',
+        indexHeader: '排名',
+        align: ['center', 'center', 'center', 'center', 'center']
+      }
+    },
+    handleMapClick(count = 0) {
+      let {lib: AMap, map} = this
+      if (AMap) {
+        let infoWin = new AMap.InfoWindow({content: ""})
+        map.clearMap()
+        let markers = this.values.filter(e => e.lng).map(e => {
+          return new AMap.Marker({
+            map,
+            label: e.label,
+            icon: e.icon,
+            position: [e.lng, e.lat]
+          }).on('click', ({target}) => {
+            map.clearInfoWindow()
+            markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
+            target.setIcon(e.selectedIcon)
+            infoWin.setContent([
+              `<div class="infoWin">`,
+              `<b>${e.label}</b>`,
+              `<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
+              `<div>金融产品：${e['金融产品(万)']}万元</div>`,
+              `<div>融资需求：${e['融资需求(万)']}万元</div>`,
+              '</div>'
+            ].join(''))
+            infoWin.open(map, [e.lng, e.lat])
+          })
+        })
+        map.setFitView(markers)
+      } else if (count < 10) {
+        console.log("正在加载...%s", count)
+        setTimeout(() => this.handleMapClick(++count), 1000)
+      }
+    }
+  },
+  mounted() {
+    if (this.data.type == 'map') {
+      this.handleMapClick()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDvRender {
+  ::v-deep .dvScrollBoard1 {
+
+    .header {
+      background: rgba(0, 0, 0, 0.1) !important;
+
+      .header-item {
+        color: #FFBB73 !important;
+        font-size: 16px !important;
+        font-weight: 600;
+      }
+    }
+
+
+    .rows {
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 21px;
+      text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
+      background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+
+      & > div:nth-of-type(2n - 1) {
+        background-color: transparent !important;
+      }
+
+      & > div:nth-of-type(2n) {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+      }
+
+      .index {
+        color: #fff;
+        text-shadow: none;
+        background: #BD4921 !important;
+        -webkit-background-clip: inherit;
+        -webkit-text-fill-color: #fff;
+      }
+    }
+  }
+
+  ::v-deep.amap-info-contentContainer {
+    .amap-info-content {
+      background: #0A3257;
+      border: 1px solid #7BE5FF;
+      padding: 16px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+
+      .infoWin {
+        & > b {
+          display: block;
+          font-size: 18px;
+          font-weight: 600;
+          color: #FFFFFF;
+          margin-bottom: 13px;
+        }
+
+        & > div {
+          font-size: 16px;
+          font-weight: 400;
+          color: #7BE5FF;
+
+          & + div {
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+
+    .amap-info-sharp {
+      border-top-color: #0A3257;
+
+      &:after {
+        border-top-color: #7BE5FF;
+        filter: none;
+      }
+    }
+  }
+}
+</style>

project/dvui/components/AiStaData.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="AiStaData">
+    <ai-data-panel v-for="op in data" :key="op[key]"
+                   :label="op[label]" :value="op[key]"/>
+  </section>
+</template>
+
+<script>
+import AiDataPanel from "./AiDataPanel";
+
+export default {
+  name: "AiStaData",
+  components: {AiDataPanel},
+  props: {
+    data: {default: () => []},
+    key: {default: "id"},
+    label: {default: "label"},
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiStaData {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>

project/dvui/components/AiSwiper.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="swiper">
+    <el-carousel height="100%" indicator-position="none">
+      <el-carousel-item v-for="(item, index) in data" :key="index">
+        <img :src="item.img">
+        <div class="swiper-content" v-if="item.title">
+          <h2>{{ item.title }}</h2>
+          <p>{{ item.content }}</p>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiSwiper',
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      },
+
+      width: {
+        type: String,
+        default: '100%'
+      },
+      heigth: {
+        type: String,
+        default: '100%'
+      }
+    },
+
+    data () {
+      return {
+
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .swiper {
+    width: 100%;
+    height: 100%;
+    padding: 20px 0 0;
+
+    ::v-deep .el-carousel {
+      height: 100%;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-content {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 10px;
+      text-align: center;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);
+
+      h2 {
+        margin-bottom: 4px;
+        color: #fff;
+        text-align: center;
+        font-size: 18px;
+      }
+
+      p {
+        line-height: 22px;
+        white-space: pre-line;
+        color: #B6DFFF;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+  }
+</style>