<template>
  <div class="manage-container">
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="1000px"
      @close="close"
    >
      <el-table
        id="table"
        v-loading="listLoading"
        :data="appearanceData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="站容站貌">
          <el-table-column label="周边环境" align="center">
            <el-table-column
              fixed
              prop="environment.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="environment.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.environment.url"
                  style="width: 100px; height: 100px"
                  :src="row.environment.url"
                  :preview-src-list="row.environment.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="道路通畅" align="center">
            <el-table-column
              fixed
              prop="road.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="road.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.road.url"
                  style="width: 100px; height: 100px"
                  :src="row.road.url"
                  :preview-src-list="row.road.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="围栏状态" align="center">
            <el-table-column
              fixed
              prop="fence.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="fence.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.fence.url"
                  style="width: 100px; height: 100px"
                  :src="row.fence.url"
                  :preview-src-list="row.fence.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="绿化平整" align="center">
            <el-table-column
              fixed
              prop="greening.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="greening.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.greening.url"
                  style="width: 100px; height: 100px"
                  :src="row.greening.url"
                  :preview-src-list="row.greening.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="单元井盖" align="center">
            <el-table-column
              fixed
              prop="manholeCover.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="manholeCover.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.manholeCover.url"
                  style="width: 100px; height: 100px"
                  :src="row.manholeCover.url"
                  :preview-src-list="row.manholeCover.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="走道板" align="center">
            <el-table-column
              fixed
              prop="aisleBoard.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="aisleBoard.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.aisleBoard.url"
                  style="width: 100px; height: 100px"
                  :src="row.aisleBoard.url"
                  :preview-src-list="row.aisleBoard.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="工艺牌" align="center">
            <el-table-column
              fixed
              prop="processCard.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="processCard.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.processCard.url"
                  style="width: 100px; height: 100px"
                  :src="row.processCard.url"
                  :preview-src-list="row.processCard.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="广告牌" align="center">
            <el-table-column
              fixed
              prop="billboard.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="billboard.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.billboard.url"
                  style="width: 100px; height: 100px"
                  :src="row.billboard.url"
                  :preview-src-list="row.billboard.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="维修情况" align="center">
            <el-table-column
              fixed
              prop="maintenance.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="maintenance.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.maintenance.url"
                  style="width: 100px; height: 100px"
                  :src="row.maintenance.url"
                  :preview-src-list="row.maintenance.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>

      <el-table
        id="table"
        v-loading="listLoading"
        :data="equipmentWellData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="设备井检查">
          <el-table-column label="提升泵" align="center">
            <el-table-column
              fixed
              prop="liftPump.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="liftPump.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.liftPump.url"
                  style="width: 100px; height: 100px"
                  :src="row.liftPump.url"
                  :preview-src-list="row.liftPump.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="阀门井" align="center">
            <el-table-column
              fixed
              prop="valveShaft.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="valveShaft.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.valveShaft.url"
                  style="width: 100px; height: 100px"
                  :src="row.valveShaft.url"
                  :preview-src-list="row.valveShaft.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="计量井" align="center">
            <el-table-column
              fixed
              prop="measuringWell.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="measuringWell.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.measuringWell.url"
                  style="width: 100px; height: 100px"
                  :src="row.measuringWell.url"
                  :preview-src-list="row.measuringWell.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="曝气量" align="center">
            <el-table-column
              fixed
              prop="air.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="air.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.air.url"
                  style="width: 100px; height: 100px"
                  :src="row.air.url"
                  :preview-src-list="row.air.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="消化液回流" align="center">
            <el-table-column
              fixed
              prop="digestiveJuices.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="digestiveJuices.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.digestiveJuices.url"
                  style="width: 100px; height: 100px"
                  :src="row.digestiveJuices.url"
                  :preview-src-list="row.digestiveJuices.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="污泥回流" align="center">
            <el-table-column
              fixed
              prop="sludge.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="sludge.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.sludge.url"
                  style="width: 100px; height: 100px"
                  :src="row.sludge.url"
                  :preview-src-list="row.sludge.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="载体微生物" align="center">
            <el-table-column
              fixed
              prop="microbial.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="microbial.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.microbial.url"
                  style="width: 100px; height: 100px"
                  :src="row.microbial.url"
                  :preview-src-list="row.microbial.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="沉淀池" align="center">
            <el-table-column
              fixed
              prop="settlingBasin.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="settlingBasin.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.settlingBasin.url"
                  style="width: 100px; height: 100px"
                  :src="row.settlingBasin.url"
                  :preview-src-list="row.settlingBasin.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="取样观察池" align="center">
            <el-table-column
              fixed
              prop="samplingPool.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="samplingPool.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.samplingPool.url"
                  style="width: 100px; height: 100px"
                  :src="row.samplingPool.url"
                  :preview-src-list="row.samplingPool.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>

      <el-table
        id="table"
        v-loading="listLoading"
        :data="controlCabinetData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="控制柜检查">
          <el-table-column label="外观" align="center">
            <el-table-column
              fixed
              prop="external.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="external.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.external.url"
                  style="width: 100px; height: 100px"
                  :src="row.external.url"
                  :preview-src-list="row.external.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="内部" align="center">
            <el-table-column
              fixed
              prop="internal.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="internal.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.internal.url"
                  style="width: 100px; height: 100px"
                  :src="row.internal.url"
                  :preview-src-list="row.internal.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电路系统" align="center">
            <el-table-column
              fixed
              prop="circuitSystem.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="circuitSystem.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.circuitSystem.url"
                  style="width: 100px; height: 100px"
                  :src="row.circuitSystem.url"
                  :preview-src-list="row.circuitSystem.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="继电器" align="center">
            <el-table-column
              fixed
              prop="relay.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="relay.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.relay.url"
                  style="width: 100px; height: 100px"
                  :src="row.relay.url"
                  :preview-src-list="row.relay.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="远程模块" align="center">
            <el-table-column
              fixed
              prop="remoteModule.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="remoteModule.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.remoteModule.url"
                  style="width: 100px; height: 100px"
                  :src="row.remoteModule.url"
                  :preview-src-list="row.remoteModule.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="显示屏" align="center">
            <el-table-column
              fixed
              prop="display.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="display.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.display.url"
                  style="width: 100px; height: 100px"
                  :src="row.display.url"
                  :preview-src-list="row.display.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="流量计" align="center">
            <el-table-column
              fixed
              prop="flowMeter.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="flowMeter.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.flowMeter.url"
                  style="width: 100px; height: 100px"
                  :src="row.flowMeter.url"
                  :preview-src-list="row.flowMeter.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电表" align="center">
            <el-table-column
              fixed
              prop="electricMeter.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="electricMeter.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.electricMeter.url"
                  style="width: 100px; height: 100px"
                  :src="row.electricMeter.url"
                  :preview-src-list="row.electricMeter.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="管线" align="center">
            <el-table-column
              fixed
              prop="pipeline.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="pipeline.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.pipeline.url"
                  style="width: 100px; height: 100px"
                  :src="row.pipeline.url"
                  :preview-src-list="row.pipeline.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="风机" align="center">
            <el-table-column
              fixed
              prop="fan.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="fan.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.fan.url"
                  style="width: 100px; height: 100px"
                  :src="row.fan.url"
                  :preview-src-list="row.fan.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="液位状态" align="center">
            <el-table-column
              fixed
              prop="liquidState.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="liquidState.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.liquidState.url"
                  style="width: 100px; height: 100px"
                  :src="row.liquidState.url"
                  :preview-src-list="row.liquidState.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-table
        id="table"
        v-loading="listLoading"
        :data="waterData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="水质水量">
          <el-table-column label="进水量" align="center">
            <el-table-column
              fixed
              prop="intoWater.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="intoWater.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.intoWater.url"
                  style="width: 100px; height: 100px"
                  :src="row.intoWater.url"
                  :preview-src-list="row.intoWater.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="水流状况" align="center">
            <el-table-column
              fixed
              prop="currentSituation.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="currentSituation.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.currentSituation.url"
                  style="width: 100px; height: 100px"
                  :src="row.currentSituation.url"
                  :preview-src-list="row.currentSituation.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="进水水质" align="center">
            <el-table-column
              fixed
              prop="waterQuality.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="waterQuality.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.waterQuality.url"
                  style="width: 100px; height: 100px"
                  :src="row.waterQuality.url"
                  :preview-src-list="row.waterQuality.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="进水格栅" align="center">
            <el-table-column
              fixed
              prop="intakeGrille.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="intakeGrille.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.intakeGrille.url"
                  style="width: 100px; height: 100px"
                  :src="row.intakeGrille.url"
                  :preview-src-list="row.intakeGrille.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="水质检查" align="center">
            <el-table-column
              fixed
              prop="waterQualityInspection.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="waterQualityInspection.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.waterQualityInspection.url"
                  style="width: 100px; height: 100px"
                  :src="row.waterQualityInspection.url"
                  :preview-src-list="row.waterQualityInspection.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="排水情况" align="center">
            <el-table-column
              fixed
              prop="drainage.exception"
              label="是否异常"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="drainage.dispose"
              label="是否处理"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="img" :label="$t('sensor.tp')" width="100" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.drainage.url"
                  style="width: 100px; height: 100px"
                  :src="row.drainage.url"
                  :preview-src-list="row.drainage.fileList"
                ></el-image>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { baseURL } from '@/config';
