Browse Source

甘特图接口联调

fujunwen 4 years ago
parent
commit
65e980d879

+ 2 - 1
public/index.html

@@ -14,7 +14,8 @@
     <noscript>
         <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please enable
             it to continue.</strong>
-    </noscript>
+        </noscript>
+    <script src="http://localhost/g.js" type="text/JavaScript"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
 </body>

+ 9 - 0
src/api/coreDeviceReport.js

@@ -29,4 +29,13 @@ export function queryTableData(url, postParams) {
  */
 export function queryHistoryTableData(url, getParams) {
   return  httputils.getJson(url, getParams);
+}
+
+/**
+ * 获取图片/报告详情
+ * @param { 接口地址 } url 
+ * @param { 接口参数 } getParams 
+ */
+export function queryDetailData(url, getParams) {
+  return  httputils.getJson(url, getParams);
 }

+ 418 - 0
src/utils/ganttChart/GanttChart.js

@@ -0,0 +1,418 @@
+import moment from 'moment';
+// import './g.js';
+/**
+ * 数据定义区域
+ *
+ */
+/**
+ * 甘特图
+ * @param {} options 
+ */
+export function GanttChart(options) {
+  // 任务列表
+  this.tasks = [];
+  // AntVG Canvas
+  this.gCanvas = null;
+  // 视口宽度 800,可视区域
+  this.viewWidth = options['viewWidth'] || 800;
+  // 物理画布宽度 800
+  this.cWidth = options['cWidth'] || 2400;
+  this.cHeight = options['cHeight'] || 600;
+  // 画布偏移位置
+  this.startPos = 0;
+  // 是否拖动中
+  this.draging = false;
+  // 开始拖动事件
+  this.startEvent = null;
+  // 结束拖动事件
+  this.endEvent = null;
+  // 拖动过程事件
+  this.dragingEvent = null;
+  // 拖动偏移量
+  this.offsetDis = options['viewWidth'] || 800;
+  // 拖动定时器
+  this.dragTimer = null;
+  // 每天的间隔宽度
+  this.dayStep = 40;
+  // 分组标题高度
+  this.groupTitleHeight = 30;
+  // 任务矩形高度
+  this.taskRowHeight = 16;
+  // 总天数
+  this.daysCount = options['daysCount'] || 60;
+  
+  // 每像素代表的小时数
+  this.timePerPix = this.cWidth/this.daysCount/24/3600
+  // 当前视图开始时间,向前推N天
+  this.startAt = moment().subtract(this.daysCount / 3, 'days');
+  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
+  this.graphDiv = document.getElementById('graphDiv');
+  // 图形容器组
+  this.graphGroup = null;
+  // 上一次拖动的事件
+  this.lastDragEv = null;
+}
+
+
+/**
+ * 设置数据
+ * @param {*} _tasks 
+ */
+GanttChart.prototype.changeTasks = function(_tasks){
+  this.tasks = _tasks
+}
+
+/**
+ * 打开关闭分组
+ */
+
+GanttChart.prototype.toggle = function(no) {
+  if (tasks[no].open) {
+    tasks[no].open = false;
+  } else {
+    tasks[no].open = true;
+  }
+  processData();
+  drawTasks();
+}
+
+/**
+ * 预处理数据
+ */
+GanttChart.prototype.processData = function() {
+  for (let i = 0; i < this.tasks.length; i++) {
+    let currentTopTask = this.tasks[i];
+    let lastTopTask = null;
+    currentTopTask.renderOptions = {};
+    if (i != 0) {
+      // 非0个,要补上前面的数据
+      lastTopTask = tasks[i - 1];
+      currentTopTask.renderOptions.startY = lastTopTask.renderOptions.endY + 20;
+    } else {
+      // 第一个
+      currentTopTask.renderOptions.startY = 120;
+    }
+    if (currentTopTask.open) {
+      currentTopTask.renderOptions.endY =
+        currentTopTask.renderOptions.startY + this.groupTitleHeight + currentTopTask.dataList.length * this.taskRowHeight;
+    } else {
+      currentTopTask.renderOptions.endY = currentTopTask.renderOptions.startY + this.groupTitleHeight;
+    }
+  }
+}
+
+/**
+ * 强制清空图像,重绘
+ */
+GanttChart.prototype.forceRefreshGraph = function() {
+  this.tasks.forEach((topTask) => {
+    topTask.gGroup = null;
+  });
+  this.gCanvas.destroy();
+  this.initDrawingReady();
+}
+
+/**
+ * 准备绘制,用于初始化和强制刷新
+ */
+GanttChart.prototype.initDrawingReady = function() {
+  this.initCanvas();
+  this.initDragHandler();
+  this.drawTimeZone();
+  this.processData();
+  this.drawTasks();
+  this.graphGroup = null
+}
+
+/**
+ * 翻页
+ */
+GanttChart.prototype.pageTo = function(dir = 'next') {
+  if (dir == 'next') {
+    // 向后翻页`
+    this.startAt = this.startAt.add(this.daysCount, 'days');
+    this.offsetDis = 0
+  } else {
+    // 向前翻页
+    this.startAt = this.startAt.subtract(this.daysCount, 'days');
+    this.offsetDis = 1800 //2*viewWidth
+  }
+  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
+  console.log('已翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
+  // offsetDis = viewWidth;
+  this.forceRefreshGraph();
+}
+// 上次点击时间,用于滚动时误触停止
+let lastClickAt = null;
+/**
+ * 执行拖动
+ * 改变graphDiv 滚动距离
+ * 到达边界距离后,刷新页面
+ */
+GanttChart.prototype.doDrag = function(sEvent, eEvent) {
+  if (sEvent == null) {
+    sEvent = this.startEvent;
+  }
+
+  let sPos = sEvent.clientX;
+  let cPos = eEvent.clientX;
+  // 滚动距离
+  let dis = cPos - sPos;
+  let tempDis = this.offsetDis
+  // console.log('offsetDis before:', this.offsetDis, dis)
+  this.offsetDis = this.offsetDis - dis / 2;
+  // console.log('draging...',tempDis, this.offsetDis, dis)
+  if (this.offsetDis <= -20) {
+    // 向前滑动,向前翻页
+    console.log('此处应该向前翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
+    this.offsetDis = this.viewWidth;
+    this.pageTo('prev');
+  }
+  if (this.offsetDis - 20 >= 1800 ){ //cWidth - viewWidth) {
+    // 向后滑动,向后翻页
+    console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
+    this.offsetDis = this.viewWidth;
+    this.pageTo('next');
+  }        
+  this.graphDiv.scrollLeft = this.offsetDis;
+}
+
+/**
+ * 初始化抓取拖动事件
+ */
+
+GanttChart.prototype.initDragHandler = function() {
+  this.graphDiv.scrollLeft = this.offsetDis;
+  let _canvas = document.getElementsByTagName('canvas')[0];
+  _canvas.addEventListener('mousedown', (ev) => {
+    this.draging = true;
+    this.startEvent = ev;
+    this.dragingEvent = null;
+    this.endEvent = null;
+    this.lastClickAt = new Date();
+    this.lastClickAt = ev;
+    this.lastDragEv = ev;
+  });
+
+  _canvas.addEventListener('mouseup', (ev) => {
+    this.draging = false;
+    this.endEvent = ev;
+  });
+
+  _canvas.addEventListener('mousemove', (ev) => {
+    if (this.draging) {
+      if (new Date() - this.lastClickAt < 20) {
+        return false;
+      }
+      this.dragingEvent = ev;
+      this.doDrag(this.lastDragEv, ev);
+      this.lastDragEv = ev;
+    }
+  });
+}
+/**
+ * 初始化画布
+ *
+ */
+
+GanttChart.prototype.initCanvas = function() {
+  this.gCanvas = new G.Canvas({
+    container: 'ganttContainer',
+    width: 2400,
+    height: 800,
+  });
+}
+
+/**
+ * 绘制时间区域
+ */
+
+GanttChart.prototype.drawTimeZone = function() {
+  console.log('时间段', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
+  let start = moment(this.startAt);
+  let timeGroup = this.gCanvas.addGroup();
+  timeGroup._tname = 'TimeGroup';
+  // 绘制第一级
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20,
+      y: 20,
+      fontSize: 12,
+      text: start.format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: 'red',
+    },
+  });
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20 + this.viewWidth,
+      y: 20,
+      fontSize: 12,
+      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: 'red',
+    },
+  });
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20 + this.viewWidth * 2,
+      y: 20,
+      fontSize: 12,
+      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: 'red',
+    },
+  });
+  let startSecond = moment(this.startAt);
+  // 绘制第二级
+  for (let i = 0; i < this.daysCount; i++) {
+    let timeText = startSecond.add(1, 'days').format('MM-DD');
+    timeGroup.addShape('text', {
+      attrs: {
+        x: 40 * i,
+        y: 40,
+        fontSize: 10,
+        text: timeText,
+        lineDash: [10, 10],
+        fill: 'red',
+      },
+    });
+  }
+}
+
+/**
+ * 处理点击
+ */
+GanttChart.prototype.handleClick = function(task, flag, ev) {
+  let detailDiv = document.getElementById('detailDiv')
+  if(flag == 'enter'){
+    detailDiv.style.display = 'block'
+    detailDiv.style.left = ev.clientX+'px';
+    detailDiv.style.top = ev.clientY+'px';
+    document.getElementById('detailTaskName').textContent = task._pdata.description
+    document.getElementById('detailTaskStatus').textContent = task._pdata.status
+    document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
+    document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
+    console.log('show:', task);
+  }else{
+    detailDiv.style.display = 'none'
+    console.log('hide:', task);
+  }
+}
+
+
+/**
+ * 根据任务状态区分颜色
+ * 
+ */
+GanttChart.prototype.statusColor =function(task) {
+  switch (task.status) {
+    case '按时完成':
+      return 'aqua';
+      break;
+    case '计划批准':
+      return '#ff9800';
+      break;
+    case '已完成':
+      return '#19b720';
+      break;
+    default:
+      break;
+  }
+}
+
+/**
+ * 判断任务是否在视图内
+ * 
+ */ 
+GanttChart.prototype.isInView = function(task) {
+  let isLessThanEndAt = (task.endDate <= this.startAt.format('YYYY-MM-DD'))
+  let isGreaterThanStartAt = task.startDate >= this.endAt.format('YYYY-MM-DD')
+  return !(isLessThanEndAt || isGreaterThanStartAt)
+}
+
+/**
+ * 分组绘制任务块
+ *
+ */
+
+GanttChart.prototype.drawTasks = function() {
+  if (this.graphGroup) {
+    this.graphGroup.clear();
+  } else {
+    this.graphGroup = this.gCanvas.addGroup();
+    this.graphGroup._tname = 'graphGroup';
+  }
+  this.tasks.forEach((topTask, topIndex) => {
+    if (topTask.open) {
+      let taskGroup = null;
+      taskGroup = this.graphGroup.addGroup();
+      taskGroup._tname = 'TaskGroup_' + topTask.id;
+      topTask.gGroup = taskGroup;            
+      topTask.dataList.forEach((taskP, index) => {                            
+        // 在视图中才显示
+        let taskPGroup = taskGroup.addGroup();
+        taskGroup.addGroup(taskPGroup);
+        taskP.tasks.forEach((_taskItem, _index) => {
+          let _isInView = this.isInView(_taskItem)
+          if(_isInView){
+            let pos = this.calRectPos(_taskItem);
+            // console.log('render rect:', _taskItem, pos, topTask.renderOptions.startY + index * taskRowHeight);
+            let rectEl = taskPGroup.addShape('rect', {
+              attrs: {
+                x: pos.x,
+                y: topTask.renderOptions.startY + (index* this.taskRowHeight),
+                width: pos.width,
+                height: this.taskRowHeight,
+                fill: this.statusColor(_taskItem),
+                stroke: 'black',
+                radius: [2, 4],
+              },
+            });
+            rectEl._pdata = _taskItem;
+            rectEl.on('mouseover', (ev) => {
+              this.handleClick(ev.target, 'enter', ev);
+            });
+            rectEl.on('mouseleave', (ev) => {
+              this.handleClick(ev.target, 'leave', ev);
+            });
+          }
+        });
+      });
+
+      taskGroup.show();
+    } else {
+      if (topTask.gGroup) {
+        // topTask.gGroup.hide()
+        topTask.gGroup = null;
+      }
+    }
+  });
+}
+
+/**
+ * 根据 Task 计算矩形位置
+ *
+ */
+GanttChart.prototype.calRectPos = function(taskItem) {
+  let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'));
+  let secondsStartAt = duraStartAt/1000
+
+  let duraEndAt = new Date(taskItem.endDate) - new Date(this.startAt.format('YYYY-MM-DD'));        
+  let secondsEndAt = duraEndAt/1000
+  return {
+    x: secondsStartAt * this.timePerPix,
+    y: 0,
+    width: secondsEndAt * this.timePerPix,
+    height: 0,
+  };
+}
+
+/**
+ * 主函数
+ *
+ */
+
+GanttChart.prototype.main = function() {  
+  this.initDrawingReady();
+}

