Newer
Older
KaiFengPC / src / views / floodSys / floodVideo / videoManage.vue
@鲁yixuan 鲁yixuan on 19 Aug 21 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 label="类型" prop="cameraType">
  9. <el-select filterable v-model="queryParams.cameraType" placeholder="选择摄像头类型" style="width: 190px" clearable>
  10. <el-option v-for="item in videotype" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item label="状态" prop="status">
  14. <el-select filterable v-model="queryParams.status" placeholder="选择摄像头状态" style="width: 190px" clearable>
  15. <el-option v-for="item in stateList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="数据来源" prop="cameraSource">
  19. <el-select filterable v-model="queryParams.cameraSource" placeholder="请输入数据来源" style="width: 190px">
  20. <el-option v-for="item in cameraSourceList" :key="item.value" :label="item.label" :value="item.value" />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item>
  24. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  25. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  26. </el-form-item>
  27. </el-form>
  28.  
  29. <el-row :gutter="10" class="mb8">
  30. <el-col :span="1.5">
  31. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cameraResource:cameraResource:add']">新增</el-button>
  32. </el-col>
  33. <el-col :span="1.5">
  34. <el-button type="success" plain icon="RefreshRight" @click="synchronization" v-hasPermi="['cameraResource:cameraResource:edit']">
  35. 同步
  36. </el-button>
  37. </el-col>
  38.  
  39. <el-col :span="1.5">
  40. <el-button
  41. type="warning"
  42. plain
  43. icon="Download"
  44. color="#626aef"
  45. @click="sycndownload"
  46. v-hasPermi="['cameraResource:cameraResource:edit']"
  47. >
  48. 插件下载
  49. </el-button>
  50. </el-col>
  51. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  52. </el-row>
  53.  
  54. <el-table v-loading="loading" :data="cameraResourceList" @selection-change="handleSelectionChange" max-height="650">
  55. <el-table-column type="selection" width="55" />
  56. <el-table-column label="海康编码" prop="indexCode" />
  57. <el-table-column label="摄像头名称" prop="name" />
  58. <el-table-column label="摄像头类型" prop="cameraType">
  59. <template #default="scope">
  60. <span>{{ scope.row.cameraType == 1 ? '枪机' : '球机' }}</span>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="在线状态" prop="state">
  64. <template #default="scope">
  65. <span :class="scope.row.state == 1 ? 'color' : 'red'">{{ scope.row.state == 1 ? '在线' : '离线' }}</span>
  66. </template>
  67. </el-table-column>
  68. <el-table-column label="分组类型" prop="groupName" />
  69. <el-table-column label="数据来源" prop="cameraSource">
  70. <template #default="scope">
  71. <span>{{ scope.row.cameraSource == 1 ? '新建' : scope.row.cameraSource == 2 ? '共享' : '' }}</span>
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="摄像头地址" prop="cameraAddress" />
  75. <el-table-column label="责任人" prop="cameraUserName" />
  76. <el-table-column label="权属单位" prop="ownershipUnit" />
  77. <el-table-column label="是否显示" prop="isShow">
  78. <template #default="scope">
  79. <span @click="changeisShow(scope.row)" :class="scope.row.isShow == 0 ? 'color' : 'red'">{{
  80. scope.row.isShow == 0 ? '是' : '否'
  81. }}</span>
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="操作" class-name="small-padding fixed-width">
  85. <template #default="scope">
  86. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cameraResource:cameraResource:edit']">
  87. 修改
  88. </el-button>
  89. <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['cameraResource:cameraResource:view']">
  90. 详情
  91. </el-button>
  92. </template>
  93. </el-table-column>
  94. </el-table>
  95.  
  96. <pagination
  97. v-show="total > 0"
  98. :total="total"
  99. v-model:page="queryParams.pageNum"
  100. v-model:limit="queryParams.pageSize"
  101. @pagination="getList"
  102. />
  103.  
  104. <!-- 添加或修改摄像头基础信息对话框 -->
  105. <el-dialog :title="title" v-model="open" width="1150px" append-to-body>
  106. <el-form ref="cameraResourceRef" :model="form" :rules="rules" label-width="120px">
  107. <el-row :gutter="10" class="mb8">
  108. <el-col :span="12">
  109. <el-form-item label="海康编码" prop="indexCode">
  110. <el-input v-model="form.indexCode" :disabled="title.includes('修改')" placeholder="请输入海康编码" />
  111. </el-form-item>
  112. </el-col>
  113. <el-col :span="12">
  114. <el-form-item label="摄像头名称" prop="name">
  115. <el-input v-model="form.name" :disabled="title.includes('修改')" placeholder="请输入摄像头名称" />
  116. </el-form-item>
  117. </el-col>
  118. </el-row>
  119. <el-row :gutter="10" class="mb8">
  120. <el-col :span="12">
  121. <el-form-item label="摄像头地址" prop="cameraAddress">
  122. <el-input v-model="form.cameraAddress" placeholder="请输入摄像头地址" />
  123. </el-form-item>
  124. </el-col>
  125. <el-col :span="12">
  126. <el-form-item label="摄像头坐标" prop="point">
  127. <el-input v-model="form.point" @focus="openMapDialog" placeholder="请输入摄像头坐标" />
  128. </el-form-item>
  129. </el-col>
  130. </el-row>
  131. <el-row :gutter="10" class="mb8">
  132. <el-col :span="12">
  133. <el-form-item label="摄像头类型" prop="cameraType">
  134. <el-select filterable v-model="form.cameraType" placeholder="选择摄像头类型" style="width: 610px" @change="videotypechagne">
  135. <el-option v-for="item in videotype" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
  136. </el-select>
  137. </el-form-item>
  138. </el-col>
  139. <el-col :span="12">
  140. <el-form-item label="视频分组" prop="groupId">
  141. <el-select filterable v-model="form.groupId" placeholder="选择视频分组" style="width: 610px" @change="cameraGroupchange">
  142. <el-option v-for="item in cameraGroupList" :key="item.id" :label="item.name" :value="item.id" />
  143. </el-select>
  144. </el-form-item>
  145. </el-col>
  146. </el-row>
  147. <el-row :gutter="10" class="mb8">
  148. <el-col :span="12">
  149. <el-form-item label="责任人" prop="cameraUserId">
  150. <el-select filterable v-model="form.cameraUserId" placeholder="选择责任人" style="width: 610px" @change="peoplechange">
  151. <el-option v-for="dict in allpeople" :key="dict.userId" :label="dict.nickName" :value="dict.userId" />
  152. </el-select>
  153. </el-form-item>
  154. </el-col>
  155. <el-col :span="12">
  156. <el-form-item label="联系方式" prop="phone">
  157. <el-input v-model="form.phone" placeholder="请输入联系方式" />
  158. </el-form-item>
  159. </el-col>
  160. </el-row>
  161. <el-row :gutter="10" class="mb8">
  162. <el-col :span="12">
  163. <el-form-item label="权属单位" prop="ownershipUnit">
  164. <el-input v-model="form.ownershipUnit" placeholder="请输入权属单位" />
  165. </el-form-item>
  166. </el-col>
  167. <el-col :span="12">
  168. <el-form-item label="数据来源" prop="cameraSource">
  169. <el-select filterable v-model="form.cameraSource" placeholder="请输入数据来源" style="width: 610px">
  170. <el-option v-for="item in cameraSourceList" :key="item.value" :label="item.label" :value="item.value" />
  171. </el-select>
  172. </el-form-item>
  173. </el-col>
  174.  
  175. <el-col :span="12">
  176. <el-form-item label="摄像头所属区域" prop="regionIndexCode">
  177. <el-select filterable v-model="form.regionIndexCode" placeholder="请选择所属区域维护" style="width: 610px">
  178. <el-option v-for="item in regionsoptions" :key="item.id" :label="item.name" :value="item.id" />
  179. </el-select>
  180. </el-form-item>
  181. </el-col>
  182. <el-col :span="12">
  183. <el-form-item label="摄像头播放地址" prop="cameraUrl" v-show="form.cameraSource == 2">
  184. <el-input v-model="form.cameraUrl" placeholder="请输入摄像头播放地址" />
  185. </el-form-item>
  186. </el-col>
  187. </el-row>
  188. <el-form-item label="摄像头照片" prop="imageList">
  189. <ImageFileUpload
  190. :limit="1"
  191. :saveFileArr="form.imageList"
  192. :listType="'picture-card'"
  193. :refField="'imageList'"
  194. :refType="'camera_info'"
  195. ></ImageFileUpload>
  196. </el-form-item>
  197. </el-form>
  198. <template #footer>
  199. <div class="dialog-footer">
  200. <el-button type="info" @click="cancel">取 消</el-button>
  201. <el-button type="primary" @click="submitForm">确 定</el-button>
  202. </div>
  203. </template>
  204. </el-dialog>
  205.  
  206. <!-- 摄像头基础信息详情 -->
  207. <el-dialog title="摄像头基础信息详情" v-model="detailOpen" width="900px" append-to-body>
  208. <div class="publicContainer">
  209. <div class="publicDetail">
  210. <div class="part">
  211. <p class="title">海康编码:</p>
  212. <p class="content">
  213. {{ dialogFormDetail.indexCode }}
  214. </p>
  215. </div>
  216. <div class="part">
  217. <p class="title">摄像头名称:</p>
  218. <p class="content">
  219. {{ dialogFormDetail.name }}
  220. </p>
  221. </div>
  222. <div class="part">
  223. <p class="title">经度:</p>
  224. <p class="content">
  225. {{ dialogFormDetail.x }}
  226. </p>
  227. </div>
  228. <div class="part">
  229. <p class="title">维度:</p>
  230. <p class="content">
  231. {{ dialogFormDetail.y }}
  232. </p>
  233. </div>
  234. <div class="part">
  235. <p class="title">状态:</p>
  236. <p class="content">
  237. {{ dialogFormDetail.cameraStatus == 0 ? '不在线' : '在线' }}
  238. </p>
  239. </div>
  240. <div class="part">
  241. <p class="title">摄像头地址:</p>
  242. <p class="content">
  243. {{ dialogFormDetail.cameraAddress }}
  244. </p>
  245. </div>
  246. <div class="part">
  247. <p class="title">视频类型:</p>
  248. <p class="content">
  249. {{ dialogFormDetail.cameraType == 1 ? '枪机' : '球机' }}
  250. </p>
  251. </div>
  252. <div class="part">
  253. <p class="title">权属单位:</p>
  254. <p class="content">
  255. {{ dialogFormDetail.ownershipUnit }}
  256. </p>
  257. </div>
  258. </div>
  259. </div>
  260. <template #footer>
  261. <div class="dialog-footer">
  262. <el-button @click="cancel">关 闭</el-button>
  263. </div>
  264. </template>
  265. </el-dialog>
  266.  
  267. <!-- 地址选择 -->
  268. <el-dialog title="选择单位地址" v-model="mapDialogOpen" width="1100px" append-to-body destroy-on-close>
  269. <div class="map-box" style="height: 630px">
  270. <mapBox :isShowTool="false" :isShowSearch="true" :isSelectAddress="true" @getPlace="getAddress"></mapBox>
  271. </div>
  272. <template #footer>
  273. <div class="dialog-footer">
  274. <el-button type="primary" @click="mapDialogOpen = false">确 定</el-button>
  275. </div>
  276. </template>
  277. </el-dialog>
  278. </div>
  279. </template>
  280.  
  281. <script setup name="CameraResource">
  282. import {
  283. pagecameraResource,
  284. getcameraResource,
  285. addcameraResource,
  286. updatecameraResource,
  287. cameraInfotb,
  288. } from '@/api/cameraResource/cameraResource';
  289. import { pageregionStation } from '@/api/cameraResource/regionStation';
  290. import { listcameraGroupInfo } from '@/api/cameraResource/cameraGroupInfo';
  291. import mapBox from '@/components/Map/index.vue';
  292. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  293. import { listUser } from '@/api/system/user';
  294. import { getConfigKey } from '@/api/system/config';
  295. import { isPhone } from '@/utils/validate';
  296.  
  297. const { proxy } = getCurrentInstance();
  298. const mapDialogOpen = ref(false); //地图弹框
  299. const cameraResourceList = ref([]);
  300. const open = ref(false);
  301. const loading = ref(true);
  302. const showSearch = ref(true);
  303. const ids = ref([]);
  304. const single = ref(true);
  305. const multiple = ref(true);
  306. const total = ref(0);
  307. const title = ref('');
  308. const detailOpen = ref(false);
  309. const allpeople = ref([]); //所有人
  310. const regionsoptions = ref([]); //区域编号
  311. const checkDutyTellPhone = (rule, value, callback) => {
  312. if (!isPhone(value)) {
  313. callback(new Error('电话号码格式错误'));
  314. } else {
  315. callback();
  316. }
  317. };
  318. const cameraGroupList = ref([]);
  319.  
  320. const stateList = ref([
  321. { dictValue: 1, dictLabel: '在线' },
  322. { dictValue: 0, dictLabel: '离线' },
  323. ]);
  324.  
  325. const videotype = ref([
  326. { dictValue: 2, dictLabel: '球机' },
  327. { dictValue: 1, dictLabel: '枪机' },
  328. ]);
  329.  
  330. const cameraSourceList = ref([
  331. { value: 1, label: '新建' },
  332. { value: 2, label: '共享' },
  333. ]);
  334.  
  335. const data = reactive({
  336. form: {},
  337. queryParams: {
  338. pageNum: 1,
  339. pageSize: 10,
  340. indexCode: '',
  341. name: null,
  342. regionIndexCode: null,
  343. isTop: null,
  344. isShow: null,
  345. x: null,
  346. y: null,
  347. geometrys: null,
  348. cameraStatus: null,
  349. isHighSpot: null,
  350. cameraAddress: null,
  351. imageList: null,
  352. cameraType: null,
  353. ownershipUnit: null,
  354. status: null,
  355. cameraSource: null,
  356. },
  357. rules: {
  358. // name: [{ required: true, message: "不能为空", trigger: "blur" }],
  359. cameraUserId: [{ required: true, message: '不能为空', trigger: 'change' }],
  360. indexCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
  361. name: [{ required: true, message: '不能为空', trigger: 'blur' }],
  362. cameraAddress: [{ required: true, message: '不能为空', trigger: 'blur' }],
  363. cameraType: [{ required: true, message: '不能为空', trigger: 'change' }],
  364. // groupId: [{ required: true, message: '不能为空', trigger: 'change' }],
  365. phone: [{ required: false, trigger: 'blur', validator: checkDutyTellPhone }],
  366. },
  367. dialogFormDetail: {}, //详情弹框数据
  368. });
  369.  
  370. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  371.  
  372. //打开单位地址地图弹框
  373. function openMapDialog() {
  374. mapDialogOpen.value = true;
  375. setTimeout(() => {
  376. if (window.newfiberMap && form.value.x && form.value.y) {
  377. let position = [form.value.x, form.value.y];
  378. newfiberMap.removeByIds(['addressSearch']);
  379. newfiberMap.geojsonToMap(
  380. NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
  381. {
  382. id: 'addressSearch',
  383. name: form.value.cameraAddress,
  384. geometrys: `POINT(${position.join(' ')})`,
  385. type: NewFiberMap.Enum.VectorType.ICON,
  386. style: {
  387. url: NewFiberMapConfig.SDK_INIT_SRC_PREFIX + '/static/images/running_path/marker.png',
  388. width: 50,
  389. height: 50,
  390. },
  391. labelOptions: {
  392. font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
  393. color: 'rgb(255,255,255,1)',
  394. pixelOffset: [0, -38],
  395. backgroundColor: 'rgba(64,158,255,1)',
  396. showBackground: true,
  397. distanceDisplayCondition: [Number.MIN_VALUE, 55000],
  398. },
  399. },
  400. ])
  401. );
  402. newfiberMap.getMap().flyTo(newfiberMap.getLayers(['addressSearch'][0]));
  403. }
  404. }, 100);
  405. }
  406.  
  407. function getAddress(val) {
  408. form.value.cameraAddress = val.caseAddress;
  409. form.value.point = val.lonLat[0] + ',' + val.lonLat[1];
  410. form.value.x = val.lonLat[0];
  411. form.value.y = val.lonLat[1];
  412. }
  413.  
  414. // 获得所有人的接口
  415. function getallpeople() {
  416. let params = {
  417. pageNum: 1,
  418. pageSize: 9999,
  419. };
  420. listUser(params).then(res => {
  421. allpeople.value = res.data;
  422. });
  423. }
  424.  
  425. function changeisShow(row) {
  426. row.isShow = row.isShow == 0 ? 1 : 0;
  427. updatecameraResource(row).then(response => {
  428. proxy.$modal.msgSuccess('修改成功');
  429. open.value = false;
  430. getList();
  431. });
  432. }
  433.  
  434. // 获得所有分组的接口
  435. function GetlistcameraGroupInfo() {
  436. listcameraGroupInfo().then(res => {
  437. cameraGroupList.value = res.data;
  438. console.log(1233123, cameraGroupList.value);
  439. });
  440. }
  441.  
  442. function peoplechange(value) {
  443. var obj = allpeople.value.filter(item => {
  444. return item.userId == value;
  445. })[0];
  446. if (obj) {
  447. form.value.cameraUserName = obj.nickName;
  448. form.value.phone = obj.phonenumber;
  449. }
  450. }
  451.  
  452. function videotypechagne(value) {
  453. var obj = videotype.value.filter(item => {
  454. return item.dictValue == value;
  455. })[0];
  456. // form.value.planTypeName = obj.dictLabel
  457. }
  458.  
  459. function cameraGroupchange(value) {
  460. var obj = cameraGroupList.value.filter(item => {
  461. return item.id == value;
  462. })[0];
  463. form.value.groupName = obj.name;
  464. }
  465.  
  466. /** 搜索摄像头基础信息列表 */
  467. function getList() {
  468. loading.value = false;
  469. pagecameraResource(queryParams.value).then(response => {
  470. cameraResourceList.value = response.data;
  471. total.value = response.total;
  472. loading.value = false;
  473. });
  474. }
  475.  
  476. // 取消按钮
  477. function cancel() {
  478. open.value = false;
  479. detailOpen.value = false;
  480. reset();
  481. }
  482.  
  483. // 表单重置
  484. function reset() {
  485. form.value = {
  486. id: null,
  487. indexCode: null,
  488. name: null,
  489. regionIndexCode: null,
  490. isTop: null,
  491. isShow: null,
  492. x: null,
  493. y: null,
  494. geometrys: null,
  495. cameraStatus: null,
  496. isHighSpot: null,
  497. cameraAddress: null,
  498. imageList: [],
  499. cameraType: null,
  500. ownershipUnit: null,
  501. remark: null,
  502. status: null,
  503. delFlag: null,
  504. createBy: null,
  505. createTime: null,
  506. updateBy: null,
  507. updateTime: null,
  508. cameraUserName: null,
  509. cameraUserId: null,
  510. phone: null,
  511. groupId: null,
  512. groupName: null,
  513. point: '',
  514. cameraSource: null,
  515. };
  516. proxy.resetForm('cameraResourceRef');
  517. }
  518.  
  519. /** 搜索按钮操作 */
  520. function handleQuery() {
  521. queryParams.value.pageNum = 1;
  522. getList();
  523. }
  524.  
  525. /** 重置按钮操作 */
  526. function resetQuery() {
  527. proxy.resetForm('queryRef');
  528. handleQuery();
  529. }
  530.  
  531. // 多选框选中数据
  532. function handleSelectionChange(selection) {
  533. ids.value = selection.map(item => item.id);
  534. single.value = selection.length != 1;
  535. multiple.value = !selection.length;
  536. }
  537.  
  538. /** 新增按钮操作 */
  539. function handleAdd() {
  540. reset();
  541. open.value = true;
  542. title.value = '添加摄像头基础信息';
  543. }
  544.  
  545. /** 修改按钮操作 */
  546. function handleUpdate(row) {
  547. reset();
  548. const _id = row.id || ids.value;
  549. getcameraResource(_id).then(response => {
  550. form.value = response.data;
  551. form.value.cameraUserId = Number(form.value.cameraUserId);
  552. console.log(99, response.data);
  553. form.value.point = response.data.x + ',' + response.data.y;
  554. open.value = true;
  555. title.value = '修改摄像头基础信息';
  556. });
  557. }
  558.  
  559. /** 同步按钮操作 */
  560. function synchronization() {
  561. proxy.$modal.loading('正在同步数据,请稍候...');
  562. cameraInfotb()
  563. .then(res => {
  564. proxy.$modal.closeLoading();
  565. getList();
  566. })
  567. .catch(error => {
  568. proxy.$modal.closeLoading();
  569. });
  570. }
  571.  
  572. async function sycndownload() {
  573. let { data } = await getConfigKey('hikvision.plug.url');
  574. const iframe = document.createElement('iframe'); // 创建一个HTML 元素
  575. iframe.style.display = 'none'; // 隐藏iframe 防止影响页面
  576. iframe.style.height = 0; // 高度设置0 防止影响页面
  577. iframe.src = data; // 下载链接
  578. document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除
  579. setTimeout(() => {
  580. iframe.remove();
  581. }, 5 * 60 * 1000);
  582. }
  583.  
  584. /** 提交按钮 */
  585. function submitForm() {
  586. proxy.$refs['cameraResourceRef'].validate(valid => {
  587. if (valid) {
  588. if (form.value.id != null) {
  589. updatecameraResource(form.value).then(response => {
  590. proxy.$modal.msgSuccess('修改成功');
  591. open.value = false;
  592. getList();
  593. });
  594. } else {
  595. addcameraResource(form.value).then(response => {
  596. proxy.$modal.msgSuccess('新增成功');
  597. open.value = false;
  598. getList();
  599. });
  600. }
  601. }
  602. });
  603. }
  604. /** 搜索摄像头资源所属区域维护列表 */
  605. function getList2() {
  606. loading.value = true;
  607. let param = {
  608. pageNum: 1,
  609. pageSize: 9999,
  610. };
  611. pageregionStation(param).then(response => {
  612. regionsoptions.value = response.data;
  613. });
  614. }
  615.  
  616. //查看详情操作
  617. function handleDetail(row) {
  618. detailOpen.value = true;
  619. dialogFormDetail.value = row;
  620. }
  621.  
  622. getList2();
  623. getList();
  624. getallpeople();
  625. GetlistcameraGroupInfo();
  626. </script>
  627.  
  628. <style lang="scss" scoped>
  629. .color {
  630. color: #54d2ff;
  631. cursor: pointer;
  632. }
  633.  
  634. .red {
  635. color: rgb(216, 43, 43);
  636. cursor: pointer;
  637. }
  638. </style>