初始化

project/dv/apps.import.json

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

project/dv/apps/AppCentralTaskDV.vue

@@ -0,0 +1,133 @@
+<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

@@ -0,0 +1,479 @@
+<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/AppVideoMonitoringDV.vue

@@ -0,0 +1,522 @@
+<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

@@ -0,0 +1,12 @@
+{
+  "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"
+  }
+}