大屏数据

src/api/bigScreen/index.js

@@ -0,0 +1,31 @@
+import request from "@/utils/request";
+
+export function getList (params,isLoading=true) {
+  return request({
+    method: "get",
+    url: "/api/admin/data-static/get-list",
+    params,
+    isLoading
+  })
+}
+export function detail (id) {
+  return request({
+    method: "get",
+    url: "/api/admin/data-static/get-form/" + id
+  })
+}
+
+export function save (data) {
+  return request({
+    method: "post",
+    url: "/api/admin/data-static/save",
+    data
+  })
+}
+
+export function destroy (id) {
+  return request({
+    method: "post",
+    url: "/api/admin/data-static/delete/" + id
+  })
+}

src/components/XyTable/index.vue

@@ -69,6 +69,7 @@ export default {
         return {children: 'children', hasChildren: 'hasChildren'}
       }
     },
+    spanMethod: Function,
     tableStyle: {
       type: Object,
       default: () => {
@@ -240,6 +241,7 @@ export default {
             row-key={rowKey}
             border={true}
             default-expand-all={defaultExpandAll}
+            span-method={this.spanMethod}
             tree-props={treeProps}
             fit={true}
             on={{
@@ -255,6 +257,7 @@ export default {
                 if (item.customFn) {
                   return (
                     <el-table-column
+                      show-overflow-tooltip={item.showOverflowTooltip}
                       fixed={item.fixed ?? false}
                       render-header={item.renderHeader ?? undefined}
                       align={item.align ?? 'center'}
@@ -320,6 +323,7 @@ export default {
                   //默认内容
                   return (
                     <el-table-column
+                      show-overflow-tooltip={item.showOverflowTooltip}
                       render-header={item.renderHeader ?? undefined}
                       fixed={item.fixed ?? false}
                       formatter={item.formatter}

src/utils/mergeTableRow.js

@@ -0,0 +1,67 @@
+/**在工具类util.js中定义通用方法
+ *  table合并行通用 */
+// eslint-disable-next-line space-before-function-paren
+export function mergeTableRow (config) {
+  let data = config.data;
+  const {
+    mergeColNames, // 需要合并的列
+    firstMergeColNames, // 受影响的列
+    firstMerge // 以哪列为基础进行合并(基准列)
+  } = config
+  if (!mergeColNames || mergeColNames.length === 0) {
+    return data
+  }
+  mergeColNames.forEach((m) => {
+    const mList = {}
+    data = data.map((v, index) => {
+      // 区分需要合并行的kemergeTableRow({
+      //         data: this.selectArea ? list.filter(i => (i.equipment_id_equipments_id_relation?.area === this.selectArea)) : list,
+      //         mergeColNames: ["equipment_id_equipments_id_relation.area","equipment_id_equipments_id_relation.name"], // 需要合并的列，默认合并列相同的数据
+      //         firstMergeColNames: ["equipment_id_equipments_id_relation.area","equipment_id_equipments_id_relation.name"], // 受影响的列，只合并以firstMerge为首的同类型数据
+      //         firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
+      //       });y值
+      const rowVal = v[firstMerge] + '-' + v[m]
+      // 需要合并行的第二行以及之后行会走if
+      // m === firstMerge 判断需要合并的列是否是基准列，如果是则只满足前面的条件，如果不是则需满足前面+后面的条件
+      if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span']?.rowspan === 0)) {
+        // 判断受影响的列是否是需要合并的列
+        const flag = firstMergeColNames.filter((f) => {
+          return f === m
+        }).length !== 0
+        // 判断需要合并的列是否是基准列
+        const mcFlag = mergeColNames.filter((mc) => {
+          return mc === firstMerge
+        }).length === 0
+        // 判断基准列只有一行的时候，直接赋值rowspan和colspan为1
+        if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span']?.rowspan === 1)) {
+          v[m + '-span'] = {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          // 判断基准列或其他需要合并列有多行时，第一行rowspan++
+          data[mList[rowVal]['index']][m + '-span'].rowspan++
+          // 需要合并行除了第一行之后其他行设置rowspan和colspan为0
+          v[m + '-span'] = {
+            rowspan: 0,
+            colspan: 0
+          }
+          mList[rowVal]['num']++
+          mList[rowVal]['newIndex']++
+        }
+      } else { // 需要合并列第一行走else
+        mList[rowVal] = {
+          num: 1,
+          index: index,
+          newIndex: index + 1
+        }
+        v[m + '-span'] = {
+          rowspan: 1,
+          colspan: 1
+        }
+      }
+      return v
+    })
+  })
+  return data
+}

src/views/bigSreen/component/Bottom.vue

@@ -1,79 +1,119 @@
 <template>
   <div class="bottom">
-    <div class="bs-card">
+    <div class="bs-card d-flex flex-column">
       <div class="bs-card__title jc-between">
         <p class="bs-card__title--text">医疗陪护</p>
 
         <div class="color-white">
           <span class="color-word">1</span>
           <span>/</span>
-          <span>10</span>
+          <span>{{ yiliaopeihu.length }}</span>
         </div>
       </div>
 
-      <div class="bs-card__body">
+      <div class="bs-card__body flex-1">
-        <img src="@/assets/bigScreen/bkg.png" alt="">
+        <el-image fit="cover" class="el-img" :src="yiliaopeihu[0] ? yiliaopeihu[0].file : ''" :preview-src-list="yiliaopeihu.map(i => i.file)" alt="" />
-        <div class="img-title">常州武进中医院</div>
+        <div class="img-title">{{ yiliaopeihu[0] ? yiliaopeihu[0].label : '' }}</div>
       </div>
     </div>
-    <div class="bs-card">
+    <div class="bs-card d-flex flex-column">
       <div class="bs-card__title jc-between">
         <p class="bs-card__title--text">项目</p>
 
         <div class="color-white">
           <span class="color-word">1</span>
           <span>/</span>
-          <span>10</span>
+          <span>{{ xiangmu.length }}</span>
         </div>
       </div>
 
-      <div class="bs-card__body">
+      <div class="bs-card__body flex-1">
-        <img src="@/assets/bigScreen/bkg.png" alt="">
+        <el-image fit="cover" class="el-img" :src="xiangmu[0] ? xiangmu[0].file : ''" :preview-src-list="xiangmu.map(i => i.file)" alt="" />
-        <div class="img-title">常州武进中医院</div>
+        <div class="img-title">{{ xiangmu[0] ? xiangmu[0].label : '' }}</div>
       </div>
     </div>
-    <div class="bs-card">
+    <div class="bs-card d-flex flex-column">
       <div class="bs-card__title jc-between">
         <p class="bs-card__title--text">分公司/站点</p>
 
         <div class="color-white">
           <span class="color-word">1</span>
           <span>/</span>
-          <span>10</span>
+          <span>{{ fengongsi.length }}</span>
         </div>
       </div>
 
-      <div class="bs-card__body">
+      <div class="bs-card__body flex-1">
-        <img src="@/assets/bigScreen/bkg.png" alt="">
+        <el-image fit="cover" class="el-img" :src="fengongsi[0] ? fengongsi[0].file : ''" :preview-src-list="fengongsi.map(i => i.file)" alt="" />
-        <div class="img-title">常州武进中医院</div>
+        <div class="img-title">{{ fengongsi[0] ? fengongsi[0].label : '' }}</div>
       </div>
     </div>
-    <div class="bs-card">
+    <div class="bs-card d-flex flex-column">
       <div class="bs-card__title jc-between">
         <p class="bs-card__title--text">活动集锦</p>
 
         <div class="color-white">
           <span class="color-word">1</span>
           <span>/</span>
-          <span>10</span>
+          <span>{{ huodongjijin.length }}</span>
         </div>
       </div>
 
-      <div class="bs-card__body">
+      <div class="bs-card__body flex-1">
-        <img src="@/assets/bigScreen/bkg.png" alt="">
+        <el-image fit="cover" class="el-img" :src="huodongjijin[0] ? huodongjijin[0].file : ''" :preview-src-list="huodongjijin.map(i => i.file)" alt="" />
-        <div class="img-title">常州武进中医院</div>
+        <div class="img-title">{{ huodongjijin[0] ? huodongjijin[0].label : '' }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getList } from "@/api/bigScreen"
 export default {
   data() {
-    return {}
+    return {
+      pics: [
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+      ],
+
+      yiliaopeihu: [],
+      xiangmu: [],
+      fengongsi: [],
+      huodongjijin: []
+    }
+  },
+  methods: {
+    async getData () {
+      try {
+        const res = await Promise.all([
+          getList({
+            type: 'yiliaopeihu'
+          },false),
+          getList({
+            type: 'xiangmu'
+          },false),
+          getList({
+            type: 'fengongsi'
+          },false),
+          getList({
+            type: 'huodongjijin'
+          },false)
+        ])
+        const [yiliaopeihu,xiangmu,fengongsi,huodongjijin] = res;
+        this.yiliaopeihu = JSON.parse(yiliaopeihu?.data[0]?.value);
+        this.xiangmu = JSON.parse(xiangmu?.data[0]?.value);
+        this.fengongsi = JSON.parse(fengongsi?.data[0]?.value);
+        this.huodongjijin = JSON.parse(huodongjijin?.data[0]?.value);
+      } catch (err) {
+        console.warn(err)
+      }
+    }
   },
-  methods: {},
   computed: {},
+  created() {
+    this.getData()
+  }
 }
 </script>
 
@@ -95,8 +135,9 @@ export default {
       margin-top: 10px;
       position: relative;
 
-      & > img {
+      & > img,& > .el-img {
         object-fit: cover;
+        height: 100%;
         width: 372px;
       }
 
@@ -114,4 +155,7 @@ export default {
     }
   }
 }
+::v-deep .el-image-viewer__mask {
+  transform: scale(2);
+}
 </style>

src/views/bigSreen/component/Center.vue

@@ -8,7 +8,7 @@
         <div class="card-text">
           <p class="color-word">照护</p>
           <p>
-            <span class="color-white fw-b" style="font-size: 42px;">10000</span>
+            <span class="color-white fw-b" style="font-size: 42px;">{{ total.zhaohu }}</span>
             <span class="color-word" style="padding-left: 5px">人次/年</span>
           </p>
         </div>
@@ -20,7 +20,7 @@
         <div class="card-text">
           <p class="color-word">服务覆盖人数</p>
           <p>
-            <span class="color-white fw-b" style="font-size: 42px;">658</span>
+            <span class="color-white fw-b" style="font-size: 42px;">{{ total.fuwufugairenshu }}</span>
             <span class="color-word" style="padding-left: 5px">人</span>
           </p>
         </div>
@@ -32,20 +32,28 @@
         <div class="card-text">
           <p class="color-word">总服务时长</p>
           <p>
-            <span class="color-white fw-b" style="font-size: 42px;">10000</span>
+            <span class="color-white fw-b" style="font-size: 42px;">{{ total.zongfuwushichang }}</span>
             <span class="color-word" style="padding-left: 5px">小时</span>
           </p>
         </div>
       </div>
     </div>
 
-    <div class="bottom" @mouseenter="isMouseHover = true" @mouseleave="isMouseHover = false" @click="playVideo">
+    <div class="bottom" @mouseenter="isMouseHover = true" @mouseleave="isMouseHover = false">
-      <video ref="video" loop>
+      <transition name="fade">
-        <source src="https://highlight-video.cdn.bcebos.com/video/6s/fa06ca8e-536b-11ef-8efc-7cd30ab516e3.mp4">
+        <video :src="videos[videoIndex] ? videos[videoIndex].file : ''" ref="video" loop v-show="type === 'video'" :style="isPaused ? 'filter: brightness(75%);' : ''" @click="playVideo">
-      </video>
+        </video>
+      </transition>
+      <transition name="fade">
+        <el-carousel class="carousel-img" v-show="type === 'img'" indicator-position="none">
+          <el-carousel-item v-for="(item,index) in imgs" :key="index">
+            <img class="carousel-item-img" :src="item.file" alt="">
+          </el-carousel-item>
+        </el-carousel>
+      </transition>
 
       <transition name="fade">
-        <div class="video-btn" v-show="isPaused || isMouseHover">
+        <div class="video-btn" v-show="(isPaused || isMouseHover) && type === 'video'" @click="playVideo">
           <svg viewBox="0 0 100 100">
             <defs>
               <linearGradient id="yellow" x1="50%" x2="50%" y1="0%" y2="100%">
@@ -73,14 +81,23 @@
         </div>
       </transition>
 
-      <div class="type-change" @click.stop>
+      <div class="video-change" v-show="type === 'video' && (isPaused || isMouseHover)">
-        <div class="type-change-item">
+        <button type="button" class="el-carousel__arrow el-carousel__arrow--left" @click="isPaused = true,videoIndex = (videoIndex + 1) % videos.length">
+          <i class="el-icon-arrow-left custom-cursor-on-hover"></i>
+        </button>
+        <button type="button" class="el-carousel__arrow el-carousel__arrow--right" @click="isPaused = true,videoIndex = (videoIndex - 1 + videos.length) % videos.length">
+          <i class="el-icon-arrow-right custom-cursor-on-hover"></i>
+        </button>
+      </div>
+
+      <div class="type-change">
+        <div class="type-change-item" @click="type = 'img'">
           <i class="el-icon-picture type-change-item__icon"></i>
-          <div class="type-change-item__num">2</div>
+          <div class="type-change-item__num">{{ imgs.length }}</div>
         </div>
-        <div class="type-change-item">
+        <div class="type-change-item" @click="type = 'video'">
           <i class="el-icon-video-camera-solid type-change-item__icon"></i>
-          <div class="type-change-item__num">6</div>
+          <div class="type-change-item__num">{{ videos.length }}</div>
         </div>
       </div>
     </div>
@@ -89,15 +106,50 @@
 
 <script>
 import gsap from "gsap";
+import { getList } from "@/api/bigScreen"
 export default {
   data() {
     return {
+      total: {
+        "zhaohu": 0,
+        "fuwufugairenshu": 0,
+        "zongfuwushichang": 0
+      },
       isPaused: true,
       isMouseHover: false,
+
+      type: 'video', //video img
+
+      videoIndex: 0,
+      videos: [],
+      imgs: []
     }
   },
   methods: {
+    async getTotal () {
+      const res = (await getList({
+        type: 'total'
+      },false)).data
+      this.total.zhaohu = res.find(i => i.key === 'zhaohu')?.value
+      this.total.fuwufugairenshu = res.find(i => i.key === 'fuwufugairenshu')?.value
+      this.total.zongfuwushichang = res.find(i => i.key === 'zongfuwushichang')?.value
+    },
+    async getList () {
+      try {
+        const res = (await getList({
+          type: 'media'
+        },false))?.data
+
+        this.videos = JSON.parse(res.find(i => i.key === 'video')?.value)
+        this.imgs = JSON.parse(res.find(i => i.key === 'imgs')?.value)
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
     playVideo () {
+      if (this.type === 'img') return;
+
       gsap.set(this.$refs['icon'],{
         strokeDasharray: "6.148px, 442.31px",
         strokeDashoffset: "100.9137px"
@@ -114,9 +166,25 @@ export default {
         this.isPaused = true;
         this.$refs['video'].pause()
       }
+    },
+
+    keywordRegister (e) {
+      if (e.code === 'Space') {
+        this.playVideo()
+      }
     }
   },
   computed: {},
+  created() {
+    this.getList();
+    this.getTotal();
+  },
+  mounted() {
+    document.body.addEventListener('keypress', this.keywordRegister)
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('keypress', this.keywordRegister)
+  }
 }
 </script>
 
@@ -165,16 +233,31 @@ export default {
     background: conic-gradient(#5470ec, #506bec, #77cbf1, #3d58ca, #3b56ca, #6fbbf0, #6aa3f2);
     position: relative;
 
-    video {
+    video,.carousel-img {
+      background: rgb(6, 23, 70);
       object-fit: cover;
       position: absolute;
+      transition: all .2s;
       left: 6px;
       bottom: 6px;
-      filter: brightness(65%);
       height: calc(100% - 12px);
       width: calc(100% - 12px);
     }
-    //.video-btn {
+    .carousel-img > ::v-deep .el-carousel__container {
+      height: 100%;
+    }
+    ::v-deep .el-carousel__arrow {
+      width: 56px;
+      height: 56px;
+      font-size: 25px;
+      color: #fff;
+    }
+    .carousel-item-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+      //.video-btn {
     //  cursor: pointer;
     //  width: 230px;
     //  height: 230px;
@@ -223,6 +306,7 @@ export default {
       background: #ffffff19;
       padding: 9px 15px;
       display: flex;
+      z-index: 333;
       align-items: center;
       position: absolute;
       bottom: 14px;

src/views/bigSreen/component/CenterLeft.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { getList } from "@/api/bigScreen";
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 export default {
@@ -32,48 +33,31 @@ export default {
     return {}
   },
   methods: {
+    async getChartData () {
+      try {
+        const res = (await getList({
+          type: 'kangyangfuwu'
+        },false))?.data
+        this.pieChartData = JSON.parse(res?.find(i => i.key === 'piechart')?.value)
+        this.initPieChart()
+
+        this.chartData = JSON.parse(res?.find(i => i.key === 'barchart')?.value)
+        this.initChart();
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
     initChart() {
       this.chart = echarts.init(document.querySelector('#property-line-chart'), 'macarons');
       this.setOptions(this.chartData);
     },
     initPieChart () {
       this.chartPie = echarts.init(document.querySelector('#property-pie-chart'));
-      this.setPieOptions(this.chartData);
+      this.setPieOptions(this.pieChartData);
     },
     setOptions(chartdata) {
-      let data = [{
+      let color = ['#c95038','#e1884a','#ebb34c','#316922','#71dc7a','#6bb7be','#2050e0','#9952f6']
-        name: '长护',
-        val: 7100,
-        color: '#c95038'
-      },{
-        name: '残联',
-        val: 8120,
-        color: '#e1884a'
-      },{
-        name: '民政',
-        val: 5612,
-        color: '#ebb34c'
-      },{
-        name: "陪诊",
-        val: 8143,
-        color: '#316922'
-      },{
-        name: "问诊",
-        val: 4231,
-        color: '#71dc7a'
-      },{
-        name: "居家照护",
-        val: 6501,
-        color: '#6bb7be'
-      },{
-        name: "医院陪护",
-        val: 3420,
-        color: '#2050e0'
-      },{
-        name: "个性化\n服务",
-        val: 6501,
-        color: '#9952f6'
-      }]
       this.chart.setOption({
         tooltip: {
           trigger: 'axis',
@@ -100,7 +84,7 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: data.map(i => i.name),
+          data: this.chartData.map(i => i.label),
           axisLabel: {
             textStyle: {
               color: "#fff"
@@ -111,7 +95,7 @@ export default {
           {
             name: '人数',
             type: 'bar',
-            data: data.map(i => i.val),
+            data: this.chartData.map(i => i.value),
             label: {
               show: true,
               position: 'insideRight',
@@ -121,7 +105,7 @@ export default {
             },
             itemStyle: {
               color: (params) => {
-                return data[params.dataIndex].color
+                return color[params.dataIndex]
               },
               barBorderRadius: [0,4,4,0],
             },
@@ -131,33 +115,25 @@ export default {
     },
 
     setPieOptions () {
-      let data = [{
+      let color = [new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
-        name: "政府",
+        {
-        val: 40,
+          offset: 0,
-        color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
+          color: '#202aed'
-          {
+        },
-            offset: 0,
+        {
-            color: '#202aed'
+          offset: 1,
-          },
+          color: '#3b82f0'
-          {
+        }
-            offset: 1,
+      ]),new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
-            color: '#3b82f0'
+        {
-          }
+          offset: 0,
-        ])
+          color: '#84d7ee'
-      },{
+        },
-        name: "商业",
+        {
-        val: 60,
+          offset: 1,
-        color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
+          color: '#6fe7fa'
-          {
+        }
-            offset: 0,
+      ])]
-            color: '#84d7ee'
-          },
-          {
-            offset: 1,
-            color: '#6fe7fa'
-          }
-        ])
-      }]
       this.chartPie.setOption({
         title: {
           show: false,
@@ -170,16 +146,14 @@ export default {
             type: 'pie',
             radius: '64%',
             center: ['50%', '50%'],
-            data: data.map(i => ({
+            data: this.pieChartData.map((i, index) => ({
-              value: i.val,
+              value: isNaN(Number(i.value)) ? 0 : Number(i.value),
-              name: i.name,
+              name: i.label,
               itemStyle: {
-                color: i.color,
+                color: color[index],
                 shadowBlur: 10,
               }
-            })).sort(function (a, b) {
+            })),
-              return a.value - b.value;
-            }),
             roseType: 'radius',
             label: {
               color: '#fff',
@@ -207,8 +181,7 @@ export default {
   },
   computed: {},
   mounted() {
-    this.initChart()
+    this.getChartData()
-    this.initPieChart()
   }
 }
 </script>

src/views/bigSreen/component/CenterRight.vue

@@ -18,12 +18,13 @@
       </div>
 
 
-      <dv-scroll-board :config="listConfig" style="width: 517px;height: 393px;margin-top: 21px;" />
+      <dv-scroll-board ref="scrollBoard" :key="scrollBoardKey" :config="listConfig" style="width: 517px;height: 393px;margin-top: 21px;" />
     </div>
   </div>
 </template>
 
 <script>
+import { getList } from "@/api/bigScreen";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import China from "echarts/map/json/china.json"
 import echarts from 'echarts'
@@ -33,6 +34,7 @@ export default {
   },
   data() {
     return {
+      scrollBoardKey: 0,
       listConfig: {
         headerBGC: "#0a1b5632",
         oddRowBGC: "#0a1b5632",
@@ -43,32 +45,37 @@ export default {
         align: ['center','left','center','center'],
         columnWidth: [52],
         header: ['服务名称', '人员', '时间'],
-        data: Array.from({ length: 22 },() => ['稽查回访','人员a','<span style="color: #03b1fa;">13:55</span>'])
+        data: Array.from({ length: 10 },() => ['稽查回访','人员a','<span style="color: #03b1fa;">13:55</span>'])
       },
 
       timer: null,
       toDayNums: [
         {
+          key: "laonianrenzhucan",
           name: "老年人助餐",
           val: 129,
           icon: "dessert"
         },
         {
+          key: "jujiazhandianhuodong",
           name: "居家站点活动",
           val: 128,
           icon: "star1"
         },
         {
+          key: "jujiazhandianrizhaorenshu",
           name: "居家站点日照人数",
           val: 168,
           icon: "huli"
         },
         {
+          key: "jujiashangmenfuwu",
           name: "居家上门服务",
           val: 28,
           icon: "house"
         },
         {
+          key: "jichahuifang",
           name: "稽查回访",
           val: 163,
           icon: "search1"
@@ -77,6 +84,21 @@ export default {
     }
   },
   methods: {
+    async getData () {
+      const res = (await getList({
+        type: 'today'
+      },false))?.data
+      this.toDayNums.forEach(i => {
+        i.val = isNaN(Number(res.find(j => j.key === i.key)?.value)) ? 0 : Number(res.find(j => j.key === i.key)?.value)
+      })
+      try {
+        this.listConfig.data = JSON.parse(res.find(i => i.key === 'list')?.value ?? '[]').map(i => [i.name,i.people,`<span style="color: #03b1fa;">${i.time}</span>`])
+        this.scrollBoardKey++;
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
     setTimer () {
       this.timer = setInterval(() => {
         this.toDayNums.forEach(i => {
@@ -818,11 +840,14 @@ export default {
     // }
   },
   computed: {},
+  created() {
+    this.getData();
+  },
   mounted() {
-    this.setTimer()
+    //this.setTimer()
   },
   beforeDestroy() {
-    clearInterval(this.timer)
+    //clearInterval(this.timer)
   }
 }
 </script>

src/views/bigSreen/component/addDataManage.vue

@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <xy-dialog
+      :width="72"
+      ref="dialog"
+      :is-show.sync="isShow"
+      type="form"
+      :title="type === 'add' ? '新增数据管理' : '编辑数据管理'"
+      :form="form"
+      :rules="rules"
+      @submit="submit"
+    >
+      <template v-slot:type>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">名称 ：</div>
+          <div class="xy-table-item-content">
+            <el-input
+              v-model="form.type"
+              clearable
+              placeholder="请输入名称"
+              style="width: 300px"
+            ></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:key>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">键 ：</div>
+          <div class="xy-table-item-content">
+            <el-input
+              v-model="form.key"
+              clearable
+              placeholder="请输入键"
+              style="width: 300px"
+            ></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:value>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">值 ：</div>
+          <div class="xy-table-item-content" style="width: 600px">
+            <el-input
+              type="textarea"
+              :autosize="{
+                minRows: 2
+              }"
+              v-model="form.value"
+              clearable
+              placeholder="请输入值"
+            ></el-input>
+
+
+            <div style="margin: 10px auto;">
+              <el-button type="primary" icon="el-icon-upload2" @click="JSON2str">转换</el-button>
+              <el-button type="primary" icon="el-icon-download" @click="str2JSON">转换</el-button>
+            </div>
+
+            <div>
+              <template v-if="transformJSON instanceof Array">
+                <xy-table :height="300" :list="transformJSON" :table-item="JSONHeader" :is-page="false">
+                  <template #btns>
+                    <el-table-column>
+                      <template #default="{ row, $index }">
+                        <Button size="small" type="primary" @click="transformJSON.splice($index,1)">删除</Button>
+                      </template>
+                    </el-table-column>
+                  </template>
+                </xy-table>
+              </template>
+              <template v-if="typeof transformJSON === 'object' && !transformJSON instanceof Array">
+                <div v-for="(value, key) in transformJSON">
+                  <el-input size="small" :value="key"></el-input>
+                  <el-input size="small" style="margin-left: 6px;" :value="value"></el-input>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:sort>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">排序 ：</div>
+          <div class="xy-table-item-content">
+            <el-input-number
+              v-model="form.sort"
+              clearable
+              placeholder="请输入排序"
+              style="width: 300px"
+              :controls="false"
+            ></el-input-number>
+          </div>
+        </div>
+      </template>
+<!--      <template #extraFormBottom>-->
+<!--        <div class="xy-table-item">-->
+<!--          <div class="xy-table-item-label">文件 ：</div>-->
+<!--          <div class="xy-table-item-content">-->
+<!--            <el-upload-->
+<!--              style="width: 300px"-->
+<!--              ref="upload"-->
+<!--              multiple-->
+<!--              :on-success="-->
+<!--                (response, file, fileList) =>-->
+<!--                  successHandle(response, file, fileList, 'file')-->
+<!--              "-->
+<!--              :before-upload="uploadBefore"-->
+<!--              accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.png,.gif,.mp4,.xls,.xlsx"-->
+<!--              :action="action"-->
+<!--              :file-list="file"-->
+<!--              :auto-upload="false"-->
+<!--              :on-remove="-->
+<!--                (file, fileList) => removeHande(file, fileList, 'file')-->
+<!--              "-->
+<!--            >-->
+<!--              <el-button slot="trigger" size="small" type="primary"-->
+<!--                >选取文件</el-button-->
+<!--              >-->
+<!--              <el-button-->
+<!--                style="margin-left: 10px"-->
+<!--                size="small"-->
+<!--                type="success"-->
+<!--                @click="$refs['upload'].submit()"-->
+<!--                >开始上传</el-button-->
+<!--              >-->
+<!--              <div slot="tip" class="el-upload__tip">-->
+<!--                支持文件格式：.rar .zip .doc .docx .pdf .jpg .png .gif .mp4 .xls-->
+<!--                .xlsx-->
+<!--                <br />单个文件不能超过20M-->
+<!--              </div>-->
+<!--            </el-upload>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </template>-->
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import { detail, save } from "@/api/bigScreen";
+export default {
+  props: {},
+  data() {
+    return {
+      isShow: false,
+      id: "",
+      type: "",
+      action: process.env.VUE_APP_UPLOAD_API,
+      file: [],
+
+      form: {
+        type: "",
+        key: "",
+        value: "",
+        sort: "",
+      },
+      rules: {},
+
+      transformJSON: null,
+    };
+  },
+  methods: {
+    show() {
+      this.isShow = true;
+    },
+    hidden() {
+      this.isShow = false;
+    },
+    init() {
+      for (let key in this.form) {
+        if (this.form[key] instanceof Array) {
+          this.form[key] = [];
+        } else {
+          this.form[key] = "";
+        }
+      }
+      this.$refs["dialog"].clearValidate();
+    },
+    setId(id) {
+      if (typeof id == "number") {
+        this.id = id;
+      } else {
+        console.error("error typeof id: " + typeof id);
+      }
+    },
+    getId() {
+      return this.id;
+    },
+    setType(type = "add") {
+      let types = ["add", "editor"];
+      if (types.includes(type)) {
+        this.type = type;
+      } else {
+        console.warn("Unknown type: " + type);
+      }
+    },
+    setForm(key = [], value = []) {
+      if (key instanceof Array) {
+        key.forEach((key, index) => {
+          this.form[key] = value[index] ?? "";
+        });
+      }
+      if (typeof key === "string") {
+        this.form[key] = value;
+      }
+      if (!key) {
+        this.init();
+      }
+    },
+
+    //上传
+    successHandle(response, file, fileList, key) {
+      this[key] = fileList;
+    },
+    removeHande(file, fileList, key) {
+      this[key] = fileList;
+    },
+    uploadBefore(file) {
+      console.log(file);
+      // if (file.size / 1000 > 20 * 1024) {
+      //   this.$message({
+      //     type: "warning",
+      //     message: "上传图片大小超过20MB！",
+      //   });
+      //   return false;
+      // }
+    },
+
+    async getDetail() {
+      const res = await detail(this.id);
+      this.$integrateData(this.form, res);
+    },
+
+    submit() {
+      if (this.type === "add") {
+        if (this.form.hasOwnProperty("id")) {
+          delete this.form.id;
+        }
+      }
+      if (this.type === "editor") {
+        Object.defineProperty(this.form, "id", {
+          value: this.id,
+          enumerable: true,
+          configurable: true,
+          writable: true,
+        });
+      }
+      save(this.form).then((res) => {
+        this.$message({
+          type: "success",
+          message:
+            this.type === "add" ? "新增数据管理" : "编辑数据管理" + "成功",
+        });
+        this.isShow = false;
+        this.$emit("refresh");
+      });
+    },
+
+    str2JSON () {
+      try {
+        this.transformJSON = JSON.parse(this.form.value)
+        console.log(this.transformJSON)
+      } catch (err) {
+        this.$message.error(err)
+      }
+    },
+    JSON2str () {
+      this.form.value = JSON.stringify(this.transformJSON)
+    }
+  },
+  computed: {
+    JSONHeader () {
+      if (this.transformJSON instanceof Array && this.transformJSON[0] && typeof this.transformJSON[0] === 'object') {
+        return Object.keys(this.transformJSON[0]).map(i => ({
+          prop: i,
+          label: i,
+          customFn: row => (
+            <el-input vModel={row[i]} size="small"></el-input>
+          )
+        }))
+      } else {
+        return []
+      }
+    }
+  },
+  watch: {
+    isShow(val) {
+      if (val) {
+        if (this.type === "editor") {
+          this.getDetail();
+        }
+      } else {
+        this.transformJSON = null;
+        this.id = "";
+        this.type = "";
+        this.init();
+        this.$refs["dialog"].clearValidate();
+        delete this.form.id;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-input__inner {
+  text-align: left;
+}
+.xy-table-item-content {}
+</style>

src/views/bigSreen/dataManage.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="大屏数据管理">
+        <div slot="content"></div>
+        <slot>
+          <div>
+            <Input v-model="select.type" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
+            <Button style="margin-left: 10px" type="primary" @click="total = 0,select.page = 1,getList()">查询</Button>
+            <Button style="margin-left: 10px" type="primary" @click="$refs['add'].setType('add'),$refs['add'].show()">新建</Button>
+          </div>
+        </slot>
+      </lx-header>
+    </div>
+
+    <xy-table
+      :total="total"
+      :list="list"
+      :span-method="objectSpanMethod"
+      :table-item="table"
+      @editor="editor"
+      @delete="destroy"
+      @pageSizeChange="e => select.page_size = e"
+      @pageIndexChange="e => { select.page = e;getList(); }"></xy-table>
+
+    <add ref="add" @refresh="getList"></add>
+  </div>
+</template>
+
+<script>
+import { getList, destroy } from "@/api/bigScreen"
+import add from "./component/addDataManage.vue"
+import { mergeTableRow } from "@/utils/mergeTableRow";
+export default {
+  components: {
+    add
+  },
+  data() {
+    return {
+      select:{
+        page:1,
+        page_size:10,
+        type:''
+      },
+
+      total:0,
+      list:[],
+      table:[
+        {
+          prop:'type',
+          label:'名称',
+          minWidth: 200,
+          align:'left'
+        },
+        {
+          prop: 'key',
+          label: '标识',
+          width: 160
+        },
+        {
+          prop: 'value',
+          label: '值',
+          minWidth: 240,
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'sort',
+          label: '排序',
+          width: 140
+        }
+      ]
+    }
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const span = column["property"] + "-span";
+      if (row[span]) {
+        return row[span];
+      }
+    },
+    async getList(){
+      const res = await getList(this.select);
+      this.list = mergeTableRow({
+        data: res.data,
+        mergeColNames: ["type"], // 需要合并的列，默认合并列相同的数据
+        firstMergeColNames: ["type"], // 受影响的列，只合并以firstMerge为首的同类型数据
+        firstMerge: "type", // 以哪列为基础进行合并，一般为第一列
+      });
+      this.total = res.total;
+      console.log(this.list)
+    },
+
+    editor(row){
+      this.$refs['add'].setId(row.id);
+      this.$refs['add'].setType('editor');
+      this.$refs['add'].show();
+    },
+    destroy(row){
+      destroy(row.id).then(res => {
+        this.$successMessage('destroy','')
+        this.getList()
+      })
+    }
+  },
+  created() {
+    this.getList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>