Newer
Older
KaiFengPC / src / views / floodSys / repair / waterPointDetail.vue
@zhangdeliang zhangdeliang on 3 Sep 11 KB update
  1. <template>
  2. <!-- 易涝积水点详情 -->
  3. <div class="publicContainer">
  4. <el-tabs v-model="activeName" class="demo-tabs">
  5. <el-tab-pane label="基本信息" name="1">
  6. <!-- 基本信息 -->
  7. <div class="publicDetail">
  8. <div class="part" v-for="(item, index) in baseInfo" :key="index">
  9. <p class="title">{{ item.name }}:</p>
  10. <p
  11. class="content"
  12. v-if="
  13. item.value == 'isEngineeringRenovation' ||
  14. item.value == 'isPlanRectification' ||
  15. item.value == 'isCameraInstall' ||
  16. item.value == 'isClearDredg' ||
  17. item.value == 'isPersonDuty' ||
  18. item.value == 'isProjectAdminister' ||
  19. item.value == 'isStandbyEquipment'
  20. "
  21. >
  22. {{ props.detailObj[item.value] == 0 ? '是' : '否' }}
  23. </p>
  24. <p class="content" v-else-if="item.value == 'waterlogging'">
  25. <dict-tag :options="waterlogging_type" :value="props.detailObj['waterlogging']" />
  26. </p>
  27. <p class="content" v-else-if="item.value == 'originType'">
  28. <dict-tag :options="waterlogging_origin" :value="props.detailObj['originType']" />
  29. </p>
  30. <p class="content" v-else>{{ props.detailObj[item.value] }}</p>
  31. </div>
  32. </div>
  33. </el-tab-pane>
  34. <el-tab-pane label="GIS地图位置" name="2">
  35. <!-- GIS地图位置 -->
  36. GIS地图位置
  37. </el-tab-pane>
  38. <el-tab-pane label="历史积水深度" name="3">
  39. <!-- 历史积水深度 -->
  40. <el-form :model="queryParams" :inline="true" ref="queryRef">
  41. <el-row>
  42. <!-- <el-col :span="12">
  43. <el-form-item label="积水点监测站点名称"
  44. prop="postCode">
  45. <el-input v-model="queryParams.postCode"
  46. placeholder="请输入"
  47. clearable
  48. @keyup.enter="handleQuery"
  49. style="width:160px" />
  50. </el-form-item>
  51. </el-col> -->
  52. <el-col :span="10">
  53. <el-form-item label="积水发生时间" prop="daterange">
  54. <el-date-picker
  55. type="daterange"
  56. v-model="queryParams.daterange"
  57. value-format="YYYY-MM-DD"
  58. start-placeholder="开始日期"
  59. end-placeholder="结束日期"
  60. placeholder="请选择日期"
  61. style="width: 240px"
  62. >
  63. </el-date-picker>
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="8">
  67. <el-form-item label="积水深度" prop="postCode">
  68. <el-select v-model="queryParams.postCode" placeholder="请选择" clearable style="width: 180px">
  69. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  70. </el-select>
  71. </el-form-item>
  72. </el-col>
  73. <!-- <el-col :span="12">
  74. <el-form-item label="退水时长"
  75. prop="postCode"
  76. style="width:360px">
  77. <el-select v-model="queryParams.postCode"
  78. placeholder="请选择"
  79. clearable>
  80. <el-option v-for="item in hourType"
  81. :key="item.value"
  82. :label="item.label"
  83. :value="item.value" />
  84. </el-select>
  85. </el-form-item>
  86. </el-col> -->
  87. <el-col :span="6">
  88. <el-form-item>
  89. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  90. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  91. </el-form-item>
  92. </el-col>
  93. </el-row>
  94. </el-form>
  95. <el-table :data="tableData">
  96. <el-table-column label="场次降雨编号" prop="postCode" />
  97. <el-table-column label="降雨开始时间" prop="postCode" />
  98. <el-table-column label="降雨结束时间" prop="postCode" />
  99. <el-table-column label="累计降雨量" prop="postCode" />
  100. <el-table-column label="降雨强度" prop="postCode" />
  101. <el-table-column label="最大积水深度" prop="postCode" />
  102. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  103. <template #default="scope">
  104. <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
  105. </template>
  106. </el-table-column>
  107. </el-table>
  108. </el-tab-pane>
  109. <el-tab-pane label="工程整治" name="4">
  110. <!-- 工程整治 -->
  111. <el-form :model="queryParams2" :inline="true" ref="queryRef2">
  112. <el-form-item label="工程名称" prop="postCode">
  113. <el-input v-model="queryParams2.postCode" placeholder="请输入" clearable @keyup.enter="handleQuery2" />
  114. </el-form-item>
  115. <el-form-item label="开工时间" prop="date">
  116. <el-date-picker type="date" v-model="queryParams2.date" value-format="YYYY-MM-DD" placeholder="请选择日期"> </el-date-picker>
  117. </el-form-item>
  118. <el-form-item label="资金来源" prop="postCode">
  119. <el-select v-model="queryParams2.postCode" placeholder="请选择" clearable>
  120. <el-option v-for="item in moneyType" :key="item.value" :label="item.label" :value="item.value" />
  121. </el-select>
  122. </el-form-item>
  123. <el-form-item>
  124. <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
  125. <el-button icon="Refresh" @click="resetQuery2">重置</el-button>
  126. </el-form-item>
  127. </el-form>
  128. <el-table :data="tableData2">
  129. <el-table-column label="工程名称" prop="postCode" />
  130. <el-table-column label="治理内容" prop="postCode" />
  131. <el-table-column label="开工时间" prop="postCode" />
  132. <el-table-column label="计划完工时间" prop="postCode" />
  133. <el-table-column label="详细工程进展情况" prop="postCode" />
  134. <el-table-column label="投资金额" prop="postCode" />
  135. <el-table-column label="资金来源" prop="postCode" />
  136. <el-table-column label="治理前效果图" prop="postCode" />
  137. <el-table-column label="治理后效果图" prop="postCode" />
  138. </el-table>
  139. </el-tab-pane>
  140. <el-tab-pane label="关联视频监控" name="5">
  141. <!-- 关联视频监控 -->
  142. <VideosHK videoHeightCus="500" v-if="activeName == '5'"></VideosHK>
  143. </el-tab-pane>
  144. </el-tabs>
  145. <!-- 历史积水深度编辑 -->
  146. <el-dialog title="编辑内涝治理情况" v-model="dialogShow" width="500px" append-to-body>
  147. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
  148. <el-form-item label="雨停后退水时长" prop="hour">
  149. <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
  150. </el-form-item>
  151. <el-form-item label="断交时长" prop="hour">
  152. <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
  153. </el-form-item>
  154. <el-form-item label="积水原因类别" prop="jinjiType">
  155. <el-select v-model="formData.jinjiType" placeholder="请选择" clearable>
  156. <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value" />
  157. </el-select>
  158. </el-form-item>
  159. <el-form-item label="具体原因" prop="hour">
  160. <el-input type="textarea" v-model="formData.hour" placeholder="请输入" />
  161. </el-form-item>
  162. </el-form>
  163. <template #footer>
  164. <div class="dialog-footer">
  165. <el-button type="info" @click="cancelForm">取 消</el-button>
  166. <el-button type="primary" @click="submitForm">确 定</el-button>
  167. </div>
  168. </template>
  169. </el-dialog>
  170. </div>
  171. </template>
  172.  
  173. <script setup name="易涝积水点详情">
  174. import VideosHK from '@/components/videoHK/index.vue'; //查看海康视频
  175.  
  176. const props = defineProps({
  177. detailObj: {
  178. type: Object,
  179. default: {},
  180. },
  181. });
  182.  
  183. const { proxy } = getCurrentInstance();
  184. const activeName = ref('1');
  185. const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型 字典数据
  186. const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据
  187. const baseInfo = ref([
  188. { name: '积水点名称', value: 'name' },
  189. { name: '积水点类型', value: 'waterlogging' },
  190. { name: '积水原因', value: 'originType' },
  191. { name: '易涝点位置', value: 'address' },
  192. { name: '所属街道', value: 'belongsStreet' },
  193. { name: '行政辖区', value: 'jurisdiction' },
  194. { name: '风险类别', value: 'riskLevel' },
  195. { name: '是否为内涝点专项行动方案工程整治点位', value: 'isEngineeringRenovation' },
  196. { name: '是否为易涝点整治专项行动方案点位', value: 'isPlanRectification' },
  197. { name: '视频监控等设备安装情况', value: 'isCameraInstall' },
  198. { name: '是否提前清掏疏浚', value: 'isClearDredg' },
  199. { name: '是否专人值守', value: 'isPersonDuty' },
  200. { name: '是否提前备置排涝设备', value: 'isStandbyEquipment' },
  201. { name: '是否实施工程治理', value: 'isProjectAdminister' },
  202. { name: '积水点联系人', value: 'contactsPerson' },
  203. { name: '联系电话', value: 'telephone' },
  204. { name: '备注', value: 'remark' },
  205. { name: '本年度发生积水次数', value: 'yearHappenCount' },
  206. { name: '本年度积水最大深度(mm)', value: 'yearMaxDepth' },
  207. { name: '本年度积水最大深度退水时长(h)', value: 'yearMaxHour' },
  208. ]);
  209. const flowType = ref([
  210. { label: '小于15cm', value: '1' },
  211. { label: '大于15cm小于30cm', value: '2' },
  212. { label: '大于30cm小于50cm', value: '3' },
  213. ]);
  214. const hourType = ref([
  215. { label: '小于0.5h', value: '1' },
  216. { label: '大于0.5h小于1.5h', value: '2' },
  217. { label: '大于1.5h小于2h', value: '3' },
  218. ]);
  219. const statusType = ref([
  220. { label: '设施过流能力', value: '1' },
  221. { label: '设施结构功能', value: '2' },
  222. { label: '日常运维', value: '3' },
  223. ]);
  224. const moneyType = ref([
  225. { label: '区财政资金', value: '1' },
  226. { label: '国家专项资金', value: '2' },
  227. { label: '抢险救灾专项资金', value: '3' },
  228. { label: '社会资金', value: '4' },
  229. ]);
  230. const tableData = ref([]);
  231. const tableData2 = ref([]);
  232. const dialogShow = ref(false);
  233. const allData = reactive({
  234. formData: {
  235. hour: 0,
  236. },
  237. queryParams: {
  238. postCode: '',
  239. daterange: [proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
  240. },
  241. queryParams2: {
  242. postCode: '',
  243. date: proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
  244. },
  245. rulesForm: {
  246. hour: [{ required: true, message: '请输入', trigger: 'blur' }],
  247. },
  248. });
  249. const { queryParams, queryParams2, formData, rulesForm } = toRefs(allData);
  250. // 历史积水深度搜索
  251. function handleQuery() {}
  252. /** 重置按钮操作 */
  253. function resetQuery() {
  254. proxy.resetForm('queryRef');
  255. handleQuery();
  256. }
  257. // 历史积水深度编辑
  258. function handleEdit() {
  259. dialogShow.value = true;
  260. }
  261. /** 取消按钮 */
  262. function cancelForm() {
  263. dialogShow.value = false;
  264. }
  265. // 工程整治搜索
  266. function handleQuery2() {}
  267. /** 工程整治操作 */
  268. function resetQuery2() {
  269. proxy.resetForm('queryRef2');
  270. handleQuery2();
  271. }
  272. /** 提交按钮 */
  273. function submitForm() {
  274. proxy.$refs['formRef'].validate(valid => {
  275. if (valid) {
  276. updatePost(formData.value).then(response => {
  277. proxy.$modal.msgSuccess('修改成功');
  278. dialogShow.value = false;
  279. getDataList();
  280. });
  281. }
  282. });
  283. }
  284. onMounted(() => {});
  285. </script>
  286. <style lang="scss"></style>