运行监控展示数据重构

fuliqi

2024-09-14 e58526cc3a60a8f5c0c22c0cc6fe31bd2f7dd9b2

 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,