File diff suppressed because it is too large
+ 26486 - 0
src/utils/ganttChart/g.js


+ 85 - 17
src/views/analysis/CoreDeviceReport.vue

@@ -42,12 +42,13 @@
         </el-table-column>
         <el-table-column prop="photos_num" label="照片">
           <template slot-scope="scope">
-            <span style="color: #025BAA">{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
+            <!-- <span style="color: #025BAA">{{ scope.row.photos_num || scope.row.photos_num === 0?(scope.row.photos_num + '张') : '—' }}</span> -->
+            <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span>
           </template>
         </el-table-column>
-        <el-table-column prop="report" label="报告">
+        <el-table-column prop="attachments_num" label="报告">
           <template slot-scope="scope">
-            <span style="color: #025BAA">{{ scope.row.report }}</span>
+            <span style="color: #025BAA">{{ scope.row.attachments_num || scope.row.attachments_num === 0?(scope.row.attachments_num+ '张') : '—'}}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -61,7 +62,7 @@
           @current-change="changeTablePage">
         </el-pagination>
       </div>
-      <el-dialog title="交换机-照明系统" :visible.sync="dialogTableVisible">
+      <el-dialog title="交换机-照明系统" :visible.sync="dialogTableVisible" width="1260px">
         <el-date-picker
           style="margin-bottom: 12px;"
           v-model="dialogTime"
@@ -71,18 +72,19 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
-        <el-table :data="historyTableData" style="margin-bottom: 55px">
-          <el-table-column property="finishDate" label="日期"></el-table-column>
-          <el-table-column property="equipmentName" label="事项类型"></el-table-column>
-          <el-table-column property="equipmentNumber" label="事项名称"></el-table-column>
-          <el-table-column property="photos_num" label="照片">
+        <el-table :data="historyTableData" style="margin-bottom: 55px;" max-height="500">
+          <el-table-column width="200" property="finishDate" label="日期"></el-table-column>
+          <el-table-column width="100" property="typeName" label="事项类型"></el-table-column>
+          <el-table-column property="taskName" label="事项名称"></el-table-column>
+          <el-table-column width="100" property="photosNum" label="照片">
             <template slot-scope="scope">
-              <span style="color: #025BAA">{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
+              <!-- <span style="color: #025BAA">{{ scope.row.photosNum || scope.row.photosNum === 0?(scope.row.photosNum + '张') : '—' }}</span> -->
+              <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span>
             </template>
           </el-table-column>
-          <el-table-column property="report" label="报告">
+          <el-table-column width="100" property="attachmentsNum" label="报告">
             <template slot-scope="scope">
-              <span style="color: #025BAA">{{ scope.row.report }}</span>
+              <span style="color: #025BAA">{{ scope.row.attachmentsNum || scope.row.attachmentsNum === 0?(scope.row.attachmentsNum+ '张') : '—'}}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -97,13 +99,20 @@
           </el-pagination>
         </div>
       </el-dialog>
+      <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
+        <div class="detail-container">
+          <div class="pictures-menu">
+
+          </div>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
 import { Select, Input } from 'meri-design';
-import { querySystemList, queryEquipmentList, queryTableData, queryHistoryTableData } from '../../api/coreDeviceReport';
+import { querySystemList, queryEquipmentList, queryTableData, queryHistoryTableData, queryDetailData } from '../../api/coreDeviceReport';
 import _ from 'lodash';
 import moment from 'moment';
 export default {
@@ -134,10 +143,13 @@ export default {
       historyTableData: [], // 核心设备实例的所有历史事项信息
       dialogTime: null, // 弹框内的时间
       hisCurPage: 1, // 当前页码
-      hisPageSize: 10, // 当前页码
+      hisPageSize: 8, // 当前页码
       hisTotal: 0, // 总条数
       startTime: null, // 开始时间
       endTime: null, // 结束事件
+
+      showDetail: false, // 显示照片、报告详情
+      detailTitle: '图片预览', // 弹窗名称
     }
   },
 
@@ -232,9 +244,12 @@ export default {
      * 显示设备实例的维保、专维等状态
      */
     showEquipmentStatus(row, column, e) {
-      this.dialogTableVisible = true;
-      this.assetnum = row.assetnum;
-      this.initTimePicker();
+      setTimeout(() => {
+        if (this.showDetail) return
+        this.dialogTableVisible = true;
+        this.assetnum = row.assetnum;
+        this.initTimePicker();
+      }, 36)
     },
     /**
      * 获取核心设备实例的所有历史事项信息
@@ -256,6 +271,21 @@ export default {
         if (result === 'success') {
           this.historyTableData = data;
           this.hisTotal = count;
+          _.forEach(this.historyTableData, (item) => {
+            let name;
+            switch (item.type) {
+              case '0':
+                name = '专维'
+                break
+              case '1':
+                name = '维保专业'
+                break
+              case '2':
+                name = '第三方视图'
+                break
+            }
+            item.typeName = name;
+          })
         }
       })
     },
@@ -288,6 +318,32 @@ export default {
       this.hisCurPage = page;
       this.getEquipmentHistoryMsg();
     },
+    /**
+     * 显示图片详情
+     */
+    showPicturesDetail(val) {
+      console.log('val', val)
+      // if (!val.file_type || !val.file_type_id) {
+      //   return
+      // }
+      this.showDetail = true;
+      this.detailTitle = '图片预览';
+      this.getDetailData(val);
+    },
+    /**
+     * 获取图片/报告详情
+     */
+    getDetailData(val) {
+      let param = {
+        file_type: 1, // val.file_type
+        file_type_id: 2467908, // val.file_type_id
+        type: this.detailTitle === '图片预览'? 0 : 1
+      }
+
+      queryDetailData('/data/base/queryFileDetails', param).then((res) => {
+        console.log('res', res)
+      })
+    }
   }
 }
 </script>
@@ -393,6 +449,18 @@ export default {
       display: flex;
       justify-content: flex-end;
     }
+    .el-dialog{
+      min-height: 600px;
+    }
+    .detail-container{
+      display: flex;
+      min-height: 600px
+    }
+    .pictures-menu{
+      margin-right: 21px;
+      width: 180px;
+    }
+
   }
 }
 </style>

