Merge branch 'dev' into vite

# Conflicts:
#	examples/main.js
#	examples/router/autoRoutes.js
#	package.json
#	packages/bigscreen/designer/AppDesigner.vue
#	packages/bigscreen/designer/components/Add.vue
#	packages/bigscreen/designer/components/Layout.vue
#	packages/bigscreen/designer/components/List.vue
#	packages/bigscreen/designer/components/SourceData.vue
#	packages/bigscreen/designer/components/form/DataConfig.vue
#	packages/bigscreen/designer/config.js
#	packages/bigscreen/viewer/AppGigscreenViewer.vue
#	packages/conv/creditScore/scoreManage/scoreChange.vue
#	packages/index.js
#	project/dv/apps/AppGridDV.vue
#	project/dvui/components/AiMonitor/dhVideo.vue
#	project/dvui/components/AiSwiper.vue
#	project/dvui/layout/AiDvBackground.vue
#	project/dvui/layout/AiDvSummary/AiDvSummary.vue
#	project/dvui/layout/AiDvWrapper/AiDvWrapper.vue
#	project/dvui/package.json
#	public/index.html
#	vue.config.js

project/dvui/components/AiDvPartyOrg.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="partyDvOrg" ref="container">
+    <div
+      class="partyDvOrg-wrapper"
+      ref="tree"
+      id="tree"
+      :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
+      <VueOkrTree
+        :props="props"
+        node-key="id"
+        ref="VueOkrTree"
+        :data="treeData">
+      </VueOkrTree>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { VueOkrTree } from 'vue-okr-tree'
+  import 'vue-okr-tree/dist/vue-okr-tree.css'
+
+  export default {
+    name: 'AiDvPartyOrg',
+
+    props: ['instance'],
+
+    components: {
+      VueOkrTree
+    },
+
+    data () {
+      return {
+        scale: 1,
+        x: '50%',
+        y: '50%',
+        treeData: [],
+        props: {
+          label: 'name',
+          children: 'children'
+        }
+      }
+    },
+
+    mounted () {
+      this.bindEvent()
+      this.getPartyOrg()
+    },
+
+    destroyed () {
+      document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
+      document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
+      document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
+      document.querySelector('body').removeEventListener('mousemove', this.onMouseMove)
+    },
+
+    methods: {
+      bindEvent () {
+        document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, true)
+        document.querySelector('body').addEventListener('mouseup', this.onMouseUp, true)
+        document.querySelector('body').addEventListener('mousedown', this.onMousedown, true)
+        document.querySelector('body').addEventListener('mousemove', this.onMouseMove, true)
+      },
+
+      onMousewheel (event) {
+        if (!event) return false
+        const elClass = event.target.className
+        if (elClass === 'tree' || elClass === 'middle' || (elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
+          var dir = event.deltaY > 0 ? 'Up' : 'Down'
+          if (dir === 'Up') {
+            this.scale = this.scale - 0.2 <= 0.1 ? 0.1 : this.scale - 0.2
+          } else {
+            this.scale = this.scale + 0.2
+          }
+        }
+
+        return false
+      },
+
+      onMousedown (e) {
+        const elClass = e.target.className
+        if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
+          const left = document.querySelector('#tree').offsetLeft
+          const top = document.querySelector('#tree').offsetTop
+          this.isMove = true
+          this.offsetX = e.clientX - left
+          this.offsetY = e.clientY - top
+        }
+      },
+
+      onMouseMove (e) {
+        if (!this.isMove) return
+
+        this.x = (e.clientX - this.offsetX) + 'px'
+        this.y = (e.clientY - this.offsetY) + 'px'
+      },
+
+      onMouseUp () {
+        this.isMove = false
+      },
+
+      getPartyOrg () {
+        this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
+          if (res.code === 0) {
+            this.treeData = res.data.filter(e => !e.parentId)
+            this.treeData.map(p => this.addChild(p, res.data.map(v => {
+              return {
+                ...v,
+                name: v.name.substr(0, 12)
+              }
+            }), {parent: 'parentId'}))
+
+            this.$nextTick(() => {
+              this.autoScale()
+            })
+          }
+        })
+      },
+
+      autoScale () {
+        const treeWidth = this.$refs.tree.offsetWidth
+        const containerWidth = this.$refs.container.offsetWidth
+        this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
+        this.x = '50%'
+        this.y = '50%'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .partyDvOrg {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .partyDvOrg-wrapper {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      left: 50%;
+      top: 50%;
+      padding: 20px;
+      overflow: hidden;
+      width: max-content;
+      height: 300%;
+    }
+
+    ::v-deep .org-chart-container {
+      color: #FFFFFF;
+      font-size: 16px;
+
+      .org-chart-node {
+        overflow: hidden;
+
+        .org-chart-node-label {
+          width: 40px;
+          height: 330px;
+          margin-right: 15px;
+          padding: 0 0;
+          box-shadow: 0 0 10px 4px rgba(188, 59, 0, 0.6) inset;
+
+          .org-chart-node-label-inner {
+            line-height: 1.3;
+            padding: 10px 0;
+            font-weight: 500;
+            writing-mode: vertical-rl;
+            text-align: center;
+            letter-spacing: 5px;
+            font-size: 18px;
+            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 24px;
+            text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
+            background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            user-select: none;
+          }
+        }
+
+        &:last-child {
+          .org-chart-node-label {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .is-root-label {
+        width: auto!important;
+        height: 40px!important;
+        line-height: 40px!important;
+        min-height: 40px!important;
+        text-align: center;
+
+        .org-chart-node-label-inner {
+          padding: 0 30px!important;
+          writing-mode: horizontal-tb!important;
+          font-size: 18px;
+          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 24px;
+          text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
+          background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+
+      .org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
+      .org-chart-node.is-leaf:before {
+        border-radius: 0;
+        border-color: #FFBA3E!important;
+      }
+
+      .vertical .org-chart-node:after, .vertical .org-chart-node:before {
+        border-radius: 0;
+        border-color: #FFBA3E!important;
+      }
+    }
+  }
+</style>

project/dvui/components/AiDvRender.vue

@@ -0,0 +1,235 @@
+<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="/Chart/.test(data.type)"
+                 style="height: 100%; width: 100%;"
+                 :ref="'chart' + index"
+                 :key="`chart${index}`"
+                 :theme="theme"
+                 :data="values"
+                 :ops="chartList[data.config]"/>
+      <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-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/>
+    </ai-dv-panel>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import AiSwiper from './AiSwiper.vue'
+import chartList from './AiEchart/echartTpls'
+import AiMonitor from "./AiMonitor/AiMonitor";
+import AiDvPanel from "../layout/AiDvPanel/AiDvPanel";
+import AiDvDisplay from "../layout/AiDvDisplay/AiDvDisplay";
+import AiDvSummary from "../layout/AiDvSummary/AiDvSummary";
+import AiSprite from "./AiSprite";
+import * as mods from "./AiSprite/mods";
+
+
+export default {
+  name: 'AiDvRender',
+  props: ['data', 'index', 'theme', 'instance'],
+  components: {
+    AiSprite,
+    AiDvSummary,
+    AiDvDisplay,
+    AiDvPanel,
+    AiMonitor,
+    AiSwiper
+  },
+  data() {
+    return {
+      mods,
+      chartList,
+      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/AiEchart/echartTpls.js

@@ -0,0 +1,35 @@
+import barChart1 from "./template/bar/barChart1"
+import barChart2 from "./template/bar/barChart2"
+import barChart3 from "./template/bar/barChart3"
+import barChart5 from "./template/bar/barChart5"
+import barChart7 from "./template/bar/barChart7"
+import barChart8 from "./template/bar/barChart8"
+import barChart9 from "./template/bar/barChart9"
+
+import lineChart1 from "./template/line/lineChart1"
+import lineChart2 from "./template/line/lineChart2"
+import lineChart3 from "./template/line/lineChart3"
+import lineChart4 from "./template/line/lineChart4"
+import lineChart5 from "./template/line/lineChart5"
+
+import pieChart1 from "./template/pie/pieChart1"
+import pieChart2 from "./template/pie/pieChart2"
+import pieChart3 from "./template/pie/pieChart3"
+
+export default {
+  barChart1,
+  barChart2,
+  barChart3,
+  barChart5,
+  barChart7,
+  barChart8,
+  barChart9,
+  lineChart1,
+  lineChart2,
+  lineChart3,
+  lineChart4,
+  lineChart5,
+  pieChart1,
+  pieChart2,
+  pieChart3
+}

project/dvui/components/AiEchart/template/pie/pieChart1.js

@@ -0,0 +1,26 @@
+export default {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: '50%',
+    label: {
+      show: false
+    }
+  }
+}

project/dvui/components/AiEchart/template/pie/pieChart3.js

@@ -0,0 +1,98 @@
+export default {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [50, 71],
+    itemStyle: {
+      borderColor: "#8d1419",
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    labelLine: {}
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 10000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            zIndex: '-1',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+            'span',
+            {
+              style: {
+                'font-size': '32px',
+                'font-weight': 'bold',
+                'margin-bottom': '3px',
+                'color': '#CEE1FF',
+                'line-height': '28px',
+                'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
+                'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
+                '-webkit-background-clip': 'text',
+                '-webkit-text-fill-color': 'transparent'
+              }
+            },
+            formatNum(total)
+          ),
+          h('span', {
+            style: {
+              'font-size': '16px',
+              'color': '#CEE1FF',
+              'line-height': '16px',
+              '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'
+            }
+          }, "总量")
+        ]
+    )
+  }
+}

project/dvui/components/AiSprite.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="AiSprite" :ref="ref"/>
+</template>
+
+<script>
+export default {
+  name: "AiSprite",
+  props: {
+    width: {default: 400},
+    height: {default: 300},
+    is3D: Boolean
+  },
+  data() {
+    return {
+      ref: ""
+    }
+  },
+  methods: {
+    init(count = 0) {
+      const container = this.$refs[this.ref]
+      if (container) {
+        let {width, height} = this.$props
+        const scene = new spritejs.Scene({container, width, height, ...this.$attrs}),
+            layer = scene.layer()
+        /**
+         * layer 图层
+         * lib spritejs的依赖库
+         */
+        this.$emit("init", {layer, lib: spritejs})
+      } else if (count == 20) {
+        console.log(this.$refs)
+      } else setTimeout(() => this.init(++count), 500)
+    }
+  },
+  created() {
+    this.ref = "AiSprite_" + new Date().getTime()
+  },
+  mounted() {
+    this.$injectLib("https://unpkg.com/spritejs/dist/spritejs.min.js", () => {
+      if (this.is3D) {
+        this.$injectLib("http://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js", () => {
+          this.init()
+        })
+      } else this.init()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSprite {
+}
+</style>

project/dvui/components/AiSprite/building/building1.js

@@ -0,0 +1,4 @@
+const initModel = () => {
+
+}
+export default initModel

project/dvui/components/AiSprite/mods.js

@@ -0,0 +1 @@
+export const building1 = import('./building/building1')