Newer
Older
KaiFengPC / src / views / floodSys / floodVideo / cameraGroupInfo.vue
@鲁yixuan 鲁yixuan on 19 Aug 12 KB updata
  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="name">
  6. <el-input v-model="queryParams.name" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" />
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  10. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  11. </el-form-item>
  12. </el-form>
  13. <el-row :gutter="10" class="mb8">
  14. <el-col :span="1.5">
  15. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cameraResource:cameraGroupInfo:add']">新增</el-button>
  16. </el-col>
  17. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  18. </el-row>
  19. <el-table v-loading="loading" :data="cameraGroupInfoList" @selection-change="handleSelectionChange" max-height="650">
  20. <el-table-column type="selection" width="55" />
  21. <el-table-column label="分类名称" prop="name" />
  22. <el-table-column label="摄像头数量" prop="number" />
  23. <el-table-column label="创建时间" prop="createTime" />
  24. <el-table-column label="更新时间" prop="updateTime" />
  25. <el-table-column label="操作" class-name="small-padding fixed-width">
  26. <template #default="scope">
  27. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cameraResource:cameraGroupInfo:edit']">
  28. 修改
  29. </el-button>
  30. <el-button
  31. link
  32. type="warning"
  33. icon="Edit"
  34. @click="handleconfiguration(scope.row)"
  35. v-hasPermi="['business:floodControlDepartment:edit']"
  36. >
  37. 配置摄像头
  38. </el-button>
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42.  
  43. <pagination
  44. v-show="total > 0"
  45. :total="total"
  46. v-model:page="queryParams.pageNum"
  47. v-model:limit="queryParams.pageSize"
  48. @pagination="getList"
  49. />
  50.  
  51. <!-- 添加或修改自定义视频分组-分组对话框 -->
  52. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  53. <el-form ref="cameraGroupInfoRef" :model="form" :rules="rules" label-width="120px">
  54. <el-form-item label="分类名称" prop="name">
  55. <el-input v-model="form.name" placeholder="请输入分类名称" />
  56. </el-form-item>
  57. </el-form>
  58. <template #footer>
  59. <div class="dialog-footer">
  60. <el-button type="info" @click="cancel">取 消</el-button>
  61. <el-button type="primary" @click="submitForm">确 定</el-button>
  62. </div>
  63. </template>
  64. </el-dialog>
  65.  
  66. <!-- 自定义视频分组-分组详情 -->
  67. <el-dialog title="自定义视频分组-分组详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  68. <div class="dialog-form-detail flex flex-r flex-wrap">
  69. <div class="flex flex-r">
  70. <div class="detail-label flex flex-align-center">分类名称</div>
  71. <div class="detail-value flex flex-align-center">
  72. {{ dialogFormDetail.name }}
  73. </div>
  74. </div>
  75. <div class="flex flex-r">
  76. <div class="detail-label flex flex-align-center">父级id 1级为0</div>
  77. <div class="detail-value flex flex-align-center">
  78. {{ dialogFormDetail.parentId }}
  79. </div>
  80. </div>
  81. <div class="flex flex-r">
  82. <div class="detail-label flex flex-align-center">负责人名称</div>
  83. <div class="detail-value flex flex-align-center">
  84. {{ dialogFormDetail.dutyUser }}
  85. </div>
  86. </div>
  87. <div class="flex flex-r">
  88. <div class="detail-label flex flex-align-center">手机号</div>
  89. <div class="detail-value flex flex-align-center">
  90. {{ dialogFormDetail.phone }}
  91. </div>
  92. </div>
  93. <div class="flex flex-r">
  94. <div class="detail-label flex flex-align-center">职位</div>
  95. <div class="detail-value flex flex-align-center">
  96. {{ dialogFormDetail.position }}
  97. </div>
  98. </div>
  99. <div class="flex flex-r">
  100. <div class="detail-label flex flex-align-center">备注</div>
  101. <div class="detail-value flex flex-align-center">
  102. {{ dialogFormDetail.remark }}
  103. </div>
  104. </div>
  105. <div class="flex flex-r">
  106. <div class="detail-label flex flex-align-center">状态</div>
  107. <div class="detail-value flex flex-align-center">
  108. {{ dialogFormDetail.status }}
  109. </div>
  110. </div>
  111. </div>
  112. <template #footer>
  113. <div class="dialog-footer">
  114. <el-button @click="cancel">关 闭</el-button>
  115. </div>
  116. </template>
  117. </el-dialog>
  118.  
  119. <!-- 配置摄像头 -->
  120. <el-dialog title="配置摄像头" v-model="AddDialog2" width="800px" append-to-body class="dialog-detail-box">
  121. <el-transfer
  122. filterable
  123. :filter-method="filterMethod"
  124. filter-placeholder="请输入名称"
  125. v-model="transferUserValue"
  126. :data="transferUserData"
  127. style="text-align: left"
  128. :titles="['待选列表', '已有列表']"
  129. :button-texts="['移除列表', '添加列表']"
  130. :props="{
  131. key: 'id',
  132. label: 'name',
  133. }"
  134. @change="transferChange"
  135. v-loading="transferloading"
  136. element-loading-text="拼命加载中"
  137. element-loading-spinner="el-icon-loading"
  138. element-loading-background="rgba(0, 0, 0, 0.8)"
  139. ></el-transfer>
  140. <template #footer>
  141. <div class="dialog-footer">
  142. <el-button @click="AddDialog2 = false">关 闭</el-button>
  143. </div>
  144. </template>
  145. </el-dialog>
  146. </div>
  147. </template>
  148.  
  149. <script setup name="CameraGroupInfo">
  150. import {
  151. pagecameraGroupInfo,
  152. getcameraGroupInfo,
  153. delcameraGroupInfo,
  154. addcameraGroupInfo,
  155. updatecameraGroupInfo,
  156. batchRemove,
  157. batchSave,
  158. getNotBoundData,
  159. getBoundData,
  160. } from '@/api/cameraResource/cameraGroupInfo';
  161.  
  162. const { proxy } = getCurrentInstance();
  163. import { ElMessage } from 'element-plus';
  164.  
  165. const cameraGroupInfoList = ref([]);
  166. const open = ref(false);
  167. const loading = ref(false);
  168. const showSearch = ref(true);
  169. const ids = ref([]);
  170. const single = ref(true);
  171. const multiple = ref(true);
  172. const total = ref(0);
  173. const title = ref('');
  174. const detailOpen = ref(false);
  175.  
  176. const groupId = ref('');
  177. const AddDialog2 = ref(false);
  178. const transferUserValue = ref([]);
  179. const transferUserData = ref([]);
  180. const yifenpei = ref([]);
  181. const transferloading = ref(false);
  182.  
  183. const data = reactive({
  184. form: {},
  185. queryParams: {
  186. pageNum: 1,
  187. pageSize: 10,
  188. name: null,
  189. parentId: null,
  190. dutyUser: null,
  191. phone: null,
  192. position: null,
  193. status: null,
  194. },
  195. rules: {
  196. name: [{ required: true, message: '不能为空', trigger: 'blur' }],
  197. },
  198. dialogFormDetail: {}, //详情弹框数据
  199. });
  200.  
  201. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  202.  
  203. // 配置摄像头
  204. function handleconfiguration(row) {
  205. groupId.value = row.id;
  206. // 搜索已绑定的人员列表
  207. AddDialog2.value = true;
  208. Getallvideo();
  209. Getyifenpei();
  210. }
  211.  
  212. function Getallvideo() {
  213. let prams = {
  214. groupId: groupId.value,
  215. };
  216. getNotBoundData(prams).then(res => {
  217. transferUserData.value = res.data;
  218. });
  219. }
  220.  
  221. // 搜索已分配的用户
  222. function Getyifenpei() {
  223. getBoundData({ groupId: groupId.value }).then(res => {
  224. if (res.code == 200) {
  225. transferUserValue.value = [];
  226. yifenpei.value = res.data;
  227. res.data.map(item => {
  228. transferUserValue.value.push(item.id);
  229. });
  230. }
  231. });
  232. }
  233.  
  234. function filterMethod(query, item) {
  235. let string = item.name;
  236. return string.indexOf(query) > -1;
  237. }
  238.  
  239. function transferChange(value, direction, movedKeys) {
  240. transferloading.value = true;
  241. let params = '';
  242. let list = [];
  243. let AxiosUrl = '';
  244. if (direction == 'left') {
  245. AxiosUrl = batchRemove;
  246. yifenpei.value.map(item => {
  247. for (var k in movedKeys) {
  248. if (movedKeys[k] == item.id) {
  249. // list.push(item.id)
  250. list.push({
  251. cameraName: item.name,
  252. indexCode: item.indexCode,
  253. id: item.id,
  254. });
  255. }
  256. }
  257. });
  258.  
  259. params = {
  260. cameraInfoList: list,
  261. gourpId: groupId.value,
  262. };
  263.  
  264. // var a = new FormData()
  265. // a.append('ids', list.join(","))
  266. // params = a
  267. } else {
  268. transferUserData.value.map(item => {
  269. for (var k in value) {
  270. if (value[k] == item.id) {
  271. list.push({
  272. cameraName: item.name,
  273. indexCode: item.indexCode,
  274. id: item.id,
  275. });
  276. }
  277. }
  278. });
  279. params = {
  280. cameraInfoList: list,
  281. gourpId: groupId.value,
  282. };
  283. AxiosUrl = batchSave;
  284. }
  285.  
  286. AxiosUrl(params)
  287. .then(response => {
  288. if (response.code === 200) {
  289. ElMessage({ message: response.msg, type: 'success' });
  290. } else {
  291. ElMessage({ message: response.msg, type: 'warning' });
  292. }
  293.  
  294. Getyifenpei();
  295. Getallvideo();
  296.  
  297. setTimeout(() => {
  298. getList();
  299. }, 100);
  300.  
  301. // gettreeList()
  302. // getlistfloodControlDepartment()
  303. transferloading.value = false;
  304. })
  305. .catch(response => {
  306. transferloading.value = false;
  307. });
  308. }
  309.  
  310. /** 搜索自定义视频分组-分组列表 */
  311. function getList() {
  312. // loading.value = true;
  313. pagecameraGroupInfo(queryParams.value).then(response => {
  314. cameraGroupInfoList.value = response.data;
  315. total.value = response.total;
  316. loading.value = false;
  317. });
  318. }
  319.  
  320. // 取消按钮
  321. function cancel() {
  322. open.value = false;
  323. detailOpen.value = false;
  324. reset();
  325. }
  326.  
  327. // 表单重置
  328. function reset() {
  329. form.value = {
  330. id: null,
  331. name: null,
  332. parentId: null,
  333. dutyUser: null,
  334. phone: null,
  335. position: null,
  336. remark: null,
  337. status: null,
  338. delFlag: null,
  339. createBy: null,
  340. createTime: null,
  341. updateBy: null,
  342. updateTime: null,
  343. };
  344. proxy.resetForm('cameraGroupInfoRef');
  345. }
  346.  
  347. /** 搜索按钮操作 */
  348. function handleQuery() {
  349. queryParams.value.pageNum = 1;
  350. getList();
  351. }
  352.  
  353. /** 重置按钮操作 */
  354. function resetQuery() {
  355. proxy.resetForm('queryRef');
  356. handleQuery();
  357. }
  358.  
  359. // 多选框选中数据
  360. function handleSelectionChange(selection) {
  361. ids.value = selection.map(item => item.id);
  362. single.value = selection.length != 1;
  363. multiple.value = !selection.length;
  364. }
  365.  
  366. /** 新增按钮操作 */
  367. function handleAdd() {
  368. reset();
  369. open.value = true;
  370. title.value = '添加自定义视频分组-分组';
  371. }
  372.  
  373. /** 修改按钮操作 */
  374. function handleUpdate(row) {
  375. reset();
  376. const _id = row.id || ids.value;
  377. getcameraGroupInfo(_id).then(response => {
  378. form.value = response.data;
  379. open.value = true;
  380. title.value = '修改自定义视频分组-分组';
  381. });
  382. }
  383.  
  384. /** 提交按钮 */
  385. function submitForm() {
  386. proxy.$refs['cameraGroupInfoRef'].validate(valid => {
  387. if (valid) {
  388. if (form.value.id != null) {
  389. updatecameraGroupInfo(form.value).then(response => {
  390. proxy.$modal.msgSuccess('修改成功');
  391. open.value = false;
  392. getList();
  393. });
  394. } else {
  395. addcameraGroupInfo(form.value).then(response => {
  396. proxy.$modal.msgSuccess('新增成功');
  397. open.value = false;
  398. getList();
  399. });
  400. }
  401. }
  402. });
  403. }
  404.  
  405. /** 删除按钮操作 */
  406. function handleDelete(row) {
  407. const _ids = row.id || ids.value;
  408. proxy.$modal
  409. .confirm('是否确认删除自定义视频分组-分组编号为"' + _ids + '"的数据项?')
  410. .then(function () {
  411. return delcameraGroupInfo(_ids);
  412. })
  413. .then(() => {
  414. getList();
  415. proxy.$modal.msgSuccess('删除成功');
  416. })
  417. .catch(() => {});
  418. }
  419.  
  420. /** 导出按钮操作 */
  421. function handleExport() {
  422. proxy.download(
  423. 'cameraResource/cameraGroupInfo/export',
  424. {
  425. ...queryParams.value,
  426. },
  427. `cameraGroupInfo_${new Date().getTime()}.xlsx`
  428. );
  429. }
  430. //查看详情操作
  431. function handleDetail(row) {
  432. detailOpen.value = true;
  433. dialogFormDetail.value = row;
  434. }
  435. getList();
  436. </script>