Merge remote-tracking branch 'origin/master'

fuliqi

2024-03-26 d67d79c396bd29ff9b8b17322928ae8a8325156b

Merge remote-tracking branch 'origin/master'

 src/api/platform/threshold.js

New file
@@ -0,0 +1,44 @@
import request from '@/utils/request'

// 查询运维阈值列表
export function listThreshold(query) {
  return request({
    url: '/ycl/threshold/list',
    method: 'get',
    params: query
  })
}

// 查询运维阈值详细
export function getThreshold(id) {
  return request({
    url: '/ycl/threshold/' + id,
    method: 'get'
  })
}

// 新增运维阈值
export function addThreshold(data) {
  return request({
    url: '/ycl/threshold',
    method: 'post',
    data: data
  })
}

// 修改运维阈值
export function updateThreshold(data) {
  return request({
    url: '/ycl/threshold',
    method: 'put',
    data: data
  })
}

// 删除运维阈值
export function delThreshold(id) {
  return request({
    url: '/ycl/threshold/' + id,
    method: 'delete'
  })
}

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -2,8 +2,8 @@
  <div class="chart-container">
    <div class="rank-chart">
      <div class="hola-item" v-for="item in dataList" :key="item.id">
        <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value"
          :bottomTitle="item.name" :routerPath="item.routerUrl" ></examine-hola>
        <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value" :bottomTitle="item.name"
          :routerPath="item.routerUrl"></examine-hola>
      </div>
    </div>
  </div>
@@ -59,9 +59,8 @@

    .hola-item {
      flex-shrink: 0;
      width: 240px;
      height: 200px;
      color: #008000
      width: 220px;
      height: 180px;
    }
  }
}

 src/views/screen/components/screen-examine/index.vue

@@ -2,7 +2,42 @@
  <div class="examine-container">
    <wrapper-title :title="'考核数据'" :path="'/examine/check-rule'"></wrapper-title>
    <div class="examine-content">

      <div class="examine-wrapper">
        <div class="select-container">
          <div class="select-item" :class="{'active-item' : activeIndex === 0}" @click="clickItem(0)">
            <div class="icon-container">
              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <path fill="#ffffff"
                  d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" />
              </svg>
            </div>
            <div class="label">人脸考核</div>
          </div>
          <div class="select-item" :class="{'active-item' : activeIndex === 1}" @click="clickItem(1)">
            <div class="icon-container">
              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <path fill="#ffffff"
                  d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z" />
              </svg>
            </div>
            <div class="label">车辆考核</div>
          </div>
          <div class="select-item" :class="{'active-item' : activeIndex === 2}" @click="clickItem(2)">
            <div class="icon-container">
              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <path fill="#ffffff"
                  d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z" />
                <path fill="#ffffff"
                  d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z" />
              </svg>
            </div>
            <div class="label">视频考核</div>
          </div>
        </div>
        <examine-chart class="wrapper-item"></examine-chart>
        <!-- <examine-table class="wrapper-item"></examine-table> -->
      </div>
@@ -20,6 +55,16 @@
    WrapperTitle,
    ExamineChart,
    ExamineTable
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    clickItem(index) {
      this.activeIndex = index;
    }
  }
}

@@ -51,8 +96,34 @@
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.select-container {
  width: 100%;
  display: flex;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  border-bottom: 0;

  .select-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: rgba(38, 86, 158, 0.6);
    }
  }
  .active-item {
    background-color: rgba(38, 86, 158, 0.6);
  }
}
</style>

 src/views/screen/components/screen-map/index.vue

