定制大屏调整位置

packages/bigscreen/dv/components/AiGrid.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="AiGrid" ref="container">
+    <div
+        class="AiGrid-wrapper"
+        ref="tree"
+        id="tree"
+        :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
+      <ai-okr-tree
+          :props="props"
+          node-key="id"
+          show-collapsable
+          show-node-num
+          current-lable-class-name="aigrid-active"
+          :default-expanded-keys="defaultExpandedKeys"
+          ref="VueOkrTree"
+          @node-click="onNodeClick"
+          :data="treeData">
+      </ai-okr-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiGrid',
+  props: ['instance'],
+
+  data() {
+    return {
+      scale: 1,
+      x: '50%',
+      y: '50%',
+      defaultExpandedKeys: [],
+      treeData: [],
+      props: {
+        label: 'girdName',
+        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.12 <= 0.1 ? 0.1 : this.scale - 0.12
+        } else {
+          this.scale = this.scale + 0.12
+        }
+      }
+
+      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
+    },
+
+    onNodeClick(e) {
+      this.$emit('nodeClick', e)
+    },
+
+    getPartyOrg() {
+      this.instance.post('/app/appgirdinfo/listAll3').then(res => {
+        if (res.code === 0) {
+          this.treeData = res.data.filter(e => !e.parentGirdId)
+          const parentGirdId = this.treeData[0].id
+
+          this.treeData.map(p => this.addChild(p, res.data.map(v => {
+            if (v.id === parentGirdId) {
+              this.defaultExpandedKeys.push(v.id)
+            }
+
+            return {
+              ...v,
+              girdName: v.girdName.substr(0, 11)
+            }
+          }), {
+            parent: 'parentGirdId'
+          }))
+
+          this.$nextTick(() => {
+            this.autoScale()
+            this.$refs.VueOkrTree.setCurrentKey(parentGirdId)
+          })
+        }
+      })
+    },
+
+    autoScale() {
+      const treeWidth = this.$refs.tree.offsetWidth
+      const containerWidth = this.$refs.container.offsetWidth - 100
+      this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
+      this.x = '50%'
+      this.y = '50%'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiGrid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .AiGrid-wrapper {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    left: 50%;
+    top: 50%;
+    padding: 20px;
+    overflow: hidden;
+    width: max-content;
+    height: 300%;
+  }
+
+  .aigrid-active {
+    background: linear-gradient(180deg, #42C6CE 0%, #307598 100%);
+  }
+
+  ::v-deep .org-chart-container {
+    color: #FFFFFF;
+    font-size: 16px;
+
+    .org-chart-node-children {
+      display: flex;
+      justify-content: center;
+      float: initial !important;
+    }
+
+    .org-chart-node-btn {
+      border: 1px solid #23A0AC !important;
+      font-size: 16px;
+      font-weight: bold;
+      background: #071030;
+      color: #FF9A02;
+
+      &:after, &::before {
+        display: none;
+      }
+
+      &.expanded::before {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 4px;
+        right: 4px;
+        height: 0;
+        border-top: 1px solid #FF9A02;
+        content: "";
+      }
+
+      .org-chart-node-btn-text {
+        background: transparent;
+        color: #FF9A02;
+      }
+    }
+
+    .org-chart-node {
+      // overflow: hidden;
+
+      .org-chart-node-label {
+        width: 40px;
+        height: 254px;
+        margin-right: 15px;
+        padding: 0 0;
+
+        .org-chart-node-label-inner {
+          width: 40px !important;
+          height: 254px !important;
+          border: 1px solid;
+          background: linear-gradient(180deg, rgba(69, 210, 218, 0.2500) 0%, rgba(69, 210, 218, 0.1000) 100%) !important;
+          border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1 !important;
+          line-height: 1.3;
+          padding: 10px 8px;
+          text-align: center;
+          font-size: 18px;
+          color: rgba(255, 255, 255, 0.8);
+
+          &.aigrid-active {
+            background: linear-gradient(180deg, #42C6CE 0%, #307598 100%) !important;
+          }
+        }
+
+        &.is-root-label {
+          width: auto !important;
+          min-width: 240px;
+          height: 40px !important;
+          line-height: 40px !important;
+          min-height: 40px !important;
+          text-align: center;
+
+          .org-chart-node-label-inner {
+            padding: 0 30px !important;
+            color: #fff !important;
+            width: auto !important;
+            min-width: 240px;
+            height: 40px !important;
+            line-height: 40px !important;
+            min-height: 40px !important;
+            text-align: center;
+            background: linear-gradient(180deg, rgba(69, 210, 218, 0.2500) 0%, rgba(69, 210, 218, 0.1000) 100%) !important;
+            border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1 !important;
+
+            &.aigrid-active {
+              background: linear-gradient(180deg, #42C6CE 0%, #307598 100%) !important;
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        .org-chart-node-label {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .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: #23A0AC !important;
+    }
+
+    .vertical .org-chart-node:after, .vertical .org-chart-node:before {
+      border-radius: 0;
+      border-color: #23A0AC !important;
+    }
+  }
+}
+</style>

packages/bigscreen/dv/components/DonutChart.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="DonutChart" :id="id">
+    <canvas :id="canvasId"></canvas>
+    <div class="DonutChart-text">
+      <span>{{ ratio || 0 }}%</span>
+      <i>{{ text }}</i>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['ratio', 'text'],
+
+    data () {
+      return {
+        id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
+        canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
+        canvasWidth: 90,
+        canvasHeight: 90
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    methods: {
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = lineColor
+        ctx.beginPath()
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.closePath()
+        ctx.stroke()
+      },
+
+      angle (a, i, ox, oy, or) {
+        var hudu = (2 * Math.PI / 360) * a * i
+        var x = ox + Math.sin(hudu) * or
+        var y = oy - Math.cos(hudu) * or
+        return x + '_' + y
+      },
+
+      mapColor (value) {
+        if (value < 25) {
+          return '#FFC139'
+        }
+
+        if (value < 50) {
+          return '#21E03E'
+        }
+
+        return '#05C8FF'
+      },
+
+      init () {
+        const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
+        const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
+        const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
+        const angle = this.ratio / 100 * 2
+        let radian = 0
+
+        ctx.width = canvasWidth
+        ctx.height = canvasHeight
+        const x = canvasWidth / 2
+        const y = canvasHeight / 2
+        ctx.lineWidth = 2
+        ctx.strokeStyle = '#383f56'
+        ctx.beginPath();
+        ctx.arc(x, y, x - 3, 0, 2 * Math.PI)
+        ctx.stroke()
+
+        ctx.beginPath()
+        ctx.lineWidth = 4
+        ctx.strokeStyle = 'rgba(76, 202, 227, 1)'
+
+        if (this.ratio < 25) {
+          radian = 3 / 2 + angle
+          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        } else if (this.ratio === 100) {
+          ctx.arc(x, y, x - 4, 0, Math.PI * 2)
+        } else {
+          radian = (this.ratio - 25) / 100 * 2
+          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        }
+        ctx.stroke()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .DonutChart {
+    position: relative;
+    width: 84px;
+    height: 84px;
+    overflow: hidden;
+
+    .DonutChart-text {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      line-height: 1;
+      transform: translate(-50%, -50%);
+
+      span {
+        margin-bottom: 8px;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        font-style: oblique;
+      }
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        color: rgba(42, 183, 209, 1);
+      }
+    }
+  }
+</style>

packages/bigscreen/dv/components/PdGrid.vue

@@ -0,0 +1,483 @@
+<template>
+  <div class="pdgrid">
+    <div class="pdgrid-title">
+      <h2>{{ currGird }}</h2>
+    </div>
+    <div class="pdgrid-grid__title" @click="isShowGrid2 = true">
+      <h2 :title="girdName2">{{ girdName2 }}</h2>
+    </div>
+    <div class="pdgrid-body">
+      <div class="pdgrid-body__item" @click="isShowGrid3 = true">
+        <h2>{{ girdNum3 }}</h2>
+        <div class="bottom">
+          <i></i>
+          <p>{{ girdName3 }}</p>
+          <i class="right"></i>
+        </div>
+      </div>
+      <div class="pdgrid-body__item" @click.stop="isShowGrid4 = true">
+        <h2>{{ girdNum4 }}</h2>
+        <div class="bottom">
+          <i></i>
+          <p>{{ girdName4 }}</p>
+          <i class="right"></i>
+        </div>
+      </div>
+      <div class="pdgrid-body__item" @click="isShowGrid5 = true">
+        <h2>{{ girdNum5 }}</h2>
+        <div class="bottom">
+          <i></i>
+          <p>{{ girdName5 }}</p>
+          <i class="right"></i>
+        </div>
+      </div>
+    </div>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid2">
+        <div class="mask" @click="isShowGrid2 = false"></div>
+        <div class="grid-container">
+          <h2 :title="girdName2">{{ girdName2 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex2 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList2"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid2Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid3">
+        <div class="mask" @click="isShowGrid3 = false"></div>
+        <div class="grid-container">
+          <h2 :title="girdName3">{{ girdName3 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex3 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList3"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid3Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid4">
+        <div class="mask" @click="isShowGrid4 = false"></div>
+        <div class="grid-container">
+          <h2 :title="girdName4">{{ girdName4 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex4 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList4"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid4Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid5">
+        <div class="mask" @click="isShowGrid5 = false"></div>
+        <div class="grid-container">
+          <h2 :title="girdName5">{{ girdName5 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex5 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList5"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid5Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'pdgrid',
+
+    props: ['instance'],
+
+    data () {
+      return {
+        isShowGrid2: false,
+        isShowGrid3: false,
+        isShowGrid4: false,
+        isShowGrid5: false,
+        currIndex2: 0,
+        currIndex3: 0,
+        currIndex4: 0,
+        currIndex5: 0,
+        girdInfoList2: [],
+        girdInfoList3: [],
+        girdInfoList4: [],
+        girdInfoList5: [],
+        girdName2: '',
+        girdName3: '',
+        girdName4: '',
+        girdName5: '',
+        girdNum3: 0,
+        girdNum4: 0,
+        girdNum5: 0,
+        currGird: ''
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        document.addEventListener('keydown', this.onKeyDown)
+      })
+      this.getInfo()
+    },
+
+    destroyed () {
+      document.removeEventListener('keydown', this.onKeyDown)
+    },
+
+    methods: {
+      onKeyDown (e) {
+        if (e.keyCode == 27) {
+          this.isShowGrid2 = false
+          this.isShowGrid3 = false
+          this.isShowGrid4 = false
+          this.isShowGrid5 = false
+        }
+      },
+
+      onGrid2Click (item, index) {
+        this.currIndex2 = index
+        this.girdName2 = item.girdName
+        this.currIndex3 = -1
+        this.currIndex4 = -1
+        this.currIndex5 = -1
+        this.isShowGrid2 = false
+        this.girdInfoList3 = []
+        this.girdInfoList4 = []
+        this.girdInfoList5 = []
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid3Click (item, index) {
+        this.currIndex3 = index
+        this.girdName3 = item.girdName
+        this.currIndex4 = -1
+        this.currIndex5 = -1
+        this.girdNum3 = 1
+        this.isShowGrid3 = false
+        this.$emit('nodeClick', item.id)
+        this.girdInfoList4 = []
+        this.girdInfoList5 = []
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid4Click (item, index) {
+        this.currIndex4 = index
+        this.girdName4 = item.girdName
+        this.currIndex5 = -1
+        this.girdNum4 = 1
+        this.isShowGrid4 = false
+        this.$emit('nodeClick', item.id)
+        this.girdInfoList5 = []
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid5Click (item, index) {
+        this.currIndex5 = index
+        this.girdName5 = item.girdName
+        this.isShowGrid5 = false
+        this.girdNum5 = 1
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      getInfo (id) {
+        this.instance.post(`/app/appgirdinfo/queryPdDetailByGirdId?id=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            res.data.girdInfoList2 && (this.girdInfoList2 = res.data.girdInfoList2)
+            res.data.girdInfoList3 && (this.girdInfoList3 = res.data.girdInfoList3)
+            res.data.girdInfoList4 && (this.girdInfoList4 = res.data.girdInfoList4)
+            res.data.girdInfoList5 && (this.girdInfoList5 = res.data.girdInfoList5)
+
+            res.data.girdName2 && (this.girdName2 = res.data.girdName2)
+            res.data.girdName3 && (this.girdName3 = res.data.girdName3)
+            res.data.girdName4 && (this.girdName4 = res.data.girdName4)
+            res.data.girdName5 && (this.girdName5 = res.data.girdName5)
+
+            res.data.girdNum3 != null && (this.girdNum3 = res.data.girdNum3)
+            res.data.girdNum4 != null && (this.girdNum4 = res.data.girdNum4)
+            res.data.girdNum5 != null && (this.girdNum5 = res.data.girdNum5)
+
+            if (!id) {
+              this.currGird = res.data.girdName2
+              this.currIndex2 = res.data.girdInfoList2.findIndex(v => res.data.girdName2 === v.girdName)
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .pdgrid {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-bg.png) no-repeat center;
+    background-size: contain;
+
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity .3s ease-in-out;
+    }
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .pdgrid-grid__title {
+      position: absolute;
+      top: 40px;
+      left: 50%;
+      width: 271px;
+      height: 53px;
+      line-height: 53px;
+      text-align: center;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/grid-title-sbg.png) no-repeat center;
+      background-size: 100% 100%;
+      cursor: pointer;
+      transform: translateX(-50%);
+      transition: opacity ease 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      h2 {
+        width: 182px;
+        margin: 0 auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #FFFFFF;
+        font-size: 21px;
+        text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+        background: #fff;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .pdgrid-title {
+      position: absolute;
+      top: 200px;
+      left: 50%;
+      min-width: 640px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-titlebg.png) no-repeat center;
+      background-size: 100% 100%;
+      transform: translateX(-50%);
+
+      h2 {
+        color: #FFFFFF;
+        font-size: 22px;
+        white-space: nowrap;
+        text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+        background: #fff;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .pdgrid-body {
+      display: flex;
+      position: absolute;
+      justify-content: space-between;
+      bottom: 200px;
+      left: 0;
+      width: 100%;
+      padding: 0 112px;
+
+      .pdgrid-body__item {
+        display: flex;
+        flex-direction: column;
+        width: 200px;
+        height: 187px;
+        align-items: center;
+        padding-top: 71px;
+        cursor: pointer;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/item-bg.png) no-repeat center;
+        background-size: 100% 100%;
+        transition: opacity ease 0.3s;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &:nth-of-type(2) {
+          position: relative;
+          top: 67px;
+        }
+
+        h2 {
+          font-size: 36px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: #fff;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        p {
+          max-width: 164px;
+          margin-top: 4px;
+          padding: 0 16px;
+          font-size: 16px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: #fff;
+          -webkit-background-clip: text;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-text-fill-color: transparent;
+        }
+
+        .bottom {
+          display: flex;
+          align-items: center;
+
+          i {
+            width: 0px;
+            height: 0px;
+            border: 6px solid transparent;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: #FFCB42;
+
+            &.right {
+              width: 0px;
+              height: 0px;
+              border: 6px solid transparent;
+              border-top-color: transparent;
+              border-bottom-color: transparent;
+              border-left-color: #FFCB42;
+              border-right-color: transparent;
+            }
+          }
+        }
+      }
+    }
+
+    .grid-dialog {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 111;
+      width: 100%;
+      height: 100%;
+
+      & > .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .grid-container {
+        display: flex;
+        position: absolute;
+        flex-direction: column;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        width: 640px;
+        height: 640px;
+        background: rgba(7,13,41,0.9);
+        border: 1px solid #144662;
+        transform: translate(-50%, -50%);
+
+        & > h2 {
+          width: 100%;
+          height: 67px;
+          line-height: 67px;
+          padding: 0 20px;
+          text-align: center;
+          color: #FFFFFF;
+          font-size: 24px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/grid-title-bg.png) no-repeat center;
+          background-size: 100% 100%;
+        }
+
+        .grid-list {
+          flex: 1;
+          overflow-y: auto;
+
+          & > div {
+            height: 67px;
+            line-height: 67px;
+            padding: 0 20px;
+            text-align: center;
+            color: #FFFFFF;
+            font-size: 27px;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            transition: all ease 0.5s;
+
+            &.grid-active {
+              background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
+              box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
+              text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
+            }
+
+            &:hover {
+              background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
+              box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
+              text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

packages/bigscreen/dv/components/chartOps.js

@@ -0,0 +1,187 @@
+export const pieChart2 = {
+  legend: {
+    bottom: 0,
+    itemGap: 14,
+    itemWidth: 16,
+    itemHeight: 5,
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    height: 260
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+    backgroundColor: "rgba(14, 51, 111, 0.9)",
+    borderColor: "#1A6ABC",
+    textStyle: {color: "#fff"}
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [70, 81],
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2
+    },
+    label: {
+      color: "#A8D7F3",
+      fontSize: 14,
+      formatter: "{name|{b}}\n{v|{d}%}",
+      minMargin: 5,
+      edgeDistance: 10,
+      lineHeight: 22,
+      rich: {
+        v: {
+          color: "#fff"
+        }
+      }
+    },
+    labelLine: {},
+    labelLayout: function (params) {
+      let points = params.labelLinePoints,
+          isLeft = points[2][0] < points[1][0]
+      points[2][0] =
+          points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
+      return {
+        labelLinePoints: points
+      }
+    }
+  },
+  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%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              "span",
+              {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
+              formatNum(total)
+          ),
+          h("span", null, "总量")
+        ]
+    )
+  }
+}
+export const barChart1 = {
+  legend: {
+    right: 0,
+    itemHeight: 5,
+    itemWidth: 16,
+    textStyle: { color: '#fff' }
+  },
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+    axisLabel: { color: '#fff' },
+    axisPointer: { show: false }
+  },
+  axisPointer: {
+    type: 'shadow',
+    triggerTooltip: false,
+    shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
+  },
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 187, 255, 1)' },
+        { offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 255, 254, 1)' },
+        { offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(97, 253, 185, 1)' },
+        { offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(253, 108, 57, 1)' },
+        { offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(248, 187, 25, 1)' },
+        { offset: 1, color: 'rgba(55, 39, 5, 1)' }
+      ]
+    }
+  ],
+  daemon: {
+    type: 'bar',
+    label: {
+      show: true,
+      position: 'top',
+      color: '#fff',
+      formatter: e => {
+        return e.data[e.seriesName] || ''
+      }
+    },
+    barWidth: 16,
+    barCategoryGap: 40,
+    itemStyle: {}
+  }
+}