运行监控展示数据重构

fuliqi

2024-09-14 e58526cc3a60a8f5c0c22c0cc6fe31bd2f7dd9b2

运行监控展示数据重构

 src/views/system/monitor/car/index.vue

@@ -87,11 +87,10 @@
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-form>



    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="ip" align="center" prop="ip" width="180"/>
      <el-table-column label="标签" align="center" width="180" v-if="columns[0].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.provinceTag == 0 ? "省厅" : "市局" }}</div>
@@ -104,13 +103,32 @@
      </template>
      </el-table-column>
      <el-table-column label="是否生成异常工单" align="center" prop="error" width="180" v-if="columns[3].visible" />
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[4].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[5].visible"/>
      <el-table-column label="当日抓拍量" align="center" prop="dataCount" width="180" v-if="columns[6].visible"/>
      <el-table-column label="时钟准确率" align="center" prop="clockPercent" width="180" v-if="columns[7].visible"/>
      <el-table-column label="大图可用率" align="center" prop="bigUsefulPercent" width="180" v-if="columns[8].visible"/>
      <el-table-column label="主要属性一致率" align="center" prop="majorConPercent" width="180" v-if="columns[9].visible"/>
      <el-table-column label="重要属性一致率" align="center" prop="importantConPercent" width="180" v-if="columns[10].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[4].visible"/>
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[5].visible"/>
      <el-table-column label="一机一档状态" align="center" prop="monitorQualify" width="180" v-if="columns[6].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.monitorQualify ? "正常" : "异常" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="是否为未注册设备" align="center" prop="newMonitor" width="180" v-if="columns[7].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.newMonitor ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="抓拍数据量监测" align="center" prop="snapResult" width="180" v-if="columns[8].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.snapResult === 1">正常</div>
          <div v-else-if="scope.row.snapResult === 2">无数据</div>
          <div v-else-if="scope.row.snapResult === 4">数据量少</div>
        </template>
      </el-table-column>
      <el-table-column label="当日抓拍量" align="center" prop="snapCount" width="180" v-if="columns[9].visible"/>
      <el-table-column label="时钟准确率" align="center" prop="clockPercent" width="180" v-if="columns[10].visible"/>
      <el-table-column label="上传及时率" align="center" prop="uploadPercent" width="180" v-if="columns[11].visible"/>
      <el-table-column label="主要属性一致率" align="center" prop="importantConPercent" width="180" v-if="columns[12].visible"/>
      <el-table-column label="全量属性一致率" align="center" prop="majorConPercent" width="180" v-if="columns[13].visible"/>
      <el-table-column label="大图可用率" align="center" prop="bigUsefulPercent" width="180" v-if="columns[14].visible"/>
      <el-table-column label="url可用率" align="center" prop="urlPercent" width="180" v-if="columns[15].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button