@@ -45,7 +45,7 @@
    viewControl: {
      beta: -30,
      alpha: 50,
      distance: 105,
      distance: 85,
      maxBeta: 180,
      panSensitivity: 0,
      zoomSensitivity: 1,
@@ -93,7 +93,7 @@
      viewControl: {
        beta: -30,
        alpha: 50,
        distance: 105,
        distance: 85,
        maxBeta: 180,
        panSensitivity: 0,
        zoomSensitivity: 1,
@@ -236,8 +236,8 @@

  .map-content {
    flex: 1;
    background: rgba(67, 102, 155, 0.3);
    border: 1px solid rgba(47, 91, 157, 0.8);
    // background: rgba(67, 102, 155, 0.3);
    // border: 1px solid rgba(47, 91, 157, 0.8);
  }

  .map-style {

 src/views/screen/components/screen-table/index.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div class="table-container">
    <div class="table-content" ref="tabContent">
      <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
        <el-table-column prop="name" label="地区" align="center" width="100">
        </el-table-column>
        <el-table-column prop="data1" label="人脸设备总数" align="center">
        </el-table-column>
        <el-table-column prop="data2" label="车辆设备总数" align="center">
        </el-table-column>
        <el-table-column prop="data3" label="视频设备总数" align="center">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 40,
      tableData: [
        {
          name: '富顺县',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '荣县',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '高新区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '自流井区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '贡井区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '大安区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '沿滩区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
      ]
    }
  },
  methods: {
    computedHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          const content = this.$refs.tabContent;
          this.tableHeight = content.offsetHeight;
        })
      })
    }
  },
  mounted() {
    this.computedHeight();
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  // flex: 1;
  height: 355px;
  position: relative;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

  .table-content {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
  }
}



.rank-table {
  background-color: transparent !important;
  color: #fff !important;

  //滚动条的背景色
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: transparent !important;

}

::v-deep .el-table--group,
.el-table--border {
  border: 0;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-color: #56739e99 !important;
}

::v-deep .el-table--border .el-table__cell {
  border-color: #56739e99 !important;
}

::v-deep .el-table th.el-table__cell>.cell {
  color: #447ED6;
}

::v-deep .el-scrollbar__bar.is-vertical {
  display: none !important;
}

::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #447ed648;
}
</style>

 src/views/screen/components/screen-title/index.vue

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡市运维考核可视化
        大屏
      </div>
    </div>
  </div>
@@ -19,7 +19,7 @@

