Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / JichuXinxi.vue
@ZZJ ZZJ 16 days ago 74 KB update
<template>
  <div id="JichuXinxi">
    <div class="dialog-detail-box" v-if="dataCode == 'reservoir_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水库名称</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.name">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水库值班电话</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.dutyTelephone">
            {{ dialogFormDetail.dutyTelephone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div
            class="detail-value flex flex-align-center"
            :title="selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')"
          >
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">工程规模</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="project_scale" :value="dialogFormDetail.projectScale" />
            <!-- 注意:这里未添加:title属性,因为dict-tag组件可能不支持 -->
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">集水面积(km2)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.waterArea">
            {{ dialogFormDetail.waterArea }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">总库容(万m3)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.reservoirVolume">
            {{ dialogFormDetail.reservoirVolume }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">调洪库容(万m3)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.floodVolume">
            {{ dialogFormDetail.floodVolume }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">坝顶高程(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.damHight">
            {{ dialogFormDetail.damHight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">正常蓄水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.normalWaterLevel">
            {{ dialogFormDetail.normalWaterLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设计洪水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.designFloodLevel">
            {{ dialogFormDetail.designFloodLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">校核洪水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.verifyFloodLevel">
            {{ dialogFormDetail.verifyFloodLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-姓名</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolUserName">
            {{ dialogFormDetail.patrolUserName }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-单位</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolWorkPlace">
            {{ dialogFormDetail.patrolWorkPlace }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-职务</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolPost">
            {{ dialogFormDetail.patrolPost }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-电话</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolPhone">
            {{ dialogFormDetail.patrolPhone }}
          </div>
        </div>

        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
            <!-- 注意:图片部分未添加:title属性,因为通常图片不需要这样的提示 -->
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'lake_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">湖泊名称</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.name">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">湖泊别名</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.nickName">
            {{ dialogFormDetail.nickName }}
          </div>
        </div>
        <!-- 省略了部分代码 -->
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">境内面积(km²)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.domesticArea">
            {{ dialogFormDetail.domesticArea }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">总面积(km²)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.totalArea">
            {{ dialogFormDetail.totalArea }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">岸线长度(km)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.lakeLine">
            {{ dialogFormDetail.lakeLine }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div
            class="detail-value flex flex-align-center"
            :title="selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')"
          >
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <!-- 省略了部分代码 -->
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理部门</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.department">
            {{ dialogFormDetail.department }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">历年水文</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.hisHydrology">
            {{ dialogFormDetail.hisHydrology }}
          </div>
        </div>
        <!-- 省略了部分代码 -->
        <div class="flex flex-r" style="width: 100%">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'rain_water_pump_station_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵站名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用状态</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="usage_status" :value="dialogFormDetail.usageStatus" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用年限</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.usedYear }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵机个数</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpNumber }}
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">地面高程</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.elevation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">开关运行方案</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.plan">
            {{ dialogFormDetail.plan }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">位置</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵站类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="pump_station_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设计流量(m/s)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.designFlowRate }}
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">起排水位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.startLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">控制水位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.controlLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">装机功率(kw)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.power }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">抽排水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.waterBodies }}
          </div>
        </div>

        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'sewage_pump_station_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵站名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用状态</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="usage_status" :value="dialogFormDetail.usageStatus" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用年限</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.usedYear }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵机个数</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpNumber }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">地面高程</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.elevation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">起排水位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.startLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">控制水位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.controlLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">开关运行方案</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.plan">
            {{ dialogFormDetail.plan }}
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属污水系统</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.regionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.regionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵站级别</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.grade }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">现状规模</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.currentScale }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">汇入管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.entrance">
            <span class="ellipsis">{{ dialogFormDetail.entrance }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排出管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.discharge">
            <span class="ellipsis">{{ dialogFormDetail.discharge }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">位置</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">装机功率(kw)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.power }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'water_gate_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水闸名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用年限</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.usedYear }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="gate_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">位置</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">闸门高度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.gateHeight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">闸门宽度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.gateWidth }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">闸门孔数</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.gateHole }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设计流量</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.designFlowRate }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">闸底高程</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.bottomElevation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">联系方式</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属泵站</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpStation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.waterBody }}
          </div>
        </div>
        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">汇入管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.entrance">
            <span class="ellipsis">{{ dialogFormDetail.entrance }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排出管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.discharge">
            <span class="ellipsis">{{ dialogFormDetail.discharge }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'diversion_well_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">分流井名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">常水位(晴3天内水位)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.normalWaterLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">堰门高度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.hight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">闸门高度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.gateHight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属管理单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排入水体</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.importWaterBody">
            <span class="ellipsis">{{ dialogFormDetail.importWaterBody }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'water_region_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">流域名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系级别</div>
          <div class="detail-value flex flex-align-center"></div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系面积(km2)</div>
          <div class="detail-value flex flex-align-center"></div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">区内水系面积</div>
          <div class="detail-value flex flex-align-center"></div>
        </div>

        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r" style="width: 100%">
          <div class="detail-label flex flex-align-center">流域图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>

        <div class="flex flex-r" style="width: 100%">
          <div class="detail-label flex flex-align-center">下级流域</div>
          <div class="detail-value flex flex-align-center" v-if="dialogFormDetail.childList && dialogFormDetail.childList.length">
            <span
              style="margin-right: 5px; cursor: pointer"
              v-for="item in dialogFormDetail.childList"
              :key="item"
              :title="item.description || ''"
            >
              {{ item.name }}
            </span>
          </div>
        </div>

        <div class="flex flex-r" style="width: 100%">
          <div class="detail-label flex flex-align-center">上级流域</div>
          <div
            class="detail-value flex flex-align-center"
            style="cursor: pointer"
            :title="dialogFormDetail.parentList?.description || ''"
          >
            {{ dialogFormDetail.parentList?.name || '' }}
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'outlet_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口名称</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.outletName">
            <span class="ellipsis">{{ dialogFormDetail.outletName }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口编码</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.outletCode }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口别名</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.outletAsName }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">乡镇(街道)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.region }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">村(社区)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.village }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管径</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.diameter }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管材</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.material }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">入河方式</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.intoRiverWay">{{ getpaikouInfo(dialogFormDetail.intoRiverWay, rujianghe) }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">形状</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.mouthShape">{{ getpaikouInfo(dialogFormDetail.mouthShape, paikouxingzhuang) }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口一级分类</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.oneLevelType">{{ getpaikouInfo(dialogFormDetail.oneLevelType, leixingyi) }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口二级分类</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.twoLevelType">{{ getpaikouInfo(dialogFormDetail.twoLevelType, leixinger) }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排口三级分类</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.threeLevelType">{{ getpaikouInfo(dialogFormDetail.threeLevelType, leixingsan) }}</span>
          </div>
        </div>
        <!-- <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">需要溯源</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.isTraceability" />
          </div>
        </div> -->
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">污水来源</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.sewageSource">
            <span class="ellipsis">{{ dialogFormDetail.sewageSource }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">溯源情况</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.traceabilitySituation">
            <span class="ellipsis">{{ dialogFormDetail.traceabilitySituation }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">备注</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.remark">
            <span class="ellipsis">{{ dialogFormDetail.remark }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">详细地址</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>
        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.imageFileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <div class="detail-value flex flex-align-center">
              <el-image
                style="width: 80px; height: 80px"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :src="dialogFormDetail.imageFileUrl"
                fit="cover"
                :preview-src-list="[dialogFormDetail.imageFileUrl]"
              ></el-image>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'storage_tank_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">调蓄池名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.waterBody }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">位置</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属管理单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">库容/应急库容</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.storageCapacity }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">总液位高度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.totalLevelHeight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">实际水泵参数</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpParam }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水泵数量</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpNumber }}
          </div>
        </div>
        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">汇入管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.entrance">
            <span class="ellipsis">{{ dialogFormDetail.entrance }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排出管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.discharge">
            <span class="ellipsis">{{ dialogFormDetail.discharge }}</span>
          </div>
        </div>

        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <div class="detail-value flex flex-align-center">
              <el-image
                style="width: 80px; height: 80px"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :src="dialogFormDetail.fileUrl"
                fit="cover"
                :preview-src-list="[dialogFormDetail.fileUrl]"
              ></el-image>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'drainage_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排水户名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">申请单位</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.applyUnit">
            <span class="ellipsis">{{ dialogFormDetail.applyUnit }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">交件人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">交件人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">分级</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="drainage_info_grade" :value="dialogFormDetail.grade" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">分类</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="drainage_info_category" :value="dialogFormDetail.category" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">类别</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.type }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排水口</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.outlet }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排水管</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.drain }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排水量</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.volume }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排水去向</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.direction }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设置预</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.setPre }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">内部是</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isNumberState" :value="dialogFormDetail.isIn" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">是否有</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isNumberState" :value="dialogFormDetail.isThere" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">是否列</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isNumberState" :value="dialogFormDetail.isListed" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">有效开始日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.validityTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">有效截止时间</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.validityDeadline, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'sewage_factory_info' || dataCode == 'sewage_factory_station_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">污水厂名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="sewage_factory_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">位置</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用状态</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="usage_status" :value="dialogFormDetail.usageStatus" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">使用年限</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.usedYear }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">服务范围(km²)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.serviceArea }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属污水系统</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.regionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.regionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">规划规模(m3/d)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.planSituation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">现状规模(m3/d)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.nowSituation }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">受纳水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.importWaterBody }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">执行标准</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.executionStandard }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">实际污泥产量</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.mudProduction }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">污泥去向</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.mudDestination">
            <span class="ellipsis">{{ dialogFormDetail.mudDestination }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属管理单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">管理人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r" style="width: 100%">
          <div class="detail-label flex flex-align-center">描述</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'port_channel_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">港渠信息</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">港渠类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="channel_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所在街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">长度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.length }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">宽度</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.width }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">现状水质</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="water_quality_level" :value="dialogFormDetail.nowQuality" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水质目标</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="water_quality_level" :value="dialogFormDetail.targetQuality" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">起点</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.startSection }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">终点</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.endSection }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">是否主要港渠</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isNumberState" :value="dialogFormDetail.isMain" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">是否黑臭</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isNumberState" :value="dialogFormDetail.isBlack" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">连通水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.connectWater }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">汇入管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.entrance">
            <span class="ellipsis">{{ dialogFormDetail.entrance }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">排出管网信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.discharge">
            <span class="ellipsis">{{ dialogFormDetail.discharge }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-detail-box" v-if="dataCode == 'waterlogging_point_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.waterBody }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">渍水点名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">渍水类型</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="waterlog_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">是否官方在册</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="isState" :value="dialogFormDetail.isOfficially" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">降雨等级</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.rainLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">风险等级</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.riskLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">区位特征</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.locationCharacter">
            <span class="ellipsis"> {{ dialogFormDetail.locationCharacter }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">风险原因</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.riskReason }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">责任单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPost }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">责任人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">应急措施</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.floodDuty">
            <span class="ellipsis"> {{ dialogFormDetail.floodDuty }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">工程措施</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.projectDutu">
            <span class="ellipsis"> {{ dialogFormDetail.projectDutu }}</span>
          </div>
        </div>

        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">应急处置专班</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.floodTeam">
            <span class="ellipsis"> {{ dialogFormDetail.floodTeam }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-detail-box" v-if="dataCode == 'region_info'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系名称</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系级别</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="water_region_grade" :value="dialogFormDetail.grade" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">上级水系名称</div>
          <div
            class="detail-value flex flex-align-center"
            style="cursor: pointer"
            :title="dialogFormDetail.parentList?.description || ''"
          >
            {{ dialogFormDetail.parentList?.name || '' }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水系面积平方公里</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.area }}
          </div>
        </div>
        <div class="flex flex-r textarea">
          <div class="detail-label flex flex-align-center">概述信息</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.description">
            <span class="ellipsis">{{ dialogFormDetail.description }}</span>
          </div>
        </div>
        <div class="flex flex-r textarea" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="JichuXinxi">
const { proxy } = getCurrentInstance();
import { listwaterRegionInfo, getBaseDetail } from '@/api/MonitorAssetsOnMap';
import { getChineseFun } from '@/utils/ruoyi';

const rujianghe = proxy.fixDict['rujianghe'];
const paikouxingzhuang = proxy.fixDict['paikouxingzhuang'];
const leixingyi = proxy.fixDict['leixingyi'];
const leixinger = proxy.fixDict['leixinger'];
const leixingsan = proxy.fixDict['leixingsan'];

const {
  lake_level,
  project_scale,
  ownership,
  pump_station_type,
  usage_status,
  gate_type,
  drainage_info_grade,
  drainage_info_category,
  sewage_factory_type,
  waterlog_type,
  water_quality_level,
  channel_type,
} = proxy.useDict(
  'lake_level',
  'project_scale',
  'ownership',
  'pump_station_type',
  'usage_status',
  'gate_type',
  'drainage_info_grade',
  'drainage_info_category',
  'sewage_factory_type',
  'waterlog_type',
  'water_quality_level',
  'channel_type'
);

const is_state = proxy.fixDict['isState']; //是否字典
const isNumberState = proxy.fixDict['isNumberState']; //是否字典

const props = defineProps({
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});

const alllist = ref([]);
function getListlast() {
  listwaterRegionInfo().then(response => {
    alllist.value = response.data;
  });
}
const dialogFormDetail = ref([]);

// 根据传进来的dataid和datacod查询点位详情
function getDetailBycodeAndDataid() {
  let params = {
    dataId: props.dataID,
    dataCode: props.dataCode,
  };
  getBaseDetail(params).then(res => {
    console.log('getBaseDetail', res);
    dialogFormDetail.value = res.data;
  });
}

// 排口相关name
const getpaikouInfo = (id, data) => {
  return getChineseFun(data, 'value', id, 'label');
};
onMounted(() => {
  getListlast();
  getDetailBycodeAndDataid();
  // console.log('props', props);
  console.log('props.dataCode', props.dataCode);
});
</script>

<style lang="scss" scoped>
#JichuXinxi {
  width: 100%;
  height: 100%;

  .dialog-detail-box {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
    font-weight: bold;

    .flex-r {
      min-height: 40px;
      max-height: 75px;
    }

    .detail-label {
      font-size: 12px;
      text-align: left;
      width: 160px;
      background: transparent;
      color: #ccefff;
      border: none;
    }

    .detail-value {
      font-size: 14px;
      text-align: left;
      width: calc(100% - 165px);
      align-items: center;
      background: transparent;
      color: #ccefff;
      border: none;
      align-items: center;
      overflow: hidden;
    }

    .ellipsis {
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 显示最大行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dialog-form-detail {
      border: none;
    }

    .dialog-form-detail .flex-r {
      border: none;
    }
  }
}
.items-content {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 10px;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;

  .contentitem {
    // height: 10px;
    // line-height: 20px;
    width: 50%;
    display: flex;

    .name {
      width: 80px;
      color: #ccefff;
    }

    .value {
      width: calc(90% - 80px);
      font-size: 13px;
      font-weight: bold;
    }

    .gxname {
      width: 110px;
    }

    .gxvalue {
      width: calc(90% - 100px);
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出容器宽度的文本 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    }
  }
}

.img,
.textarea {
  width: 100% !important;
}
</style>