export default {
  data() {
    return {
      background: true,
      listLoading: false,
      dialogFormVisible: false,
      title: '',
      tableData: [],
      appearanceData: [],
      equipmentWellData: [],
      controlCabinetData: [],
      waterData: [],
      filePath: baseURL + '/static/img/',
    };
  },
  methods: {
    showDetail(row) {
      const data = [];
      data.push({
        appearance: row.appearance,
        equipmentWell: row.equipmentWell,
        controlCabinet: row.controlCabinet,
        water: row.water,
      });
      // this.listLoading = true;
      Object.keys(data[0]).map(item => {
        Object.keys(data[0][item]).map(field => {
          var imgList = data[0][item][field].img;
          if (imgList) {
            var imgStr = imgList.substring(0, imgList.lastIndexOf(','));
            var img = imgStr.split(',');
            var imgArr = [];
            for (var j = 0; j < img.length; j++) {
              if (img[j]) {
                imgArr.push([this.filePath + img[j]]);
              }
            }
            data[0][item][field].url = this.filePath + img[0];
            data[0][item][field].fileList = imgArr;
          }
        });
      });
      this.appearanceData[0] = data[0].appearance;
      this.equipmentWellData[0] = data[0].equipmentWell;
      this.controlCabinetData[0] = data[0].controlCabinet;
      this.waterData[0] = data[0].water;
      this.title = '巡检填报详情';
      this.dialogFormVisible = true;
      // setTimeout(() => {
      //   this.listLoading = false;
      // }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px !important;
}
.el-select {
  width: 200px !important;
}
.manage-button {
  padding-left: 12px;
  margin-bottom: 30px;
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
}
</style>