<style lang="scss" scoped>
.header-container {
  width: 1000px;
  width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
@@ -33,9 +33,9 @@
.header-text {
  position: absolute;
  left: 49%;
  top: 15px;
  top: 5px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
  font-size: 24px;
}
</style>

 src/views/screen/components/screen-wrapper/index.vue

@@ -12,7 +12,8 @@
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-detection></screen-detection>
        <screen-table></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
@@ -25,21 +26,21 @@
<script>
import SelectItem from '../select-item/index';
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenTable from '../screen-table/index';
export default {
  name: 'ScreenWrapper',
  components: {
    SelectItem,
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
    ScreenVideo,
    ScreenCar,
    ScreenMap
    ScreenMap,
    ScreenTable
  },
  methods: {
    returnPath() {

 src/views/screen/components/select-item/index.vue

@@ -7,6 +7,13 @@
      </el-select>
    </div>

    <div class="local-select">
      <div class="select-label">地区</div>
      <el-select v-model="localValue" popper-class="type-select" class="select-style" @change="setConfig">
        <el-option v-for="item in testData2" :key="item.name" :label="item.name" :value="item.value" />
      </el-select>
    </div>

    <div class="date-select">
      <div class="select-label">日期</div>
      <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -21,6 +28,7 @@
  data() {
    return {
      typeValue: 1,
      localValue: 1,
      dateValue: new Date(),
      testData1: [
        {
@@ -35,6 +43,36 @@
          name: '公安部数据',
          value: 3
        }
      ],
      testData2: [
      {
          name: '富顺县',
          value: 1,
        },
        {
          name: '荣县',
          value: 2,
        },
        {
          name: '高新区',
          value: 3,
        },
        {
          name: '自流井区',
          value: 4,
        },
        {
          name: '贡井区',
          value: 5,
        },
        {
          name: '大安区',
          value: 6,
        },
        {
          name: '沿滩区',
          value: 7,
        },
      ]
    }
  },
@@ -61,11 +99,25 @@
    flex-shrink: 0;
  }

  .local-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
    flex-shrink: 0;
  }

  .type-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 240px;
    width: 200px;
  }

  .local-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 200px;
  }

  .date-select {

 src/views/system/report/index.vue

@@ -17,6 +17,16 @@
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报备类型" prop="reportType">
        <el-select
          v-model="queryParams.reportType"
          placeholder="报备类型"
          clearable
        >
          <el-option label="事前报备" value="事前报备" />
          <el-option label="事后报备" value="事后报备" />
        </el-select>
      </el-form-item>
      <el-form-item label="报备时间">
        <el-date-picker
          v-model="daterangeCreateTime"

 src/views/system/threshold/index.vue

New file
@@ -0,0 +1,327 @@
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ycl:threshold:add']"
        >新增
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="thresholdList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="设备类型" align="center" prop="monitorType">
        <template slot-scope="scope">
          <span v-show="scope.row['monitorType'] === '1'">人脸</span>
          <span v-show="scope.row['monitorType'] === '2'">车辆</span>
          <span v-show="scope.row['monitorType'] === '3'">视频</span>
        </template>
      </el-table-column>
      <el-table-column label="超时天数" align="center" prop="timeout"/>
      <el-table-column label="指标" align="center" prop="indicator">
        <template slot-scope="scope">
          <div v-for="item in JSON.parse(scope.row.indicator)" :key="item">
            {{ item.label }}：{{ item.value }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ycl:threshold:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ycl:threshold:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改运维阈值对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="设备类型" prop="monitorType">
          <el-select v-model="form.monitorType" placeholder="请选择设备类型" @change="handleModeNameChange">
            <el-option label="人脸" value="1"/>
            <el-option label="车辆" value="2"/>
            <el-option label="视频" value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="超时天数" prop="timeout" label-width="150px">
          <el-input type="number" min="0" max="1000" v-model="form.timeout" placeholder="请输入超时天数"/>
        </el-form-item>
        <el-form-item :label="indicator.label" prop="indexOneValue" v-for="indicator in indicators" label-width="150px">
          <el-input class="el-input-width" v-model="indicator.value" :placeholder="'请输入' + indicator.label"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listThreshold, getThreshold, delThreshold, addThreshold, updateThreshold } from '@/api/platform/threshold'

export default {
  name: 'Threshold',
  data() {
    return {
      indicators: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 运维阈值表格数据
      thresholdList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        monitorType: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        monitorType: [
          { required: true, message: '设备类型：1人脸 2车辆 3视频不能为空', trigger: 'change' }
        ],
        timeout: [
          { required: true, message: '超时天数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询运维阈值列表 */
    getList() {
      this.loading = true
      listThreshold(this.queryParams).then(response => {
        this.thresholdList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        monitorType: null,
        timeout: null,
        indicator: null,
        createTime: null,
        updateTime: null,
        deleted: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加运维阈值'
      this.handleModeNameChange()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getThreshold(id).then(response => {
        this.form = response.data
        this.indicators = JSON.parse(this.form.indicator)
        this.open = true
        this.title = '修改运维阈值'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 将indicators转为json赋值到form
          this.form.indicator = JSON.stringify(this.indicators)
          if (this.form.id != null) {
            updateThreshold(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addThreshold(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除运维阈值编号为"' + ids + '"的数据项？').then(function() {
        return delThreshold(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 切换不同指标 */
    handleModeNameChange() {
      if (this.form.monitorType === '1' || this.form.monitorType === null) {
        this.indicators = [
          {
            label: '抓拍量',
            value: null
          },
          {
            label: '及时率',
            value: null
          },
          {
            label: '延迟量',
            value: null
          },
          {
            label: '抽检量',
            value: null
          },
          {
            label: '设备活跃率',
            value: null
          },
          {
            label: '抓拍及时率',
            value: null
          },
          {
            label: '时钟准确率',
            value: null
          },
          {
            label: '时钟不准确率',
            value: null
          }
        ]
      } else if (this.form.monitorType === '2') {
        this.indicators = [
          {
            label: '过车数据量',
            value: null
          },
          {
            label: '过车缺失率',
            value: null
          },
          {
            label: '有效过车数据量',
            value: null
          },
          {
            label: '抽检量',
            value: null
          },
          {
            label: '设备活跃率',
            value: null
          },
          {
            label: '抓拍及时率',
            value: null
          },
          {
            label: '时钟准确率',
            value: null
          },
          {
            label: '时钟不准确率',
            value: null
          }
        ]
      } else if (this.form.monitorType === '3') {
        this.indicators = [
          {
            label: '采集设备总数',
            value: null
          },
          {
            label: '监测正常设备数',
            value: null
          },
          {
            label: '编码异常设备数',
            value: null
          },
          {
            label: '经纬度异常设备数',
            value: null
          }
        ]
      }
    }
  }
}
</script>

 src/views/system/video/index.vue

@@ -116,30 +116,30 @@
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="标签" align="center" prop="tag" width="180"/>
      <el-table-column label="区域" align="center" prop="region" width="180"/>
      <el-table-column label="设备状态" align="center" prop="onState">
      <el-table-column label="标签" align="center" prop="tag" width="180" v-if="columns[0].visible"/>
      <el-table-column label="区域" align="center" prop="region" width="180" v-if="columns[1].visible"/>
      <el-table-column label="设备状态" align="center" prop="onState" v-if="columns[2].visible">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/>
      </template>
      </el-table-column>
      <el-table-column label="是否生成异常工单" align="center" prop="defaultOrder" width="180">
      <el-table-column label="是否生成异常工单" align="center" prop="defaultOrder" width="180" v-if="columns[3].visible">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.platform_yes_no" :value="scope.row.defaultOrder"/>
      </template>
      </el-table-column>
      <el-table-column label="数据时间" align="center" prop="installedTime" width="180"/>
      <el-table-column label="管理单位" align="center" prop="managementUnit" width="180"/>
      <el-table-column label="信令时延(ms)" align="center" prop="sipDelay" width="180"/>
      <el-table-column label="视频时延(ms)" align="center" prop="videoDelay" width="180"/>
      <el-table-column label="关键帧时延(ms)" align="center" prop="iframeDelay" width="180"/>
      <el-table-column label="数据时间" align="center" prop="installedTime" width="180" v-if="columns[4].visible"/>
      <el-table-column label="管理单位" align="center" prop="managementUnit" width="180" v-if="columns[5].visible"/>
      <el-table-column label="信令时延(ms)" align="center" prop="sipDelay" width="180" v-if="columns[6].visible"/>
      <el-table-column label="视频时延(ms)" align="center" prop="videoDelay" width="180" v-if="columns[7].visible"/>
      <el-table-column label="关键帧时延(ms)" align="center" prop="iframeDelay" width="180" v-if="columns[8].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button
@@ -215,6 +215,18 @@
  dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'],
  data() {
    return {
      // 列信息
      columns: [
        { key: 0, label: `标签`, visible: true },
        { key: 1, label: `区域`, visible: true },
        { key: 2, label: `设备状态`, visible: true },
        { key: 3, label: `是否生成异常工单`, visible: true },
        { key: 4, label: `数据时间`, visible: true },
        { key: 5, label: `管理单位`, visible: true },
        { key: 6, label: `信令时延`, visible: true },
        { key: 7, label: `视频时延`, visible: true },
        { key: 8, label: `关键帧时延`, visible: true }
      ],
      totalPosts: 6250,
      totalMembers: 6008,
      postsPercentage: 51,