@@ -132,38 +150,60 @@
    />

    <!-- 设备资产详情 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
    <el-dialog title="车辆监控详情" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px" size="mini">
        <el-row>
          <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="设备编码：">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="设备名称：">{{ form.name }} </el-form-item>
            <el-form-item label="地区：">{{ form.area }} </el-form-item>
            <el-form-item label="上报部门：">{{ form.deptName }} </el-form-item>
            <el-form-item label="标签：">{{ form.provinceTag == 0 ? '省厅' : '市局' }}</el-form-item>
            <el-form-item label="设备状态：">
              <div v-if="form.onState === 1">可用</div>
              <div v-else-if="form.onState === 2">不可用</div>
              <div v-if="form.onState === 0">异常</div>
              <div v-else-if="form.onState === 1">正常</div>
            </el-form-item>

            <el-form-item label="管理单位：">{{ form.unitName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：">{{ form.address }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="ip：">{{ form.ip }}</el-form-item>
            <el-form-item label="地区：">{{ form.area }}</el-form-item>
            <el-form-item label="是否生成异常工单：">
              <div v-if="form.defaultOrder === 1">是</div>
              <div v-else-if="form.defaultOrder === 2">否</div>
              {{ form.error }}
            </el-form-item>
            <el-form-item label="运维时间：">{{ form.startTime + '至' + form.endTime }}</el-form-item>
          </el-col>
        </el-row>
        <!-- 运行数据的分隔符开始新的行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="安装时间：">{{ form.installedTime }}</el-form-item>
            <el-divider content-position="left">运行数据</el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="管理单位：">{{ form.managementUnit }}</el-form-item>
            <el-form-item label="数据时间：">{{ form.mongoCreateTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="过车数据量：">{{ form.a }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="一机一档状态：">
              {{ form.monitorQualify ? '正常' : '异常' }}
            </el-form-item>
            <el-form-item label="抓拍数据量监测：">
              <div v-if="form.snapResult === 1">正常</div>
              <div v-else-if="form.snapResult === 2">无数据</div>
              <div v-else-if="form.snapResult === 4">数据量少</div>
            </el-form-item>
            <el-form-item label="时钟准确率：">{{ form.clockPercent }}</el-form-item>
            <el-form-item label="主要属性一致率：">{{ form.importantConPercent }}</el-form-item>
            <el-form-item label="大图可用率：">{{ form.bigUsefulPercent }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="持续无数据天数：">{{ form.a }}</el-form-item>

          <el-col :span="12">
            <el-form-item label="是否为未注册设备：">
              {{ form.newMonitor ? '是' : '否' }}
            </el-form-item>
            <el-form-item label="当日抓拍量：">{{ form.snapCount }}</el-form-item>
            <el-form-item label="上传及时率：">{{ form.uploadPercent }}</el-form-item>
            <el-form-item label="全量属性一致率：">{{ form.majorConPercent }}</el-form-item>
            <el-form-item label="url可用率：">{{ form.urlPercent }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
@@ -171,6 +211,7 @@
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

@@ -189,13 +230,18 @@
        { 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 },
        { key: 9, label: `主要属性一致率`, visible: true },
        { key: 10, label: `重要属性一致率`, visible: true },
        { key: 4, label: `管理单位`, visible: true },
        { key: 5, label: `数据时间`, visible: false },
        { key: 6, label: `一机一档状态`, visible: false },
        { key: 7, label: `是否为未注册设备`, visible: false },
        { key: 8, label: `抓拍数据量监测`, visible: false },
        { key: 9, label: `当日抓拍量`, visible: false },
        { key: 10, label: `时钟准确率`, visible: false },
        { key: 11, label: `上传及时率`, visible: false },
        { key: 12, label: `主要属性一致率`, visible: false },
        { key: 13, label: `全量属性一致率`, visible: false },
        { key: 14, label: `图片访问异常量`, visible: false },
        { key: 15, label: `大图不可用量`, visible: false }
      ],
      count: {
        totalPosts: 0,
@@ -406,6 +452,9 @@
.tabInactive:hover {
  background-color: #edf2f6;
}



.box-card {
  background-color: #ffffff;
  width: 100%;

 src/views/system/monitor/face/index.vue

@@ -89,6 +89,7 @@
    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="ip" align="center" prop="ip" width="180"/>
      <el-table-column label="标签" align="center" width="180" v-if="columns[0].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.provinceTag == 0 ? "省厅" : "市局" }}</div>
@@ -101,12 +102,32 @@
      </template>
      </el-table-column>
      <el-table-column label="是否生成异常工单" align="center" prop="error" width="180" v-if="columns[3].visible" />
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[4].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[5].visible"/>
      <el-table-column label="抓拍量" align="center" prop="dataCount" width="180" v-if="columns[6].visible"/>
      <el-table-column label="时钟准确率" align="center" prop="clockPercent" width="180" v-if="columns[7].visible"/>
      <el-table-column label="大图可用率" align="center" prop="bigUsefulPercent" width="180" v-if="columns[8].visible"/>
      <el-table-column label="人脸合格率" align="center" prop="faceEligPercent" width="180" v-if="columns[9].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[4].visible"/>
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[5].visible"/>
      <el-table-column label="一机一档状态" align="center" prop="monitorQualify" width="180" v-if="columns[6].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.monitorQualify ? "正常" : "异常" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="是否为未注册设备" align="center" prop="newMonitor" width="180" v-if="columns[7].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.newMonitor ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="抓拍数据量监测" align="center" prop="snapResult" width="180" v-if="columns[8].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.snapResult === 1">正常</div>
          <div v-else-if="scope.row.snapResult === 2">无数据</div>
          <div v-else-if="scope.row.snapResult === 4">数据量少</div>
        </template>
      </el-table-column>
      <el-table-column label="当日抓拍量" align="center" prop="snapCount" width="180" v-if="columns[9].visible"/>
      <el-table-column label="时钟准确率" align="center" prop="clockPercent" width="180" v-if="columns[10].visible"/>
      <el-table-column label="上传及时率" align="center" prop="uploadPercent" width="180" v-if="columns[11].visible"/>
      <el-table-column label="建模失败率" align="center" prop="failPercent" width="180" v-if="columns[12].visible"/>
      <el-table-column label="人脸合格率" align="center" prop="facePercent" width="180" v-if="columns[13].visible"/>
      <el-table-column label="大图可用率" align="center" prop="bigUsefulPercent" width="180" v-if="columns[14].visible"/>
      <el-table-column label="url可用率" align="center" prop="urlPercent" width="180" v-if="columns[15].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button
@@ -170,37 +191,59 @@
    </el-dialog>

    <!-- 设备资产详情 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
    <el-dialog title="人脸监控详情" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px" size="mini">
        <el-row>
          <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="设备编码：">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="设备名称：">{{ form.name }} </el-form-item>
            <el-form-item label="地区：">{{ form.address }} </el-form-item>
            <el-form-item label="上报部门：">{{ form.deptName }} </el-form-item>
            <el-form-item label="标签：">{{ form.provinceTag == 0 ? '省厅' : '市局' }}</el-form-item>
            <el-form-item label="设备状态：">
              <div v-if="form.onState === 1">可用</div>
              <div v-else-if="form.onState === 2">不可用</div>
              <div v-if="form.onState === 0">异常</div>
              <div v-else-if="form.onState === 1">正常</div>
            </el-form-item>
            <el-form-item label="管理单位：">{{ form.unitName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：">{{ form.address }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="ip：">{{ form.ip }}</el-form-item>
            <el-form-item label="地区：">{{ form.area }}</el-form-item>
            <el-form-item label="是否生成异常工单：">
              <div v-if="form.defaultOrder === 1">是</div>
              <div v-else-if="form.defaultOrder === 2">否</div>
              {{ form.error }}
            </el-form-item>
            <el-form-item label="运维时间：">{{ form.startTime + '至' + form.endTime }}</el-form-item>
          </el-col>
        </el-row>
        <!-- 运行数据的分隔符开始新的行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="安装时间：">{{ form.installedTime }}</el-form-item>
            <el-divider content-position="left">运行数据</el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="管理单位：">{{ form.managementUnit }}</el-form-item>
            <el-form-item label="数据时间：">{{ form.mongoCreateTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抓拍量："></el-form-item>
          <el-col :span="12">
            <el-form-item label="一机一档状态：">
              {{ form.monitorQualify ? '正常' : '异常' }}
            </el-form-item>
            <el-form-item label="抓拍数据量监测：">
              <div v-if="form.snapResult === 1">正常</div>
              <div v-else-if="form.snapResult === 2">无数据</div>
              <div v-else-if="form.snapResult === 4">数据量少</div>
            </el-form-item>
            <el-form-item label="时钟准确率：">{{ form.clockPercent }}</el-form-item>
            <el-form-item label="建模失败率：">{{ form.failPercent }}</el-form-item>
            <el-form-item label="大图可用率：">{{ form.bigUsefulPercent }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="持续无数据天数："></el-form-item>
          <el-col :span="12">
            <el-form-item label="是否为未注册设备：">
              {{ form.newMonitor ? '是' : '否' }}
            </el-form-item>
            <el-form-item label="当日抓拍量：">{{ form.snapCount }}</el-form-item>
            <el-form-item label="上传及时率：">{{ form.uploadPercent }}</el-form-item>
            <el-form-item label="人脸合格率：">{{ form.facePercent }}</el-form-item>
            <el-form-item label="url可用率：">{{ form.urlPercent }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
@@ -208,6 +251,7 @@
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

@@ -226,12 +270,18 @@
        { 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 },
        { key: 9, label: `人脸合格率`, visible: true }
        { key: 4, label: `管理单位`, visible: true },
        { key: 5, label: `数据时间`, visible: false },
        { key: 6, label: `一机一档状态`, visible: false },
        { key: 7, label: `是否为未注册设备`, visible: false },
        { key: 8, label: `抓拍数据量监测`, visible: false },
        { key: 9, label: `当日抓拍量`, visible: false },
        { key: 10, label: `时钟准确率`, visible: false },
        { key: 11, label: `上传及时率`, visible: false },
        { key: 12, label: `建模失败率`, visible: false },
        { key: 13, label: `人脸合格率`, visible: false },
        { key: 14, label: `图片访问异常量`, visible: false },
        { key: 15, label: `大图不可用量`, visible: false }
      ],
      count: {
        totalPosts: 0,

 src/views/system/monitor/recovery/index.vue

@@ -86,6 +86,7 @@
    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180px"/>
      <el-table-column label="ip" align="center" prop="ip" width="180"/>
      <el-table-column label="设备类型" align="center" prop="cameraFunType" width="180px">
        <template slot-scope="scope">
          {{ translateCameraFunType(scope.row.cameraFunType) }}
@@ -103,10 +104,14 @@
        </template>
      </el-table-column>
      <el-table-column label="是否生成异常工单" align="center" prop="error" width="180px" v-if="columns[3].visible"/>
      <el-table-column label="异常原因" align="center" prop="reason" width="180px" v-if="columns[4].visible"/>
      <el-table-column label="异常恢复时间" align="center" prop="recoveryTime" width="180px" v-if="columns[5].visible">
      <el-table-column label="异常恢复时间" align="center" prop="recoveryTime" width="180px" v-if="columns[4].visible">
      </el-table-column>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180px" v-if="columns[6].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180px" v-if="columns[5].visible"/>
      <el-table-column label="工单编号" align="center" prop="workOrderNo" width="180px" v-if="columns[6].visible"/>
      <el-table-column label="联系人" align="center" prop="unitContact" width="180px" v-if="columns[7].visible"/>
      <el-table-column label="联系电话" align="center" prop="unitContactPhone" width="180px" v-if="columns[8].visible"/>
      <el-table-column label="运维人员名称" align="center" prop="ywPeopleName" width="180px" v-if="columns[9].visible"/>
      <el-table-column label="故障类型" align="center" prop="errorType" width="180px" v-if="columns[10].visible"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
@@ -129,33 +134,52 @@
    />

    <!-- 设备资产详情 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
    <el-dialog title="异常恢复监控详情" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px" size="mini">
        <el-row>
          <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="设备编码：">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
            <el-form-item label="标签：">{{ form.deptName }}</el-form-item>
            <el-form-item label="标签：">{{ form.provinceTag == 0 ? '省厅' : '市局' }}</el-form-item>
            <el-form-item label="设备状态：">
              <div v-if="form.onState === 1">可用</div>
              <div v-else-if="form.onState === 2">不可用</div>
              <div v-if="form.onState === 0">异常</div>
              <div v-else-if="form.onState === 1">正常</div>
            </el-form-item>
            <el-form-item label="管理单位：">{{ form.unitName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：">{{ form.address }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="ip：">{{ form.ip }}</el-form-item>
            <el-form-item label="地区：">{{ form.area }}</el-form-item>
            <el-form-item label="是否生成异常工单：">
              <div v-if="form.defaultOrder === 1">是</div>
              <div v-else-if="form.defaultOrder === 2">否</div>
              {{ form.error }}
            </el-form-item>
            <el-form-item label="运维时间：">{{ form.startTime + '至' + form.endTime }}</el-form-item>
          </el-col>
        </el-row>
        <!-- 工单数据的分隔符开始新的行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="异常原因：">{{ form.reason }}</el-form-item>
            <el-divider content-position="left">工单数据</el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="安装时间：">{{ form.installedTime }}</el-form-item>
            <el-form-item label="工单编号：">{{ form.workOrderNo }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="管理单位：">{{ form.managementUnit }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="联系人：">
              {{ form.unitContact }}
            </el-form-item>
            <el-form-item label="运维人员名称：">
              {{  form.ywPeopleName }}
            </el-form-item>
            <el-form-item label="故障类型：">{{ form.errorType }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：">
              {{ form.unitContactPhone }}
            </el-form-item>
            <el-form-item label="异常恢复时间：">{{ form.recoveryTime }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
@@ -189,9 +213,13 @@
        {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: 4, label: `异常恢复时间`, visible: true},
        {key: 5, label: `管理单位`, visible: true},
        {key: 6, label: `工单编号`, visible: false},
        {key: 7, label: `联系人`, visible: false},
        {key: 8, label: `联系电话`, visible: false},
        {key: 9, label: `运维人员名称`, visible: false},
        {key: 10, label: `故障类型`, visible: false},
      ],
      count: {
        totalPosts: 0,

 src/views/system/monitor/video/index.vue

@@ -95,6 +95,7 @@
    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="ip" align="center" prop="ip" width="180"/>
      <el-table-column label="标签" align="center" width="180" v-if="columns[0].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.provinceTag == 0 ? "省厅" : "市局" }}</div>
@@ -107,11 +108,44 @@
        </template>
      </el-table-column>
      <el-table-column label="是否生成异常工单" align="center" prop="error" width="180" v-if="columns[3].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[5].visible"/>
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[4].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="ifmDelay" width="180" v-if="columns[8].visible"/>
      <el-table-column label="管理单位" align="center" prop="unitName" width="180" v-if="columns[4].visible"/>
      <el-table-column label="数据时间" align="center" prop="mongoCreateTime" width="180" v-if="columns[5].visible"/>
      <el-table-column label="一机一档状态" align="center" prop="monitorQualify" width="180" v-if="columns[6].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.monitorQualify ? "正常" : "异常" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="是否为未注册设备" align="center" prop="newMonitor" width="180" v-if="columns[7].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.newMonitor ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="录像完整状态" align="center" prop="videoComplete" width="180" v-if="columns[8].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.videoComplete === 1">完整</div>
          <div v-else-if="scope.row.videoComplete === 0">间歇</div>
          <div v-else-if="scope.row.videoComplete === -1">异常</div>
        </template>
      </el-table-column>
      <el-table-column label="录像缺失时长" align="center" prop="videoLoseTime" width="180" v-if="columns[9].visible">
        <template slot-scope="scope">
          <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '分钟'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="OSD标注" align="center" prop="OSD" width="180" v-if="columns[10].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.OSD === 1">正常</div>
          <div v-else-if="scope.row.OSD === 0">未知</div>
          <div v-else-if="scope.row.OSD === -1">异常</div>
        </template>
      </el-table-column>
      <el-table-column label="OSD时间" align="center" prop="OSDTime" width="180" v-if="columns[11].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.OSDTime === 1">正常</div>
          <div v-else-if="scope.row.OSDTime === 0">未知</div>
          <div v-else-if="scope.row.OSDTime === -1">异常</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
@@ -134,40 +168,63 @@
    />

    <!-- 设备资产详情 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
    <el-dialog title="视频监控详情" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px" size="mini">
        <el-row>
          <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="设备编码：">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
            <el-form-item label="地区：">{{ form.address }}</el-form-item>
            <el-form-item label="上报部门：">{{ form.deptName }}</el-form-item>
            <el-form-item label="标签：">{{ form.provinceTag == 0 ? '省厅' : '市局' }}</el-form-item>
            <el-form-item label="设备状态：">
              <div v-if="form.onState === 1">可用</div>
              <div v-else-if="form.onState === 2">不可用</div>
              <div v-if="form.onState === 0">异常</div>
              <div v-else-if="form.onState === 1">正常</div>
            </el-form-item>
            <el-form-item label="管理单位：">{{ form.unitName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：">{{ form.address }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="ip：">{{ form.ip }}</el-form-item>
            <el-form-item label="地区：">{{ form.area }}</el-form-item>
            <el-form-item label="是否生成异常工单：">
              <div v-if="form.defaultOrder === 1">是</div>
              <div v-else-if="form.defaultOrder === 2">否</div>
              {{ form.error }}
            </el-form-item>
            <el-form-item label="运维时间：">{{ form.startTime + '至' + form.endTime }}</el-form-item>
          </el-col>
        </el-row>
        <!-- 运行数据的分隔符开始新的行 -->
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left">运行数据</el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="数据时间：">{{ form.mongoCreateTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一机一档状态：">
              {{ form.monitorQualify ? '正常' : '异常' }}
            </el-form-item>
            <el-form-item label="录像完整状态：">
              <div v-if="form.videoComplete === 1">完整</div>
              <div v-else-if="form.videoComplete === 0">间歇</div>
              <div v-else-if="form.videoComplete === -1">异常</div>
            </el-form-item>
            <el-form-item label="OSD标注：">
              <div v-if="form.OSD === 1">正常</div>
              <div v-else-if="form.OSD === 0">未知</div>
              <div v-else-if="form.OSD === -1">异常</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="安装时间：">{{ form.installedTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="管理单位：">{{ form.managementUnit }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="信令时延(ms)："></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="视频时延(ms)："></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键帧时延(ms)："></el-form-item>
          <el-col :span="12">
            <el-form-item label="是否为未注册设备：">
              {{ form.newMonitor ? '是' : '否' }}
            </el-form-item>
            <el-form-item label="录像缺失时长：">{{ (form.videoLoseTime * 60).toFixed(2) + '分钟' }}</el-form-item>
            <el-form-item label="OSD时间：">
              <div v-if="form.OSDTime === 1">正常</div>
              <div v-else-if="form.OSDTime === 0">未知</div>
              <div v-else-if="form.OSDTime === -1">异常</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
@@ -194,11 +251,14 @@
        {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}
        {key: 4, label: `管理单位`, visible: true},
        {key: 5, label: `数据时间`, visible: false},
        {key: 6, label: `一机一档状态`, visible: false},
        {key: 7, label: `是否为未注册设备`, visible: false},
        {key: 8, label: `录像完整状态`, visible: false},
        {key: 9, label: `录像缺失时长`, visible: false},
        {key: 10, label: `OSD标注`, visible: false},
        {key: 11, label: `OSD时间`, visible: false}
      ],
      count: {
        totalPosts: 0,