web端产品库 vite版本

project/dv/apps.import.json

@@ -1,4 +0,0 @@
-{
-  "AppGigscreenViewer": "大屏预览组件",
-  "AppDesigner": "大屏设计"
-}

project/dv/apps/AppCentralTaskDV.vue

@@ -1,133 +0,0 @@
-<template>
-  <section class="AppCentralTaskDV">
-    <!--    <ai-dv-background :src="bgImage"/>-->
-    <div class="coreTask">
-      <div class="leftBox">
-        <div class="boxTitle">{{ coreTaskData.titleText }}</div>
-        <dv-scroll-board v-if="refresh" :config="coreTaskData"/>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import {scrollBoard} from '@jiaminghi/data-view'
-import bgImage from '../assets/centralTask/bg.png'
-import Vue from "vue";
-
-Vue.use(scrollBoard)
-export default {
-  name: "AppCentralTaskDV",
-  label: "数据大屏-重点工作",
-  props: {
-    nav: {default: () => ({})}
-  },
-  inject: {
-    dv: {default: ""}
-  },
-  computed: {
-    coreTaskData() {
-      return {
-        headerHeight: 52,
-        header: ['基层组织建设', "社区治理", "便民服务效能", "城市管理"],
-        headerBGC: 'rgba(0, 113, 255, 0.5)',
-        oddRowBGC: "rgba(5, 65, 139, 0.5)",
-        evenRowBGC: "rgba(5, 65, 139, 0.5)",
-        waitTime: 6000,
-        align: ["center", "start", "center", "center"],
-        rowNum: 5,
-        ...this.nav.data,
-      }
-    },
-  },
-  data() {
-    return {bgImage, refresh: true}
-  },
-  watch: {
-    nav: {
-      deep: true,
-      handler() {
-        this.refresh = false
-        this.$nextTick(() => this.refresh = true)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AppCentralTaskDV {
-  height: 100%;
-  padding: 0 0 60px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  .coreTask {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 53px;
-    margin-top: 56px;
-
-    .leftBox {
-      width: 100%;
-      height: 100%;
-      background-image: url("../assets/centralTask/box.png");
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 0 40px 42px;
-      box-sizing: border-box;
-    }
-  }
-
-  .boxTitle {
-    height: 68px;
-    width: 534px;
-    background-image: url("../assets/centralTask/titleBox.png");
-    text-align: center;
-    font-size: 22px;
-    font-weight: 400;
-    color: #71F8FF;
-    transform: translateY(-32px);
-    line-height: 68px;
-  }
-
-  ::v-deep .dv-scroll-board {
-    width: 100%;
-    flex: 1;
-    min-height: 0;
-    border-radius: 6px;
-    overflow: hidden;
-
-    .header {
-      color: #9FDBFB;
-      font-size: 20px;
-
-      .header-item {
-        text-align: center;
-        border: 1px solid #054596;
-      }
-    }
-
-    .row-item {
-      color: #68F0FC;
-      font-size: 18px;
-      overflow: hidden;
-
-      .ceil {
-        border: 1px solid #054596;
-        border-top: none;
-        position: relative;
-        line-height: 30px;
-        white-space: normal;
-        padding: 20px;
-      }
-    }
-  }
-}
-</style>

project/dv/apps/AppGovInteractionDV.vue

@@ -1,479 +0,0 @@
-<template>
-  <section class="AppGovInteractionDV">
-    <el-row type="flex" justify="space-between" align="bottom">
-      <div flex class="framePane column top">
-        <div class="titlePane" v-text="'事件内容'"/>
-        <div class="fill">
-          <dv-scroll-board :config="topLeftData"/>
-        </div>
-      </div>
-      <div class="centerTopPane" id="centerTopPane">
-        <b class="title gradientFont">事件统计</b>
-        <el-row type="flex" justify="space-between" align="middle"
-                v-for="(row,i) in topCenterData" :key="i">
-          <div class="dataPane" v-for="(op,j) in row" :key="j">
-            <span class="gradientFont" v-text="op.label"/>
-            <dv-digital-flop class="gradientFont" :config="op.v1"/>
-          </div>
-        </el-row>
-      </div>
-      <div flex class="framePane column top">
-        <div class="titlePane" v-text="'政务微信群'"/>
-        <div class="totalPane" flex>
-          <div class="dataPanel fill" flex v-for="(op,i) in rightTopData.total" :key="i">
-            <span v-text="op.label"/>
-            <b v-text="op.v1"/>
-          </div>
-        </div>
-        <div class="fill">
-          <ai-echart class="chart" :data="rightTopData.list" :ops="rightTopData.ops"/>
-        </div>
-      </div>
-    </el-row>
-    <div flex class="gap fill">
-      <div flex class="framePane fill column" v-for="c in charts" :key="c.id">
-        <div class="titlePane" v-text="c.label"/>
-        <div class="fill">
-          <ai-echart class="chart" :data="chartData[c.id]" :ops="c.ops"/>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import {digitalFlop, scrollBoard} from '@jiaminghi/data-view'
-import Vue from "vue";
-
-Vue.use(digitalFlop)
-Vue.use(scrollBoard)
-
-export default {
-  name: "AppGovInteractionDV",
-  label: "数据大屏-政民互动",
-  props: {
-    instance: Function
-  },
-  computed: {
-    topCenterData() {
-      let meta = [
-        [{label: "待受理", name: 'pending'}, {label: "累计上报", name: 'total_case'}],
-        [{label: "办理中", name: 'processing'}, {label: "累计受理", name: 'total_accepted'}],
-        [{label: "今日上报", name: "added_today"}, {label: "累计办结", name: 'total_solved'}],
-        [{label: "今日办结", name: 'solved_today'}, {label: "累计办结率", name: 'total_solved_percent'}],
-      ]
-      return meta.map(e => e.map(s => {
-        let v1 = {
-          number: [this.meta.residentCategoryReport?.[s.name] || 0],
-          style: {
-            fontFamily: 'dineng',
-            fontWeight: 'bold',
-            fontSize: 40,
-            gradientType: 'linear',
-            gradientColor: ['#fff', '#fff', '#6BC7FF'],
-            gradientParams: [0, 0, 0, 40],
-            gradientWith: 'fill',
-            gradientStops: [0, .18, 1]
-          }
-        }
-        if (s.name == 'total_solved_percent') {
-          v1 = {
-            ...v1,
-            number: [v1.number * 100], content: '{nt}%'
-          }
-        }
-        return {...s, v1}
-      }))
-    },
-    topLeftData() {
-      let statusColor = {
-            0: 'doing',
-            1: 'done',
-            2: 'pending',
-          },
-          statusLabel = {
-            0: '处理中',
-            1: '已处理'
-          },
-          list = this.meta.residentOrderList?.map(e => {
-            let status = e.process_list.slice(-1)?.[0]?.status
-            return {
-              ...e, status, statusLabel: statusLabel[status]
-            }
-          })
-      return {
-        oddRowBGC: 'transparent',
-        evenRowBGC: 'transparent',
-        rowNum: 10,
-        data: list?.map(e => [`
-          <div flex class="eventItem">
-            <span class="tag ${statusColor[e.status]}">${e.statusLabel}</span>
-            <div class="fill">${e.desc}</div>
-          </div>`]) || []
-      }
-    },
-    rightTopData() {
-      let obj = this.meta.groupMap?.list || {},
-          list = Object.keys(obj).map(e => {
-            let {total, increase, decrease} = obj?.[e],
-                time = this.$moment(e).format('MM-DD')
-            return {time, total, increase, decrease}
-          })
-      return {
-        total: [
-          {label: '群聊总数', v1: this.meta.groupMap?.groupSum || 0},
-          {label: '群成员数', v1: this.meta.groupMap?.today?.total || 0},
-        ],
-        ops: {
-          color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)', 'rgba(255, 215, 109, 0.2)'],
-          legend: {
-            itemWidth: 16,
-            itemHeight: 16,
-            textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
-            icon: 'rect',
-            itemGap: 40
-          },
-          tooltip: {},
-          xAxis: {
-            type: 'category', axisTick: false,
-            nameGap: 20,
-            axisLabel: {color: '#fff'},
-            axisLine: {lineStyle: {color: '#263763'}}
-          },
-          // 声明一个 Y 轴，数值轴。
-          yAxis: {
-            nameGap: 30, minInterval: 1,
-            splitLine: {lineStyle: {color: '#263763'}},
-            axisLabel: {color: 'rgba(255,255,255,.8)'}
-          },
-          series: [
-            {
-              type: 'line', name: "群成员数", symbol: 'none', lineStyle: {color: '#36A5FF', borderWidth: 1},
-              itemStyle: {borderColor: '#36A5FF', borderWidth: 1},
-            },
-            {
-              type: 'line', name: "新增人数", symbol: 'none', lineStyle: {color: '#1CD444', borderWidth: 1},
-              itemStyle: {borderColor: '#1CD444', borderWidth: 1},
-            },
-            {
-              type: 'line', name: "退群人数", symbol: 'none', lineStyle: {color: '#FFD76D', borderWidth: 1},
-              itemStyle: {borderColor: '#FFD76D', borderWidth: 1},
-            }
-          ],
-          grid: {left: 60, bottom: 58, right: 20}
-        },
-        list
-      }
-    },
-    chartData() {
-      return {
-        EventType: this.meta.residentCategoryReportList?.map(e => {
-          let {category_name: name, total_case, total_solved} = e
-          return {name, total_case, total_solved}
-        }) || [],
-        EventSource: this.meta.unitReportList?.map(e => {
-          let {grid_name: name, total_case, total_solved} = e
-          return {name, total_case, total_solved}
-        }) || []
-      }
-    },
-  },
-  data() {
-    return {
-      charts: [
-        {
-          label: "事件类型", id: "EventType", ops: {
-            color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)'],
-            legend: {
-              itemWidth: 16,
-              itemHeight: 16,
-              textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
-              icon: 'rect',
-              itemGap: 40
-            },
-            tooltip: {},
-            xAxis: {
-              type: 'category', nameGap: 20, axisTick: false,
-              axisLabel: {color: '#fff'},
-              axisLine: {lineStyle: {color: '#263763'}}
-            },
-            // 声明一个 Y 轴，数值轴。
-            yAxis: {
-              nameGap: 23, minInterval: 1,
-              splitLine: {lineStyle: {color: '#263763'}},
-              axisLabel: {color: 'rgba(255,255,255,.8)'}
-            },
-            series: [
-              {
-                type: 'bar',
-                name: "累计受理",
-                barWidth: 10,
-                barGap: '20%',
-                itemStyle: {borderColor: '#36A5FF', borderWidth: 1}
-              },
-              {
-                type: 'bar',
-                name: "累计办结",
-                barWidth: 10,
-                barGap: '20%',
-                itemStyle: {borderColor: '#1CD444', borderWidth: 1}
-              }
-            ],
-            grid: {left: 40, bottom: 58, right: 20}
-          }
-        },
-        {
-          label: "上报来源", id: "EventSource", ops: {
-            color: ['rgba(54, 165, 255, 0.2)', 'rgba(28, 212, 68, 0.2)'],
-            legend: {
-              itemWidth: 16,
-              itemHeight: 16,
-              textStyle: {color: '#82C5FF', padding: [0, 0, 0, 8], fontSize: 14},
-              icon: 'rect',
-              itemGap: 40
-            },
-            tooltip: {},
-            xAxis: {
-              type: 'category', axisTick: false,
-              nameGap: 20,
-              axisLabel: {color: '#fff'},
-              axisLine: {lineStyle: {color: '#263763'}}
-            },
-            // 声明一个 Y 轴，数值轴。
-            yAxis: {
-              nameGap: 30, minInterval: 1,
-              splitLine: {lineStyle: {color: '#263763'}},
-              axisLabel: {color: 'rgba(255,255,255,.8)'}
-            },
-            series: [
-              {
-                type: 'line', name: "事件数", symbol: 'none', lineStyle: {color: '#36A5FF', borderWidth: 1},
-                itemStyle: {borderColor: '#36A5FF', borderWidth: 1, show: false},
-                areaStyle: {
-                  color: {
-                    type: 'linear', x2: 0, y2: 1, colorStops: [
-                      {offset: 0, color: 'rgba(37, 161, 255, 0.5)'}, {offset: 1, color: 'rgba(37, 161, 255, 0)'}]
-                  }
-                }
-              },
-              {
-                type: 'line', name: "办理数", symbol: 'none', lineStyle: {color: '#1CD444', borderWidth: 1},
-                itemStyle: {borderColor: '#1CD444', borderWidth: 1, show: false},
-                areaStyle: {
-                  color: {
-                    type: 'linear', x2: 0, y2: 1, colorStops: [
-                      {offset: 0, color: 'rgba(37, 206, 55, 0.5)'}, {offset: 1, color: 'rgba(37, 206, 55, 0)'}]
-                  }
-                }
-              }
-            ],
-            grid: {left: 40, bottom: 58, right: 20}
-          }
-        },
-      ],
-      meta: {},
-    }
-  },
-  methods: {
-    getData() {
-      this.instance.post("/app/statistics/governmentPeople/queryResidentReport").then(res => {
-        if (res?.data) this.meta = res.data
-      })
-    },
-  },
-  created() {
-    this.getData()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AppGovInteractionDV {
-  height: 100%;
-  padding: 6px 0 10px;
-  gap: 20px;
-  font-size: 16px;
-  color: #82C5FF;
-  display: flex;
-  flex-direction: column;
-
-
-  ::v-deep .eventItem {
-    width: 100%;
-    color: #82C5FF;
-
-    & > .fill {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ::v-deep .communityEvent {
-    list-style-type: circle;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    height: 40px;
-    line-height: 40px;
-    padding-left: 1px;
-    color: #82C5FF;
-  }
-
-  ::v-deep .tag {
-    padding: 0 10px;
-    border-radius: 4px;
-    margin-right: 10px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #fff;
-    box-sizing: border-box;
-
-    &.doing {
-      background-image: radial-gradient(rgba(#1B1BD6, .4), #208FFF);
-    }
-
-    &.pending {
-      background-image: radial-gradient(rgba(#FF9333, .4), #FFE959);
-    }
-
-    &.done {
-      background-image: radial-gradient(rgba(#1BD622, .4), #2CFF7C);
-    }
-  }
-
-  .centerTopPane {
-    background-image: url("../assets/govInteraction/globe_map.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 540px;
-    width: 940px;
-    flex-shrink: 0;
-    position: relative;
-    padding: 30px 50px 50px;
-    box-sizing: border-box;
-
-    .title {
-      font-size: 60px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    ::v-deep .gradientFont {
-      background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 18%, #6BC7FF 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .el-row {
-      &:first-of-type, &:last-of-type {
-        margin: 0 110px;
-      }
-    }
-
-    ::v-deep .dataPane {
-      width: 122px;
-      height: 114px;
-      background-image: url("../assets/govInteraction/kuaikuai.png");
-      background-repeat: no-repeat;
-      background-size: 100% 80px;
-      background-position: bottom center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      font-weight: bold;
-
-      & > b {
-        font-size: 50px;
-        line-height: 50px;
-
-        span {
-          font-weight: normal;
-          font-size: 32px;
-        }
-      }
-
-      & > span {
-        font-size: 18px;
-        line-height: 18px;
-      }
-    }
-  }
-
-  .framePane {
-    width: 100%;
-    height: 100%;
-    background: rgba(7, 11, 35, 0.4);
-    border: 1px solid #14345F;
-    display: flex;
-    flex-direction: column;
-
-    &.top {
-      width: 440px;
-      height: 520px;
-    }
-
-    & > .fill {
-      width: 100%;
-      height: 100%;
-      padding: 20px;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-  }
-
-  .titlePane {
-    width: 100%;
-    background-image: url("../assets/govInteraction/title.png");
-    background-repeat: no-repeat;
-    background-size: 309px 100%;
-    height: 60px;
-    padding-left: 30px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 48px;
-  }
-
-  .chart {
-    width: 100%;
-  }
-
-  .el-image {
-    width: 100%;
-    height: 100%;
-  }
-
-  .totalPane {
-    width: 100%;
-
-    .dataPanel {
-      height: 60px;
-      background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
-      border-radius: 4px;
-      padding: 0 10px;
-      font-size: 16px;
-      justify-content: space-between;
-      margin-left: 20px;
-
-      & > span {
-        white-space: nowrap;
-      }
-
-      & > b {
-        font-size: 24px;
-        color: #fff;
-        font-family: Arial-BoldMT, Arial, serif;
-      }
-
-      &:last-of-type {
-        margin-right: 20px;
-      }
-    }
-  }
-
-
-}
-</style>

project/dv/apps/AppGridDV.vue

@@ -1,878 +0,0 @@
-<template>
-  <div class="griddv">
-    <div class="left">
-      <div class="griddv-title">
-        <h2>网格列表</h2>
-      </div>
-      <div class="griddv-tree">
-        <el-tree
-          :data="treeList"
-          :props="defaultProps"
-          @node-click="handleNodeClick"
-          node-key="id"
-          ref="tree"
-          default-expand-all
-          :expand-on-click-node="false"
-          highlight-current>
-        </el-tree>
-      </div>
-    </div>
-    <div class="middle" :class="[girdLevel == '2' ? 'middle-active' : '']" ref="container" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
-      <div
-        ref="middleTree"
-        id="tree"
-        class="tree"
-        :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
-        <VueOkrTree
-          ref="VueOkrTree"
-          :data="chartData"
-          node-key="id"
-          show-collapsable
-          aniamte
-          animate-name="okr-fade-in-linear"
-          :render-content="renderContent"
-          default-expand-all>
-        </VueOkrTree>
-      </div>
-    </div>
-    <div class="right">
-      <div class="right-top">
-        <div class="griddv-title">
-          <h2>网格内人员情况</h2>
-        </div>
-        <div class="right-chart">
-          <ai-echart
-            style="height: 100%; width: 100%;"
-            :data="userInfo"
-            :ops="barChart1">
-          </ai-echart>
-        </div>
-      </div>
-      <div class="right-bottom">
-        <div class="griddv-title">
-          <h2>事件上报情况</h2>
-        </div>
-        <div class="right-chart">
-          <ai-echart
-            style="height: 100%; width: 100%;"
-            :data="eventInfo"
-            :ops="pieChart">
-          </ai-echart>
-        </div>
-      </div>
-    </div>
-    <el-dialog :visible.sync="isShowInfo" width="640px" :close-on-click-modal="false" :modal-append-to-body="false">
-      <template slot="title">
-        <h2>家庭信息</h2>
-        <img src="../assets/grid/close.png" @click="isShowInfo = false">
-      </template>
-      <div class="grid-info">
-        <div class="grid-info__title">
-          <h2>家庭地址</h2>
-          <span>{{ residentInfo.currentAreaName }}</span>
-        </div>
-        <ai-table
-          v-if="tableData.length"
-          style="width: 558px"
-          :tableData="tableData"
-          :col-configs="colConfigs"
-          :total="total"
-          :isShowPagination="false"
-          :current.sync="search.current"
-          :size.sync="search.size"
-          @getList="() => {}">
-        </ai-table>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-  import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
-  import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
-  import { VueOkrTree } from 'vue-okr-tree'
-  import 'vue-okr-tree/dist/vue-okr-tree.css'
-
-  export default {
-    name: 'AppGridDV',
-
-    label: '网格数据大屏',
-
-    props: {
-      instance: Function,
-      dict: Object,
-    },
-
-    data () {
-      return {
-        isLoading: false,
-        treeList: [],
-        search: {
-          size: 100,
-          current: 1
-        },
-        barChart1,
-        userInfo: [],
-        eventInfo: [],
-        pieChart,
-        total: 0,
-        isShowInfo: false,
-        defaultProps: {
-          children: 'girdList',
-          label: 'girdName',
-        },
-        colConfigs: [
-          { prop: 'name',  label: '姓名', align: 'center', width: 120 },
-          {
-            prop: 'householdRelation',
-            label: '与户主关系',
-            align: 'center',
-            render: (h, {row}) => {
-              return h('span', {
-                style: {
-                  color: row.householdName === '1' ? '#1DE94D' : '#A8D7F3'
-                }
-              }, row.householdName === '1' ? '户主' : (this.dict.getLabel('householdRelation', row.householdRelation) || '-'))
-            },
-            formart: v => this.dict.getLabel('householdRelation', v)
-          },
-          { prop: 'idNumber', label: '身份证号', align: 'center', width: 220, formart: v => v ? v.replace(/^(\d{10})\d{4}(.{4}$)/g, `$1${Array(5).join('*')}$2`) : '-' },
-          { prop: 'phone', label: '联系方式', align: 'center' }
-        ],
-        girdId: '',
-        residentInfo: {},
-        tableData: [],
-        chartData: [],
-        girdLevel: '0',
-        scale: 1,
-        x: '50%',
-        y: '50%',
-        offsetX: 0,
-        offsetY: 0,
-        defaultUrl: 'https://cdn.cunwuyun.cn/dvcp/dv/avatar.png'
-      }
-    },
-
-    components: {
-      VueOkrTree
-    },
-
-    created () {
-      this.dict.load('householdRelation')
-      this.getTreeList()
-      this.getGirdInfo()
-    },
-
-    mounted () {
-      this.bindEvent()
-    },
-
-    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
-      },
-
-      debounce (func, wait = 1000) {
-        let timeout
-        return function (event) {
-          clearTimeout(timeout)
-          timeout = setTimeout(() => {
-            func.call(this, event)
-          },wait)
-        }
-      },
-
-      handleNodeClick (e) {
-        this.girdLevel = e.girdLevel
-        this.isLoading = true
-        this.getGirdInfo(e.id, e.girdLevel)
-        this.getStatisticsInfo(e.id)
-      },
-
-      getStatisticsInfo (id) {
-        this.instance.post(`/app/appgirdmemberinfo/girdMemberAndResidentStatistic?girdId=${id}`).then((res) => {
-          if (res.code == 0) {
-            this.userInfo = [
-              {
-                'name': '网格长',
-                '人数': res.data['网格长'] || 0
-              },
-              {
-                'name': '网格员',
-                '人数': res.data['网格员'] || 0
-              },
-              {
-                'name': '责任家庭数',
-                '人数': res.data['责任家庭数'] || 0
-              }
-            ]
-          }
-        })
-
-        this.instance.post(`/app/appclapeventinfo/clapEventStatistic?girdId=${id}`).then((res) => {
-          if (res.code == 0) {
-            this.eventInfo = Object.keys(res.data).map(v => {
-              return {
-                '事件类型': v,
-                v1: res.data[v]
-              }
-            })
-          }
-        })
-      },
-
-      renderContent (h, node) {
-        return h('div', {
-          class: 'userlist-container'
-        }, [h('div', {
-          class: `userlist ${node.data.label === '子节点' ? 'last-level' : ''} ${node.data.girdLevel > 1 ? 'userlist-wrapper' : ''} userlist-${node.data.girdLevel}`
-        }, node.data.userList.map(v => {
-          return h('div', {
-            class: `user-item user-item-${v.girdLevel}`
-          }, [h('img', {
-            class: 'user-img',
-            attrs: {
-              src: v.photo || this.defaultUrl
-            },
-            on: {
-              dragstart: e => {
-                e.preventDefault()
-                e.stopPropagation()
-                return false
-              }
-            }
-          }), h('p', {
-            class: 'user-p',
-            attrs: {
-              title: v.label,
-              'data-id': v.id
-            },
-            on: {
-              click: () => {
-                if (node.data.label === '子节点') {
-                  this.getResidentInfo(v.id)
-                }
-              }
-            }
-          }, v.label), h('span', {
-            class: 'user-span',
-            style: {
-              display: v.girdLevel === '2' ? 'block' : 'none',
-              fontSize: v.girdLevel === '2' ? '12px' : ''
-            }
-          }, v.checkType ? (v.checkType === '1' ? '网格员' : '网格长') :'-')])
-        })), h('div', {
-          class: 'user-gridName',
-          style: {
-            display: node.data.label === '子节点' ? 'none' : 'block',
-            color: 'rgba(255, 255, 255, 0.8)',
-            fontSize: '12px',
-            margin: '4px 0'
-          }
-        }, node.data.label)])
-      },
-
-      getResidentInfo (id) {
-        this.isLoading = true
-        this.instance.post(`/app/appresident/detail?id=${id}`).then((res) => {
-          if (res.code == 0) {
-            this.residentInfo.resident = res.data
-            this.tableData = res.data.family || []
-            this.isShowInfo = true
-          }
-
-          this.isLoading = false
-        })
-      },
-
-      autoScale () {
-        const treeWidth = this.$refs.middleTree.offsetWidth
-        const containerWidth = this.$refs.container.offsetWidth
-        this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
-        this.x = '50%'
-        this.y = '50%'
-      },
-
-      getGirdInfo (id, level) {
-        this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
-          if (res.code == 0) {
-            const chartData = this.formatList(res.data)
-            if (res.data && res.data[0] && res.data[0].parentGirdInfo) {
-              const parentGirdInfo = res.data[0].parentGirdInfo
-              const girdMemberList = parentGirdInfo.girdMemberManageList ? parentGirdInfo.girdMemberManageList.map(v => {
-                return {
-                  ...v,
-                  label: v.name,
-                  id: v.id,
-                  checkType: '2',
-                  girdName: parentGirdInfo.girdName,
-                  girdLevel: parentGirdInfo.girdLevel,
-                  isUser: true
-                }
-              }) : [{
-                label: '-',
-                id: parentGirdInfo.id,
-                girdLevel: parentGirdInfo.girdLevel,
-                girdName: parentGirdInfo.girdName
-              }]
-              this.chartData = [{
-                label: parentGirdInfo.girdName,
-                id: parentGirdInfo.id,
-                girdLevel: parentGirdInfo.girdLevel,
-                isUser: false,
-                children: chartData,
-                userList: girdMemberList
-              }]
-            } else {
-              this.chartData = chartData
-            }
-
-            this.$nextTick(() => {
-              if (level === '2') {
-                this.getUserList(id)
-              } else {
-                this.isLoading = false
-                this.autoScale()
-              }
-            })
-          }
-        })
-      },
-
-      getUserList (id) {
-        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
-          params: {
-            size: 1000,
-            girdId: id
-          }
-        }).then(res => {
-          if (res.code == 0) {
-            const userList = res.data.records.map(v => {
-              return {
-                ...v,
-                isLast: true,
-                label: v.name
-              }
-            })
-            
-            this.isLoading = false
-
-            if (!userList.length) {
-              this.autoScale()
-              return false
-            }
-
-            const node = this.$refs.VueOkrTree.getNode(id)
-            this.$refs.VueOkrTree.append({
-              id: new Date().getTime(),
-              label: '子节点',
-              userList: userList || []
-            }, node)
-            this.$nextTick(() => {
-              this.autoScale()
-            })
-          }
-        })
-      },
-
-      formatList (list) {
-        return list.map(item => {
-          let userList = []
-          const girdMemberManageList = item.girdMemberManageList ? item.girdMemberManageList.map(v => {
-            return {
-              ...v,
-              label: v.name,
-              id: v.id,
-              checkType: '2',
-              girdName: item.girdName,
-              girdLevel: item.girdLevel,
-              isUser: true
-            }
-          }) : []
-          const girdMemberList = item.girdMemberList ? item.girdMemberList.map(v => {
-            return {
-              ...v,
-              label: v.name,
-              id: v.id,
-              checkType: '1',
-              girdName: item.girdName,
-              girdLevel: item.girdLevel,
-              isUser: true
-            }
-          }) : []
-
-          if (this.girdLevel === '2' && item.girdLevel === '2' && girdMemberList.length) {
-            userList = girdMemberManageList
-            item.girdList = [{
-              girdLevel: '2',
-              id: item.id,
-              isUser: false,
-              userList: girdMemberList,
-              label: item.girdName,
-              children: []
-            }]
-          } else {
-            userList = [...girdMemberManageList, ...girdMemberList]
-          }
-          if (!userList.length) {
-            userList = [{
-              label: '-',
-              id: item.id,
-              girdLevel: item.girdLevel,
-              girdName: item.girdName
-            }]
-          }
-
-          const obj = {
-            label: item.girdName,
-            id: `${new Date().getTime()}-${item.id}`,
-            girdLevel: item.girdLevel,
-            isUser: false,
-            userList: userList,
-            children: item.girdList || []
-          }
-
-          if (obj.children && obj.children.length && this.girdLevel !== '2') {
-            obj.children = this.formatList(obj.children)
-          }
-
-          return obj
-        })
-      },
-
-      getTreeList () {
-        this.instance.post('/app/appgirdinfo/listAll').then((res) => {
-          if (res.code == 0) {
-            this.treeList = [...res.data]
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(res.data[0].id)
-              this.getStatisticsInfo(res.data[0].id)
-            })
-          }
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .griddv {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    user-select: none;
-
-    ::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    ::-webkit-scrollbar-track {
-      border-radius: 5px;
-      background: rgba(93, 163, 255, 0.1);
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-      background: rgba(173, 208, 255, 0.5);
-    }
-
-    .grid-info {
-      width: 100%;
-      .grid-info__title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-
-        h2, span {
-          color: #fff;
-          font-size: 14px;
-          font-weight: 500;
-        }
-      }
-    }
-
-    ::v-deep .el-dialog__body {
-      padding: 10px 40px 30px;
-
-      .el-table {
-        background-color: transparent;
-      }
-      
-      .el-table__body tr td:first-child .cell, .ai-table .el-table__header tr th:first-child .cell {
-        padding-left: 0!important;
-      }
-
-      .el-table th, .el-table tr {
-        color: #fff;
-        font-size: 14px;
-        background-color: rgba(28, 39, 65, 0.9);
-      }
-
-      .el-table__row--striped, .el-table--striped .el-table__body tr.el-table__row--striped td {
-        background-color: transparent!important;
-      }
-
-      .el-table__header-wrapper {
-        display: none;
-      }
-
-      .el-table--enable-row-hover .el-table__body tr:hover > td, .el-table-filter {
-        background-color: transparent;
-      }
-    }
-
-    ::v-deep .el-dialog {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin: 0!important;
-      transform: translate(-50%, -50%);
-      background: rgba(2, 13, 43, 0.9);
-      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 10px 0px #2C7CFF;
-      border: 1px solid #2D65C9;
-
-      .el-dialog__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background: transparent;
-        box-shadow: none;
-
-        h2 {
-          color: #fff;
-          font-size: 18px;
-        }
-
-        img {
-          cursor: pointer;
-          width: 16px;
-          height: 16px;
-
-          &:hover {
-            opacity: 0.6;
-          }
-        }
-      }
-
-      .el-dialog__headerbtn {
-        display: none;
-      }
-    }
-
-    ::v-deep .userlist-container{
-      .userlist {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 10px;
-        background: rgba(76, 166, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-
-        .user-item {
-          margin-right: 10px;
-          color: #fff;
-          font-size: 0;
-
-          &:last-child {
-            margin-right: 0;
-          }
-
-          img {
-            width: 58px;
-            height: 80px;
-            object-fit: cover;
-            user-select: none;
-          }
-
-          p {
-            max-width: 120px;
-            margin: 4px 0 0 0;
-            font-size: 19px;
-            text-align: center;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-          }
-
-          span {
-            display: block;
-            max-width: 120px;
-            font-size: 17px;
-            color: #9DD3FF;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-          }
-
-          &.user-item-0 {
-            img {
-              width: 86px;
-              height: 120px;
-            }
-          }
-
-          &.user-item-2 {
-            p {
-              line-height: 14px;
-              font-size: 12px;
-              margin-bottom: 4px;
-            }
-            span {
-              line-height: 14px;
-            }
-            img {
-              width: 40px;
-              height: 56px;
-            }
-          }
-        }
-
-        &.userlist-2 {
-          justify-content: space-between;
-          max-width: 130px;
-          flex-wrap: wrap;
-          padding-bottom: 0;
-          width: fit-content;
-          margin: 0 auto;
-
-          .user-item {
-            width: 48px;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-            margin-bottom: 10px;
-          
-            &:nth-of-type(2n) {
-              margin-right: 0;
-            }
-          }
-        }
-
-        &.last-level {
-          flex-wrap: wrap;
-          max-width: 690px;
-          font-size: 0;
-          background: rgba(0, 0, 0, 0.1);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          padding: 12px 12px 0 12px;
-          box-sizing: border-box;
-
-          .user-item {
-            margin-bottom: 12px;
-          }
-
-          img {
-            display: none;
-          }
-
-          p {
-            padding: 8px;
-            font-size: 12px;
-            background: #0B477D;
-            border-radius: 4px;
-          }
-
-          span {
-            display: none!important;
-          }
-        }
-      }
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    .griddv-title {
-      display: flex;
-      width: 320px;
-      height: 62px;
-      background-image: url(../assets/grid/title-bg.png);
-      background-size: 100% 100%;
-
-      h2 {
-        width: 100%;
-        height: 50px;
-        line-height: 50px;
-        padding-left: 24px;
-        font-weight: 600;
-        font-size: 20px;
-        letter-spacing: 1px;
-        color: #fff;
-      }
-    }
-
-    & > div {
-      height: 100%;
-    }
-
-    .right {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-      width: 440px;
-      margin-left: 20px;
-
-      & > div {
-        flex: 1;
-        width: 100%;
-        padding-bottom: 20px;
-        background: rgba(7, 11, 35, 0.4);
-        border: 1px solid #2D50B5;
-        box-sizing: border-box;
-
-        .right-chart {
-          height: calc(100% - 82px);
-          padding: 0 20px;
-        }
-
-        &:last-child {
-          margin-top: 20px;
-        }
-      }
-    }
-
-    .middle {
-      position: relative;
-      flex: 1;
-      margin-left: 20px;
-      background: rgba(7, 11, 35, 0.4);
-      border: 1px solid #2D50B5;
-      overflow: hidden;
-
-      #tree {
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        left: 50%;
-        top: 50%;
-        padding: 20px;
-        overflow: hidden;
-        width: max-content;
-        height: 300%;
-      }
-
-      ::v-deep .org-chart-container {
-        display: flex;
-        justify-content: center;
-
-        .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: #9CD7FF!important;
-        }
-
-        .vertical .org-chart-node:after, .vertical .org-chart-node:before {
-          border-radius: 0;
-          border-color: #9CD7FF!important;
-        }
-
-        .org-chart-node-label-inner {
-          padding: 0!important;
-        }
-
-        .org-chart-node-btn {
-          margin-left: 0;
-          transform: translateX(-50%);
-        }
-
-        .org-chart-node {
-          // max-width: 500px;
-        }
-      }
-
-      ::v-deep .org-chart-node-children {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    .left {
-      width: 320px;
-      background: rgba(7, 11, 35, 0.4);
-      border: 1px solid #2D50B5;
-
-      .griddv-tree {
-        height:  calc(100% - 62px);
-        overflow-y: auto;
-        margin: 0 8px;
-        padding-bottom: 8px;
-      }
-
-      ::v-deep .el-tree {
-        background: transparent;
-
-        .el-tree-node__expand-icon {
-          color: #eaeff9;
-        }
-
-        .el-tree-node__expand-icon.is-leaf {
-          color: transparent;
-        }
-
-        .el-tree-node__content {
-          height: 32px;
-          color: #eaeff9;
-          font-size: 14px;
-          user-select: none;
-          font-weight: normal!important;
-          background: transparent;
-        }
-
-        .is-current > .el-tree-node__content, .el-tree-node__content:hover {
-          background: linear-gradient(270deg, #4895D9 0%, #2D52CA 100%);
-        }
-      }
-    }
-  }
-</style>

project/dv/apps/AppVideoMonitoringDV.vue

@@ -1,522 +0,0 @@
-<template>
-  <section class="AppVideoMonitoringDV">
-    <el-row type="flex" justify="space-between" class="body">
-      <div class="left-wrap column" flex>
-        <div class="left-top fill">
-          <label class="label">设备统计</label>
-          <dv-scroll-board :header="config.header" :config="config" class="table"/>
-        </div>
-        <div class="left-bottom">
-          <label class="label">电子地图</label>
-          <ai-map :areaId="user.info.areaId"/>
-        </div>
-      </div>
-      <div class="center-wrap column" flex>
-        <div flex style="width: 100%">
-          <div :span="6" class="card fill" v-for="(item,index) in cardList" :key="index">
-            <span>{{ item.label }}</span>
-            <span>{{ item.value }}</span>
-          </div>
-        </div>
-        <div class="center-bottom fill">
-          <label class="label">视频监控</label>
-          <div class="video-wrap">
-            <div class="item" v-for="(item,index) in videoData.slice(0,2)"
-                 :key="index">
-              <template v-if="flag">
-                <iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
-                        allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
-              </template>
-              <template v-else>
-                <div class="video"></div>
-              </template>
-              <div class="info">
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="video-wrap">
-            <div class="item" v-for="(item,index) in videoData.slice(2,4)"
-                 :key="index">
-              <template v-if="flag">
-                <iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
-                        allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
-              </template>
-              <template v-else>
-                <div class="video"></div>
-              </template>
-              <div class="info">
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="right-wrap column" flex>
-        <div class="right-top fill">
-          <label class="label">人员统计</label>
-          <label class="total">人员总数
-            <span>0</span>
-            <span>人</span>
-          </label>
-          <dv-scroll-board :config="config1" class="total-table"/>
-        </div>
-        <div class="right-middle">
-          <label class="label">动作告警统计</label>
-          <div class="tag">
-            <span></span>
-          </div>
-          <ai-echart :ops="getOpt()"/>
-          <div class="info">
-            今日
-            <span>0</span>
-            <span>次</span>
-            本月
-            <span>0</span>
-            <span>次</span>
-          </div>
-        </div>
-        <div class="right-bottom">
-          <label class="label">声音告警统计</label>
-          <div class="tag">
-            <span></span>
-          </div>
-          <ai-echart :ops="getOpt('1')"/>
-          <div class="info">
-            今日
-            <span style="color:#00FFDF">0</span>
-            <span>次</span>
-            本月
-            <span style="color:#00FFDF">0</span>
-            <span>次</span>
-          </div>
-        </div>
-      </div>
-    </el-row>
-  </section>
-</template>
-
-<script>
-import {mapState} from "vuex";
-import Vue from "vue";
-import {scrollBoard} from "@jiaminghi/data-view";
-
-Vue.use(scrollBoard)
-export default {
-  name: "AppVideoMonitoringDV",
-  label: "数据大屏-平安小区",
-  inject: {
-    dv: {default: ""}
-  },
-  props: {
-    instance: Function
-  },
-  computed: {
-    ...mapState(['user']),
-    cardList() {
-      return [
-        {label: "总设备数", value: "0"},
-        {label: "在线设备", value: "0"},
-        {label: "离线设备", value: "0"},
-        {label: "设备在线率", value: "0%"},
-      ]
-    },
-  },
-  data() {
-    return {
-      meta: {},
-      config: {
-        data: [
-        ],
-        columnWidth: [60, 140],
-        header: ["机构", "设备在线率"],
-        headerBGC: '',
-        headerHeight: 41,
-        oddRowBGC: "",
-        evenRowBGC: "",
-        align: ["center", "center", "center"],
-        rowNum: 10,
-        index: true,
-        indexHeader: "排名"
-      },
-      config1: {
-        data: [
-          ['普通用户', '-'],
-          ['村级管理员', '-'],
-          ['超级管理员', '-'],
-          ['测试', '-'],
-        ],
-        headerHeight: 41,
-        oddRowBGC: "",
-        evenRowBGC: "",
-        align: ["left", "left", "right"],
-        index: true,
-        rowNum: 6,
-        columnWidth: [50]
-      },
-      start: 0,
-      end: 40,
-      start1: 0,
-      end1: 40,
-      interval: null,
-      videoData: [],
-      flag: false,
-    }
-  },
-  methods: {
-    jsonObj(val) {
-      return JSON.parse(val || "{}")?.url
-    },
-    getOpt(type = "0") {
-      let opt = {
-        "0": {
-          xData: ['2020/7/1', "2020/7/2", "2020/7/3", "2020/7/4", "2020/7/5", "2020/7/6", "2020/7/7", "2020/7/8", "2020/7/9", "2020/7/10", "2020/7/11"],
-          yData: Array(11).fill(0),
-          color: "#FFEA2F",
-          areaStyle: 'rgba(255,234,47,0.2)',
-          unit: '',
-        },
-        "1": {
-          xData: ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00"],
-          yData: Array(10).fill(0),
-          color: "#13B5B1",
-          areaStyle: 'rgba(255,234,47,0.2)',
-          unit: '次',
-        },
-      }
-      return {
-        grid: {
-          top: "5%",
-          left: "16%",
-          right: "3%",
-          bottom: "12%"
-        },
-        xAxis: {
-          show: true,
-          boundaryGap: false,
-          type: 'category',
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: "#5E9CEA",
-              fontSize: 12
-            }
-          },
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          data: opt[type]["xData"]
-        },
-        yAxis: {
-          type: 'value',
-          show: true,
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: ['#103066'],
-            }
-          },
-          axisLabel: {
-            show: true,
-            formatter: (val) => `${val}${opt[type]["unit"]}`,
-            textStyle: {
-              color: "#5E9CEA",
-              fontSize: 12
-            }
-          },
-        },
-        series: [{
-          symbol: "none",
-          data: opt[type]["yData"],
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: opt[type]["color"],
-              areaStyle: {
-                color: {
-                  type: 'linear', x2: 0, y2: 1, colorStops: [
-                    {offset: 0, color: opt[type]["areaStyle"]}, {offset: 1, color: '#000000'}]
-                }
-              }
-            }
-          }
-        }]
-      }
-    },
-    getWebSdkUrlForScreen() {
-      this.instance.post(`/app/appzyvideoequipment/getWebSdkUrlForTianQiaoScreen`).then(res => {
-        if (res.code == 0) {
-          this.videoData = res.data
-          this.flag = true
-        }
-      })
-    }
-  },
-  beforeDestroy() {
-    this.interval && clearInterval(this.interval);
-  },
-  mounted() {
-    // this.getWebSdkUrlForScreen()
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.AppVideoMonitoringDV {
-  height: 100%;
-  padding: 6px 0 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  .body {
-    height: 100%;
-
-    .left-wrap {
-      width: 307px;
-      height: 100%;
-
-      .left-top {
-        width: 100%;
-        background-image: url("../assets/videoMonitor/box1.png");
-        background-size: 100% 100%;
-        position: relative;
-        overflow: hidden;
-
-        .table {
-          box-sizing: border-box;
-          padding: 63px 17px 17px;
-        }
-      }
-
-      .left-bottom {
-        width: 100%;
-        height: 311px;
-        background-image: url("../assets/videoMonitor/box2.png");
-        background-size: 100% 100%;
-        margin-top: 7px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-
-        .AiMap {
-          width: 274px;
-          height: 247px;
-          margin-top: 40px;
-        }
-      }
-    }
-
-    .center-wrap {
-      width: 1183px;
-      height: 100%;
-
-      .card {
-        height: 93.3px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-image: url("../assets/videoMonitor/card.png");
-        background-size: 100% 100%;
-        margin-right: 24px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-
-        & > span:first-child {
-          font-size: 20px;
-          font-weight: 400;
-          color: #FFFFFF;
-        }
-
-        & > span:last-child {
-          font-size: 38px;
-          font-family: dineng, serif;
-          font-weight: bold;
-          color: #00EDFF;
-          margin-left: 13px;
-        }
-      }
-
-      .center-bottom {
-        width: 100%;
-        height: 789px;
-        background-image: url("../assets/videoMonitor/middlebox.png");
-        background-size: 100% 100%;
-        margin-top: 40px;
-        position: relative;
-        box-sizing: border-box;
-        padding: 61px;
-
-        .video-wrap {
-          width: 100%;
-          height: 344px;
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 12px;
-
-          .item {
-            .video {
-              width: 522px;
-              height: 296px;
-              object-fit: fill;
-              vertical-align: bottom;
-              border: 2px solid #122C7D;
-            }
-
-            .info {
-              height: 48px;
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              box-sizing: border-box;
-              padding: 0 12px;
-              background-color: #071153;
-              font-size: 14px;
-              color: #FFFFFF;
-            }
-          }
-        }
-      }
-    }
-
-    .right-wrap {
-      width: 297px;
-      height: 100%;
-
-      .right-top {
-        width: 100%;
-        height: 333px;
-        background-image: url("../assets/videoMonitor/box3.png");
-        background-size: 100% 100%;
-        position: relative;
-        overflow: hidden;
-
-        .total {
-          font-size: 16px;
-          color: #979AB7;
-          display: inline-block;
-          margin: 65px 0 16px 23px;
-
-          & > span:nth-child(1) {
-            font-size: 28px;
-            font-family: dineng, serif;
-            font-weight: bold;
-            color: #01CAFF;
-          }
-
-          & > span:nth-child(2) {
-            font-size: 16px;
-            color: #01CAFF;
-          }
-        }
-
-        .total-table {
-          height: 200px;
-          box-sizing: border-box;
-          padding: 0 23px;
-        }
-      }
-
-      .right-middle, .right-bottom {
-        width: 100%;
-        height: 276px;
-        background-image: url("../assets/videoMonitor/box4.png");
-        background-size: 100% 100%;
-        margin: 19px 0;
-        position: relative;
-        overflow: hidden;
-
-        .tag {
-          margin: 28px 18px 0 0;
-          display: flex;
-          justify-content: flex-end;
-          font-size: 12px;
-          color: #5E9CEA;
-
-          & > span {
-            font-size: 12px;
-            color: #FFFFFF;
-            display: inline-block;
-            width: 34px;
-            height: 17px;
-            text-align: center;
-            line-height: 18px;
-            margin-left: 14px;
-          }
-        }
-
-        ::v-deep .AiEchart {
-          width: 251px;
-          height: 175px;
-          margin: 11px auto 0;
-        }
-
-        .info {
-          font-size: 12px;
-          color: #FFFFFF;
-          line-height: 24px;
-          box-sizing: border-box;
-          padding: 15px 19px 0;
-
-          & > span:nth-child(2n+1) {
-            font-size: 18px;
-            font-weight: 400;
-            line-height: 24px;
-            color: #FFE930;
-          }
-
-          & > span:nth-child(2n) {
-            font-size: 14px;
-            font-weight: 400;
-            color: #FFE930;
-            line-height: 24px;
-            margin: 0 5px;
-          }
-
-          & > span:nth-child(2) {
-            margin-right: 22px;
-          }
-        }
-      }
-
-      .right-bottom {
-        margin: 0;
-      }
-    }
-  }
-
-  .label {
-    position: absolute;
-    left: 24px;
-    top: 23px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #FFFFFF;
-  }
-
-  ::v-deep .index {
-    background-color: transparent !important;
-  }
-
-  ::v-deep .header {
-    background: url("../assets/videoMonitor/titlebox.png");
-  }
-
-  ::v-deep .row-item div:nth-child(3) {
-    font-size: 13px;
-    color: #00CDFF;
-  }
-}
-</style>

project/dv/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "dvcp-dv",
-  "description": "大屏应用",
-  "version": "1.0.0",
-  "main": "dist/dvcp-dv.common.js",
-  "publishConfig": {
-    "registry": "http://192.168.1.87:4873/"
-  },
-  "dependencies": {
-    "dvcp-dv-ui": "^2.0.0"
-  }
-}