Newer
Older
KaiFengPC / src / views / floodSys / floodVideo / siteCameraRelation.vue
@zhangdeliang zhangdeliang on 25 Nov 15 KB update
  1. <template>
  2. <!-- 站点和摄像头关联 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="建设方式" prop="buildType">
  6. <el-select filterable v-model="queryParams.buildType" placeholder="请选择建设方式">
  7. <el-option v-for="item in typeNameList" :key="item.value" :label="item.label" :value="item.value" />
  8. </el-select>
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  12. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  13. </el-form-item>
  14. </el-form>
  15.  
  16. <el-row :gutter="10" class="mb8">
  17. <el-col :span="1.5">
  18. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['business:siteCameraRelation:add']">新增</el-button>
  19. </el-col>
  20. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  21. </el-row>
  22.  
  23. <el-table v-loading="loading" :data="siteCameraRelationList" @selection-change="handleSelectionChange" max-height="650">
  24. <el-table-column type="selection" width="55" />
  25. <el-table-column label="建设方式" prop="buildType">
  26. <template #default="{ row }">
  27. <dict-tag :options="typeNameList" :value="row.buildType + ''" />
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="监测类型 " prop="monitorTargetType">
  31. <template #default="{ row }">
  32. <dict-tag :options="headArr" :value="row.monitorTargetType + ''" />
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="站点名称" prop="stName" />
  36. <el-table-column label="视频名称" prop="indexCodeName" />
  37. <el-table-column label="操作" class-name="small-padding fixed-width">
  38. <template #default="scope">
  39. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:siteCameraRelation:edit']">
  40. 修改
  41. </el-button>
  42. <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:siteCameraRelation:remove']">
  43. 删除
  44. </el-button>
  45. <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['business:siteCameraRelation:view']">
  46. 详情
  47. </el-button>
  48. </template>
  49. </el-table-column>
  50. </el-table>
  51.  
  52. <pagination
  53. v-show="total > 0"
  54. :total="total"
  55. v-model:page="queryParams.pageNum"
  56. v-model:limit="queryParams.pageSize"
  57. @pagination="getList"
  58. />
  59.  
  60. <!-- 添加或修改站点和摄像头关联对话框 -->
  61. <el-dialog :title="title" v-model="open" width="800px" append-to-body>
  62. <el-form ref="siteCameraRelationRef" :model="form" :rules="rules" label-width="120px">
  63. <el-row :gutter="10" class="mb8">
  64. <el-col :span="12">
  65. <el-form-item label="建设方式" prop="buildType">
  66. <el-select filterable v-model="form.buildType" placeholder="请选择建设方式" @change="stationTypechange" :disabled="disableds">
  67. <el-option v-for="item in typeNameList" :key="item.value" :label="item.label" :value="item.value" />
  68. </el-select>
  69. </el-form-item>
  70. </el-col>
  71. <el-col :span="12">
  72. <el-form-item label="监测类型" prop="monitorTargetType">
  73. <el-select
  74. filterable
  75. v-model="form.monitorTargetType"
  76. placeholder="请选择监测类型"
  77. @change="stationTypechange"
  78. :disabled="disableds"
  79. >
  80. <el-option v-for="item in headArr" :key="item.value" :label="item.label" :value="item.value" />
  81. </el-select>
  82. </el-form-item>
  83. </el-col>
  84. </el-row>
  85.  
  86. <el-row :gutter="10" class="mb8">
  87. <el-col :span="12">
  88. <el-form-item label="站点名称" prop="stCode">
  89. <el-select filterable v-model="form.stCode" placeholder="请选择站点编号" @change="stationchange" :disabled="disableds">
  90. <el-option v-for="dict in stCodeList" :key="dict.id" :label="dict.stName" :value="dict.stCode" />
  91. </el-select>
  92. </el-form-item>
  93. </el-col>
  94. <el-col :span="12">
  95. <el-form-item label="视频名称" prop="indexCodeList">
  96. <el-select filterable v-model="form.indexCodeList" placeholder="请选择视频编号" @change="indexCodechange" multiple>
  97. <el-option v-for="dict in cameraList" :key="dict.indexCode" :label="dict.name" :value="dict.indexCode" />
  98. </el-select>
  99. </el-form-item>
  100. </el-col>
  101. </el-row>
  102. </el-form>
  103. <template #footer>
  104. <div class="dialog-footer">
  105. <el-button type="info" @click="cancel">取 消</el-button>
  106. <el-button type="primary" @click="submitForm">确 定</el-button>
  107. </div>
  108. </template>
  109. </el-dialog>
  110.  
  111. <!-- 站点和摄像头关联详情 -->
  112. <el-dialog title="站点和摄像头关联详情" v-model="detailOpen" width="900px" append-to-body>
  113. <div class="publicContainer">
  114. <div class="publicDetail">
  115. <div class="part">
  116. <p class="title">建设方式:</p>
  117. <p class="content">
  118. <dict-tag :options="typeNameList" :value="dialogFormDetail.buildType + ''" />
  119. </p>
  120. </div>
  121. <div class="part">
  122. <p class="title">监测类型:</p>
  123. <p class="content">
  124. <dict-tag :options="headArr" :value="dialogFormDetail.monitorTargetType + ''" />
  125. </p>
  126. </div>
  127. <div class="part">
  128. <p class="title">站点名称:</p>
  129. <p class="content">
  130. {{ dialogFormDetail.stName }}
  131. </p>
  132. </div>
  133. <div class="part">
  134. <p class="title">站点编号:</p>
  135. <p class="content">
  136. {{ dialogFormDetail.stCode }}
  137. </p>
  138. </div>
  139. <div class="part">
  140. <p class="title">视频编号:</p>
  141. <p class="content">
  142. {{ dialogFormDetail.indexCode }}
  143. </p>
  144. </div>
  145. <div class="part">
  146. <p class="title">视频名称:</p>
  147. <p class="content">
  148. {{ dialogFormDetail.indexCodeName }}
  149. </p>
  150. </div>
  151. <!-- <div class="part">
  152. <p class="title">负责人手机:</p>
  153. <p class="content">
  154. {{ dialogFormDetail.dutyUserPhone }}
  155. </p>
  156. </div>
  157. <div class="part">
  158. <p class="title">备注:</p>
  159. <p class="content">
  160. {{ dialogFormDetail.remark }}
  161. </p>
  162. </div> -->
  163. </div>
  164. </div>
  165. <template #footer>
  166. <div class="dialog-footer">
  167. <el-button @click="cancel">关 闭</el-button>
  168. </div>
  169. </template>
  170. </el-dialog>
  171. </div>
  172. </template>
  173.  
  174. <script setup name="SiteCameraRelation">
  175. import {
  176. pagesiteCameraRelation,
  177. getsiteCameraRelation,
  178. delsiteCameraRelation,
  179. addsiteCameraRelation,
  180. updatesiteCameraRelation,
  181. rtuSiteInfolist,
  182. } from '@/api/cameraResource/siteCameraRelation';
  183. import { listUser } from '@/api/system/user';
  184. import { cameraInfolist } from '@/api/cameraResource/cameraGroupInfo';
  185.  
  186. const { proxy } = getCurrentInstance();
  187. const { site_type } = proxy.useDict('site_type');
  188. const site_types = ref([]);
  189. const siteCameraRelationList = ref([]);
  190. const open = ref(false);
  191. const loading = ref(true);
  192. const showSearch = ref(true);
  193. const ids = ref([]);
  194. const single = ref(true);
  195. const multiple = ref(true);
  196. const total = ref(0);
  197. const title = ref('');
  198. const detailOpen = ref(false);
  199. const disableds = ref(false);
  200. const data = reactive({
  201. form: {},
  202. queryParams: {
  203. pageNum: 1,
  204. pageSize: 10,
  205. type: null,
  206. buildType: null,
  207. stationType: null,
  208. stCode: null,
  209.  
  210. indexCode: null,
  211. indexName: null,
  212. dutyUserNo: null,
  213. dutyUserName: null,
  214. dutyUserPhone: null,
  215. status: null,
  216. },
  217. rules: {
  218. buildType: [{ required: true, message: '不能为空', trigger: 'change' }],
  219. stName: [{ required: true, message: '不能为空', trigger: 'change' }],
  220. stCode: [{ required: true, message: '不能为空', trigger: 'change' }],
  221. indexCodeList: [{ required: true, message: '不能为空', trigger: 'change' }],
  222. dutyUserNo: [{ required: true, message: '不能为空', trigger: 'change' }],
  223. },
  224. dialogFormDetail: {}, //详情弹框数据
  225. });
  226. const stCodeList = ref([]);
  227. const buildType = ref('');
  228. const monitorTargetType = ref('');
  229. const allpeople = ref([]); //所有人
  230. const cameraList = ref([]); //所有的视频
  231. const stationList = ref([]); //所有的站点
  232. const stationTypeList = ref([
  233. { dictValue: 2, dictLabel: '雨量站' },
  234. { dictValue: 1, dictLabel: '水位站' },
  235. ]); //所有的站点类型
  236.  
  237. const typeNameList = ref([
  238. { value: 'owner', label: '自建' },
  239. { value: 'share', label: '共享' },
  240. { value: 'official', label: '市局' },
  241. ]); //绑定类型
  242.  
  243. const headArr = reactive([
  244. { label: '典型项目', value: 'typical_land' },
  245. { label: '雨量', value: 'rainfall' },
  246. { label: '管网', value: 'pipeline' },
  247. { label: '内涝点', value: 'waterlogging' },
  248. { label: '海绵设施', value: 'drain_outlet' },
  249. { label: '河道', value: 'river' },
  250. ]);
  251.  
  252. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  253.  
  254. /** 搜索站点和摄像头关联列表 */
  255. function getList() {
  256. loading.value = true;
  257. pagesiteCameraRelation(queryParams.value).then(response => {
  258. siteCameraRelationList.value = response.data;
  259. total.value = response.total;
  260. loading.value = false;
  261. });
  262. }
  263.  
  264. // 获得所有人的接口
  265. function getallpeople() {
  266. let params = {
  267. pageNum: 1,
  268. pageSize: 9999,
  269. };
  270. listUser(params).then(res => {
  271. allpeople.value = res.data;
  272. });
  273. }
  274.  
  275. // 获取所有摄像头的接口
  276. function Getallvideo() {
  277. cameraInfolist().then(res => {
  278. cameraList.value = res.data;
  279. });
  280. }
  281.  
  282. function peoplechange(value) {
  283. var obj = allpeople.value.filter(item => {
  284. return item.userId == value;
  285. })[0];
  286. form.value.dutyUserName = obj.nickName;
  287. form.value.dutyUserPhone = obj.phonenumber;
  288. }
  289.  
  290. function indexCodechange(value) {
  291. var obj = cameraList.value.filter(item => {
  292. return item.id == value;
  293. })[0];
  294. form.value.indexName = obj.name;
  295. }
  296.  
  297. // function typeNamechange (value) {
  298. // var obj = typeNameList.value.filter(item => { return item.dictValue == value })[0]
  299. // form.value.typeName = obj.name
  300. // }
  301.  
  302. // 筛选站点编号
  303. function stationTypechange() {
  304. stCodeList.value = [];
  305. // console.log(form, 'form');
  306. // console.log(form.value.monitorTargetType, 'form.value.monitorTargetType');
  307. // console.log(form.value.buildType, 'form.value.buildType');
  308. // console.log(stationList.value[0], 1111);
  309.  
  310. for (let i = 0; i <= stationList.value.length; i++) {
  311. // console.log(stationList.value[i], 8989);
  312. if (stationList.value[i].monitorTargetType == form.value.monitorTargetType && stationList.value[i].buildType == form.value.buildType) {
  313. stCodeList.value.push(stationList.value[i]);
  314. console.log(stationList.value[i], 123123);
  315. }
  316. }
  317. // console.log(stationList.value, 1111);
  318. // var obj = stationTypeList.value.filter(item => {
  319. // return item.dictValue == value;
  320. // })[0];
  321. // form.value.stName = obj.name;
  322. // stationList.value = [];
  323. // site_types.value.forEach(i => {
  324. // if (i.monitorTargetType == e) {
  325. // stationList.value.push(i);
  326. // console.log(stationList.value, 'stationList.value');
  327. // }
  328. // });
  329. }
  330.  
  331. async function rtuSiteInfolistM(value) {
  332. // var obj = stationList.value.filter(item => { return item.id == value })[0]
  333. let { data } = await rtuSiteInfolist();
  334. stationList.value = data;
  335. // form.value.indexName = obj.name
  336. console.log(stationList.value, 'stationList.value');
  337. }
  338. // 切换站点点位
  339. function stationchange(params) {
  340. stationList.value.forEach(element => {
  341. if (element.stCode == params) {
  342. form.value.stName = element.stName;
  343. return;
  344. }
  345. });
  346. }
  347.  
  348. // 取消按钮
  349. function cancel() {
  350. open.value = false;
  351. detailOpen.value = false;
  352. reset();
  353. }
  354.  
  355. // 表单重置
  356. function reset() {
  357. form.value = {
  358. id: null,
  359. type: null,
  360. typeName: null,
  361. stationType: null,
  362. stCode: null,
  363. stName: null,
  364. indexCodeList: null,
  365. indexName: null,
  366. dutyUserNo: null,
  367. dutyUserName: null,
  368. dutyUserPhone: null,
  369. remark: null,
  370. status: null,
  371. delFlag: null,
  372. createBy: null,
  373. createTime: null,
  374. updateBy: null,
  375. updateTime: null,
  376. };
  377. proxy.resetForm('siteCameraRelationRef');
  378. }
  379.  
  380. /** 搜索按钮操作 */
  381. function handleQuery() {
  382. queryParams.value.pageNum = 1;
  383. getList();
  384. }
  385.  
  386. /** 重置按钮操作 */
  387. function resetQuery() {
  388. proxy.resetForm('queryRef');
  389. handleQuery();
  390. }
  391.  
  392. // 多选框选中数据
  393. function handleSelectionChange(selection) {
  394. ids.value = selection.map(item => item.id);
  395. single.value = selection.length != 1;
  396. multiple.value = !selection.length;
  397. }
  398.  
  399. /** 新增按钮操作 */
  400. function handleAdd() {
  401. reset();
  402. open.value = true;
  403. title.value = '添加站点和摄像头关联';
  404. disableds.value = false;
  405. stCodeList.value = [];
  406. }
  407.  
  408. /** 修改按钮操作 */
  409. function handleUpdate(row) {
  410. reset();
  411. // open.value = true;
  412. // title.value = '修改站点和摄像头关联';
  413. disableds.value = true;
  414. // return;
  415. const _id = row.id || ids.value;
  416. getsiteCameraRelation(_id).then(response => {
  417. form.value = response.data;
  418. form.value.dutyUserNo = Number(form.value.dutyUserNo);
  419. open.value = true;
  420. title.value = '修改站点和摄像头关联';
  421. stCodeList.value = [];
  422.  
  423. for (let i = 0; i <= stationList.value.length; i++) {
  424. console.log(stationList.value[i], 8989);
  425. if (
  426. stationList.value[i].monitorTargetType == form.value.monitorTargetType &&
  427. stationList.value[i].buildType == form.value.buildType
  428. ) {
  429. stCodeList.value.push(stationList.value[i]);
  430. }
  431. }
  432. });
  433. }
  434.  
  435. /** 提交按钮 */
  436. function submitForm() {
  437. console.log(form.value, 'form.value');
  438. proxy.$refs['siteCameraRelationRef'].validate(valid => {
  439. if (valid) {
  440. if (form.value.id != null) {
  441. updatesiteCameraRelation(form.value).then(response => {
  442. proxy.$modal.msgSuccess('修改成功');
  443. open.value = false;
  444. getList();
  445. });
  446. } else {
  447. addsiteCameraRelation(form.value).then(response => {
  448. proxy.$modal.msgSuccess('新增成功');
  449. open.value = false;
  450. getList();
  451. });
  452. }
  453. }
  454. });
  455. }
  456.  
  457. /** 删除按钮操作 */
  458. function handleDelete(row) {
  459. const _ids = row.id || ids.value;
  460. proxy.$modal
  461. .confirm('是否确认删除站点和摄像头关联编号为"' + _ids + '"的数据项?')
  462. .then(function () {
  463. return delsiteCameraRelation(_ids);
  464. })
  465. .then(() => {
  466. getList();
  467. proxy.$modal.msgSuccess('删除成功');
  468. })
  469. .catch(() => {});
  470. }
  471. //查看详情操作
  472. function handleDetail(row) {
  473. detailOpen.value = true;
  474. dialogFormDetail.value = row;
  475. }
  476.  
  477. getList();
  478. getallpeople();
  479. Getallvideo();
  480. rtuSiteInfolistM();
  481. </script>