运行监控展示数据重构

fuliqi

2024-09-14 e58526cc3a60a8f5c0c22c0cc6fe31bd2f7dd9b2

 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,