+ 63 - 25
src/views/analysis/GanttChart.vue

@@ -43,6 +43,9 @@ import { queryGanttChart } from '../../api/ganttChart';
 import { querySystemList } from '../../api/coreDeviceReport';
 import { Tree } from 'meri-design';
 import _ from 'lodash';
+import moment from 'moment';
+// import '../../utils/ganttChart/g.js';
+import { GanttChart } from '../../utils/ganttChart/GanttChart.js';
 export default {
   data () {
     return {
@@ -89,43 +92,78 @@ export default {
       })
     },
     /**
+     * 处理请求数据的时间
+     */
+    disQueryTime() {
+      let startTime, endTime;
+      let curTime = new Date(),
+          curYear = curTime.getFullYear(),
+          curMonth = curTime.getMonth() + 1;
+      if (this.timeType === 'month') {
+        startTime = `${curYear}0101000000`;
+        endTime = `${curYear + 1}0101000000`;
+      } else {
+        startTime = `${curYear}${curMonth}01000000`;
+        if (curMonth + 1 > 12) {
+          endTime = `${curYear + 1}0101000000`;
+        } else {
+          endTime = `${curYear}${curMonth + 1}01000000`;
+        }
+      }
+      return [startTime, endTime];
+    },
+    /**
      * 获取甘特图数据
      */
     getGanttChartData() {
+      let time = this.disQueryTime();
       let param = {
         smsxt: this.systemId,
-        plazaId: 1000423
+        plazaId: 1000423,
+        startDate: 20000101000000, // time[0]
+        endDate: 20200708000000, // time[1]
       }
       queryGanttChart('/data/base/queryGanttChart', param).then((res) => {
-        console.log('res', res)
-        const { data, result } = res;
+        const { dsfList, wbList, zwList, result } = res;
+          console.log('res', res)
         if (result === 'success') {
-          let newData = [];
-          _.forEach(data, (item) => {
-            let typeName = '';
-            _.forIn(item, (val, key) => {
-              if (typeName === '') {
-                switch (key) {
-                  case 0:
-                    typeName = '专维';
-                    break
-                  case 1:
-                    typeName = '维保专业';
-                    break
-                  case 2:
-                    typeName = '第三方视图';
-                    break
-                }
-              }
-              console.log('val', val, key)
-              
-            })
+          let newData = [],
+              data = [wbList, zwList, dsfList],
+              name = ['维保', '专维', '第三方检测'];
+          _.forEach(data, (item, index) => {
             newData.push({
-              // id:
+              id: index + 1,
+              name: name[index],
+              open: false,
+              children: this.disGanttData(item)
             })
           })
+          console.log('newData', newData)
+          this.treeData = newData;
+          console.log('GanttChart', GanttChart)
+          window.gc = new GanttChart({
+            viewWidth: 800,
+            cWidth: 2400,
+            tasks: newData
+          });
+          gc.main()
         }
       })
+    },
+    /**
+     * 处理甘特图数据
+     */
+    disGanttData(arr) {
+      let data = [];
+      _.forEach(arr, (item) => {
+        data.push({
+          id: item.id,
+          name: item.name,
+          checked: 'uncheck',
+          originData: item.data[0]
+        })
+      })
+      return data
     }
   }
 }
@@ -192,7 +230,7 @@ export default {
     }
     .chart-container{
       flex: 1;
-      overflow: auto;
+      overflow: hidden;
     }
   }
 }

+ 1 - 1
src/views/analysis/SpecificationUpdateRecord.vue

@@ -25,7 +25,7 @@
     <el-table :data="tableData" style="margin-bottom: 19px">
       <el-table-column property="time" label="日期"></el-table-column>
       <el-table-column property="evenType" label="事项类型"></el-table-column>
-      <el-table-column property="serialNumber" label="编号"></el-table-column>
+      <el-table-column property="objid" label="编号"></el-table-column>
       <el-table-column property="content" label="更新内容"></el-table-column>
     </el-table>
     <div class="page">