Browse Source

1、添加AIS信息弹窗

2、修改设备入网申请、审评模块
master
Fuyuu 12 months ago
parent
commit
d4d2ae5e3f
  1. BIN
      src/assets/images/ship_a.png
  2. 193
      src/components/earthMap/AISInfoDetail.vue
  3. 164
      src/components/earthMap/AISInfoWindow.vue
  4. 22
      src/utils/earthMap/earthObj.ts
  5. 10
      src/utils/earthMap/shipDraw.ts
  6. 19
      src/views/earthMap/edit/EarthComp.vue
  7. 225
      src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts
  8. 19
      src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue
  9. 12
      src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseList.vue
  10. 383
      src/views/military/modules/equipmentManage/licenseManage/components/ApplyForm.vue
  11. 30
      src/views/military/modules/equipmentManage/licenseManage/components/ApplyModal.vue
  12. 485
      src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseForm.vue
  13. 21
      src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue

BIN
src/assets/images/ship_a.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

193
src/components/earthMap/AISInfoDetail.vue

@ -2,9 +2,10 @@
<div id="infoDetail" class="infoDetail">
<Window :title="title" @cancel="cancel" :width="500" :minWidth="500" :height="340" v-show="show">
<p class="content"></p>
<div style="float:left;width:49%;">
<p><span class="content-title">航行轨迹</span>
<XbsjSwitch v-model="switchVal" style="margin-top: 6px;"></XbsjSwitch>
<div style="float: left; width: 49%">
<p
><span class="content-title">航行轨迹</span>
<XbsjSwitch v-model="switchVal" style="margin-top: 6px"></XbsjSwitch>
</p>
</div>
<!-- <div style="float:left;width:49%;">
@ -16,111 +17,109 @@
</template>
<script lang="ts">
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch, onBeforeUnmount } from 'vue';
import $ from 'jquery'
// import mitt from '/@/utils/mitt';
import $mitt from "@/utils/earthMap/mitt";
export default defineComponent({
name: "infoDetail",
props: {
eventSerialNum:{
type: Number
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch, onBeforeUnmount } from 'vue';
import $ from 'jquery';
// import mitt from '/@/utils/mitt';
import $mitt from '@/utils/earthMap/mitt';
export default defineComponent({
name: 'infoDetail',
props: {
eventSerialNum: {
type: Number,
},
title: {
type: String,
},
content: {
type: String,
},
},
title:{
type: String
},
content:{
type: String
},
},
setup(props) {
const { proxy }: any = getCurrentInstance();
// const $mitt = mitt();
let show = ref(true)
let switchVal = ref(window.$earth.sceneTree.$refs['path_' + props.eventSerialNum].czmObject.enabled,)
let defaultProperty = ref({
title: '默认窗口',
})
//computed
const title = computed(() => {
return typeof props.title == "undefined" ? defaultProperty.value.title : props.title;
});
setup(props) {
const { proxy }: any = getCurrentInstance();
// const $mitt = mitt();
let show = ref(true);
let switchVal = ref(window.$earth.sceneTree.$refs['path_' + props.eventSerialNum].czmObject.enabled);
let defaultProperty = ref({
title: '默认窗口',
});
//computed
const title = computed(() => {
return typeof props.title == 'undefined' ? defaultProperty.value.title : props.title;
});
watch(switchVal, (e) => {
window.$earth.sceneTree.$refs['path_' + props.eventSerialNum].czmObject.enabled = e;
})
watch(switchVal, (e) => {
window.$earth.sceneTree.$refs['path_' + props.eventSerialNum].czmObject.enabled = e;
});
onMounted(() => {
{
//
$(".infoDetail .content").empty();
$(".infoDetail .content").append(props.content);
}
{
// cancel()
$mitt.on('cancel', function (_msg) {
cancel();
});
}
})
onMounted(() => {
{
//
$('.infoDetail .content').empty();
$('.infoDetail .content').append(props.content);
}
{
// cancel()
$mitt.on('cancel', function (_msg) {
cancel();
});
}
});
onBeforeUnmount(()=>{
$mitt.off('cancel')
})
function cancel() {
proxy.$parent.destroyTool(proxy);
}
return {
show,
switchVal,
defaultProperty,
title,
cancel,
}
},
})
onBeforeUnmount(() => {
$mitt.off('cancel');
});
function cancel() {
proxy.$parent.destroyTool(proxy);
}
return {
show,
switchVal,
defaultProperty,
title,
cancel,
};
},
});
</script>
<style>
.infoDetail {
position: absolute;
top: -5%;
left: 15%;
transform: translate(-50%, -50%);
}
.infoDetail {
position: absolute;
top: -5%;
left: 15%;
transform: translate(-50%, -50%);
}
.infoDetail>.xbsj-model-box {
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
}
.infoDetail > .xbsj-model-box {
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
background: RGBA(9, 39, 76, 0.8) !important;
}
.infoDetail p {
font-size: 13px;
margin: 12px;
line-height: 25px;
}
.infoDetail p {
font-size: 13px;
margin: 12px;
line-height: 25px;
}
.infoDetail p .content-title {
color: aliceblue;
}
.infoDetail p .content-title {
color: aliceblue;
}
/* 取消放大缩小 */
.infoDetail i.bar {
display: none;
}
/* 取消放大缩小 */
.infoDetail i.bar {
display: none;
}
.infoDetail .btn {
height: 30px;
border: 1px solid #1fffff;
background-color: rgba(0, 0, 0, 0);
color: #1fffff;
cursor: pointer;
margin-top: 12px;
}
</style>
.infoDetail .btn {
height: 30px;
border: 1px solid #1fffff;
background-color: rgba(0, 0, 0, 0);
color: #1fffff;
cursor: pointer;
margin-top: 12px;
}
</style>

164
src/components/earthMap/AISInfoWindow.vue

@ -0,0 +1,164 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-05 16:45:48
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="AISInfo">
<Window
:title="title"
:width="600"
:minWidth="600"
:height="380"
:left="650"
:top="240"
@cancel="cancel"
:floatright="false"
:showCancelButton="true"
:footervisible="false"
:showcloseButton="true"
id="aisInfoWindow"
>
<div class="ais_content">
<div class="content_item">
<div class="item_title">船名:</div>
<div class="item_content">赛尔号101</div>
</div>
<div class="content_item">
<div class="item_title">MMSI:</div>
<div class="item_content">413247920</div>
</div>
<div class="content_item">
<div class="item_title">船首向:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">呼号:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">航迹向:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">IMO:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">航速:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">经度:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">纬度:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">状态:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">类型:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">船长/:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">目的地:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">吃水:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">国籍:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">预到时间:</div>
<div class="item_content">123456</div>
</div>
<div class="content_item">
<div class="item_title">更新时间:</div>
<div class="item_content">123456</div>
</div>
<!-- 轨迹显示 -->
<div class="content_item">
<div class="item_title">航行轨迹:</div>
<a-switch v-model:checked="checked" @change="changeTrack" />
</div>
</div>
</Window>
</div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
export default defineComponent({
name: 'AISInfoWindow',
props: {
title: {
type: String,
default: 'AIS信息',
},
},
components: {
Window,
},
setup(props, context) {
const { proxy }: any = getCurrentInstance();
const checked = ref(false);
//
function cancel() {
proxy.$parent.AISInfoWindowShow = false;
}
//
function changeTrack(e) {
checked.value = e;
}
return {
checked,
cancel,
changeTrack,
};
},
});
</script>
<style lang="less" scoped>
#aisInfoWindow .xbsj-model-header .xbsj-model-arrow {
right: 25px;
}
.ais_content {
width: 95%;
margin: 0 auto;
display: flex;
flex-direaction: row;
flex-wrap: wrap;
.content_item {
width: 50%;
margin: 6px 0;
display: flex;
flex-direaction: row;
font-size: 14px;
.item_title {
color: #fff;
margin-right: 4px;
}
.item_content {
color: #00ffe4;
}
}
}
</style>

22
src/utils/earthMap/earthObj.ts

@ -323,7 +323,7 @@ export const addCustomPrimitive = (
};
// 创建船只贴地图片
export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, rt: number, trackId: number) => {
export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, imgUrl_a: string, rt: number, trackId: number) => {
const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth);
const objConfig = {
name: `${trackId}号船只`,
@ -335,6 +335,16 @@ export const addShipGroundImg = (lon: number, lat: number, height: number, imgUr
ground: false,
};
shipGroundImg.xbsjFromJSON(objConfig);
//移入事件
shipGroundImg.onmouseover = (e: any) => {
e.id.imageUrls = [imgUrl_a];
window.$earth.czm.viewer._container.style.cursor = 'pointer';
};
//移出事件
shipGroundImg.onmouseout = (e: any) => {
e.id.imageUrls = [imgUrl];
window.$earth.czm.viewer._container.style.cursor = 'default';
};
return shipGroundImg;
};
@ -342,12 +352,14 @@ export const addShipGroundImg = (lon: number, lat: number, height: number, imgUr
export const addShipTrack = (positions: number[][]) => {
const shipTrack = new window.XE.Obj.Polyline(window.$earth);
const objConfig = {
width: 2.0,
width: 3.0,
positions,
material: {
type: 'XbsjPolylineDashMaterial',
XbsjPolylineDashMaterial: {
color: [1, 1, 0.03, 1],
type: 'XbsjODLineMaterial',
XbsjODLineMaterial: {
bgColor: [1, 1, 0.03, 1],
color: [1, 0, 1, 1],
glowPower: 0.6,
},
},
ground: true,

10
src/utils/earthMap/shipDraw.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-03 18:05:32
* @LastEditTime: 2024-01-05 17:35:32
* @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -20,10 +20,12 @@ let shipDataList: any = [];
// 绘制单个船只
const drawShips = function (shipItem) {
// 引入图片
// 引入初始图片
let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href;
// 引入高亮图片
let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href;
// 绘制船只
let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, shipItem.course, shipItem.trackId);
let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, imageUrl_a, shipItem.course, shipItem.trackId);
// 返回船只绘制信息
return shipModel;
};
@ -43,7 +45,7 @@ export const drawAllShips = function (message) {
let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId);
if (existingShip) {
// 添加新的轨迹点
existingShip.trackList.unshift([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
existingShip.trackList.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
// 获取场景中的船只信息
let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向

19
src/views/earthMap/edit/EarthComp.vue

@ -83,6 +83,8 @@
:eidtId="eidtId"
></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow"></AISInfoWindow>
</div>
</template>
@ -101,6 +103,8 @@
import VideoSplitScreen from '@/components/earthMap/VideoSplitScreen.vue';
import VideoWindow from '@/components/earthMap/VideoWindow.vue';
import WarnInfoList from '@/components/earthMap/WarnInfoList.vue';
import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue';
import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue';
import { getRealTime } from '@/utils/date';
import $mitt from '@/utils/earthMap/mitt';
import { drawInit } from '@/utils/earthMap/earthDraw';
@ -195,9 +199,10 @@
AddModelWin,
AddRoamVideo,
VideoFusionWin,
AISInfoDetail,
AISInfoWindow,
},
props: {},
})
export default class EarthComp extends Vue {
/**
@ -342,7 +347,8 @@
//
monitorPosition: any = [];
///////////////////////////////////////////////////////////////////////////
//AIS
AISInfoWindowShow = false;
mounted() {
let that = this;
@ -1871,7 +1877,10 @@
}
let pickedFeature = this._viewer.scene.pick(click.position);
console.log('点击的船只:', pickedFeature);
if (pickedFeature && pickedFeature.id) {
//
if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') {
//线
this.cameraData.forEach((data) => {
@ -1928,6 +1937,11 @@
}
});
}
//
if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'GroundImage') {
this.AISInfoWindowShow = true;
// console.log(this.AISInfoWindowShow);
}
//
if (
pickedFeature.id._xbsjOwner &&
@ -2007,7 +2021,6 @@
that.cameraModalShow = false;
that.poiModalShow = false;
}
console.debug('点击到的模型', pickedFeature);
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
/* 鼠标右键事件 */

225
src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts

@ -4,82 +4,85 @@ import { rules } from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
//列表数据
export const columns: BasicColumn[] = [
{
title: '状态',
align: "center",
dataIndex: 'status_dictText',
sorter: true,
width: 120
},
{
title: '设备Id',
align: "center",
dataIndex: 'deviceId',
width: 200
},
// {
// title: '设备Id',
// align: 'center',
// dataIndex: 'deviceId',
// width: 200,
// },
{
title: '设备名称',
align: "center",
dataIndex: 'deviceName'
},
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType_dictText',
sorter: true,
},
{
title: '入网时间',
align: "center",
dataIndex: 'importDate',
sorter: true,
},
{
title: '申请人',
align: 'center',
dataIndex: 'createBy',
dataIndex: 'deviceId_dictText',
},
// {
// title: '设备类型',
// align: 'center',
// dataIndex: 'deviceType_dictText',
// sorter: true,
// width: 150,
// },
// {
// title: '申请人',
// align: 'center',
// dataIndex: 'createBy',
// width: 120,
// },
{
title: '申请时间',
align: 'center',
dataIndex: 'createTime',
sorter: true,
},
// {
// title: '审批人',
// align: 'center',
// dataIndex: 'auditManid',
// width: 120,
// },
{
title: '备注',
align: "center",
dataIndex: 'remark'
},
{
title: '许可证编号',
align: "center",
dataIndex: 'licenseNo',
},
{
title: '审批人',
align: "center",
dataIndex: 'auditManid'
title: '审核状态',
align: 'center',
dataIndex: 'status_dictText',
sorter: true,
width: 140,
},
{
title: '审批时间',
align: "center",
dataIndex: 'auditDate',
title: '入网时间',
align: 'center',
dataIndex: 'importDate',
sorter: true,
},
// {
// title: '许可证编号',
// align: 'center',
// dataIndex: 'licenseNo',
// },
// {
// title: '审批时间',
// align: 'center',
// dataIndex: 'auditDate',
// sorter: true,
// },
// {
// title: '备注',
// align: 'center',
// dataIndex: 'remark',
// },
];
//查询数据
export const searchFormSchema: FormSchema[] = [
{
label: "设备名称",
label: '设备名称',
field: 'deviceName',
component: 'Input',
colProps: { span: 6 },
},
{
label: "入网时间",
field: "importDate",
label: '入网时间',
field: 'importDate',
component: 'RangePicker',
componentProps: {
showTime: true,
@ -87,8 +90,8 @@ export const searchFormSchema: FormSchema[] = [
colProps: { span: 6 },
},
{
label: "审批时间",
field: "auditDate",
label: '审批时间',
field: 'auditDate',
component: 'RangePicker',
componentProps: {
showTime: true,
@ -104,9 +107,7 @@ export const formSchema: FormSchema[] = [
field: 'deviceId',
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入设备Id!' },
];
return [{ required: true, message: '请输入设备Id!' }];
},
},
{
@ -114,9 +115,7 @@ export const formSchema: FormSchema[] = [
field: 'deviceName',
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入设备名称!' },
];
return [{ required: true, message: '请输入设备名称!' }];
},
},
{
@ -124,9 +123,7 @@ export const formSchema: FormSchema[] = [
field: 'deviceType',
component: 'InputNumber',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入设备类型!' },
];
return [{ required: true, message: '请输入设备类型!' }];
},
},
{
@ -134,9 +131,7 @@ export const formSchema: FormSchema[] = [
field: 'licenseNo',
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入许可证编号!' },
];
return [{ required: true, message: '请输入许可证编号!' }];
},
},
{
@ -145,12 +140,10 @@ export const formSchema: FormSchema[] = [
component: 'DatePicker',
componentProps: {
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss'
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入入网时间!' },
];
return [{ required: true, message: '请输入入网时间!' }];
},
},
{
@ -163,9 +156,7 @@ export const formSchema: FormSchema[] = [
field: 'auditManid',
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入审批人!' },
];
return [{ required: true, message: '请输入审批人!' }];
},
},
{
@ -174,12 +165,10 @@ export const formSchema: FormSchema[] = [
component: 'DatePicker',
componentProps: {
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss'
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入审批时间!' },
];
return [{ required: true, message: '请输入审批时间!' }];
},
},
{
@ -196,69 +185,72 @@ export const formSchema: FormSchema[] = [
},
];
//申请列表数据
export const applyColumns: BasicColumn[] = [
// {
// title: '设备Id',
// align: 'center',
// dataIndex: 'deviceId',
// },
{
title: '设备Id',
align: "center",
dataIndex: 'deviceId'
title: '设备名称',
align: 'center',
dataIndex: 'deviceId_dictText',
},
{
title: '设备名称',
align: "center",
dataIndex: 'deviceName'
title: '申请人',
align: 'center',
dataIndex: 'createBy',
width: 120,
},
{
title: '申请时间',
align: 'center',
dataIndex: 'createTime',
sorter: true,
},
// {
// title: '设备类型',
// align: 'center',
// dataIndex: 'deviceType_dictText',
// sorter: true,
// width: 120,
// },
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType_dictText',
title: '审核状态',
align: 'center',
dataIndex: 'status_dictText',
sorter: true,
width: 120
width: 140,
},
{
title: '许可证编号',
align: "center",
dataIndex: 'licenseNo'
align: 'center',
dataIndex: 'licenseNo',
},
{
title: '入网时间',
align: "center",
align: 'center',
dataIndex: 'importDate',
sorter: true,
},
{
title: '状态',
align: "center",
dataIndex: 'status_dictText',
sorter: true,
width: 90
},
{
title: '备注',
align: "center",
dataIndex: 'remark'
},
// {
// title: '备注',
// align: 'center',
// dataIndex: 'remark',
// },
// {
// title: '申请人',
// align: 'center',
// dataIndex: 'createBy',
// },
{
title: '申请时间',
align: 'center',
dataIndex: 'createTime',
sorter: true,
},
{
title: '更新时间',
align: 'center',
dataIndex: 'updateTime',
sorter: true,
},
// {
// title: '更新时间',
// align: 'center',
// dataIndex: 'updateTime',
// sorter: true,
// },
// {
// title: '审批人',
// align: "center",
@ -270,5 +262,4 @@ export const applyColumns: BasicColumn[] = [
// dataIndex: 'auditDate',
// sorter: true,
// },
];
];

19
src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue

@ -10,7 +10,7 @@
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<!-- <a-col :lg="6">
<a-form-item label="设备名称" name="deviceName">
<JInput placeholder="请输入设备名称" v-model:value="queryParam.deviceName"></JInput>
</a-form-item>
@ -29,7 +29,7 @@
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.importDate_end" />
</a-form-item>
</a-form-item>
</a-col>
</a-col> -->
<!-- <template v-if="toggleSearchStatus"> -->
<!-- <a-col :lg="6">
<a-form-item label="审批时间">
@ -39,18 +39,14 @@
</a-form-item>
</a-col> -->
<!-- </template> -->
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a> -->
</a-col>
</span>
</a-col>
</a-col> -->
</a-row>
</a-form>
</div>
@ -58,7 +54,7 @@
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> -->
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
@ -160,12 +156,11 @@
}
/**
* 编辑事件
* 审核
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.supplement = true;
console.log(registerModal.value);
registerModal.value.edit(record);
}
@ -209,7 +204,7 @@
onClick: handleDetail.bind(null, record),
},
{
label: '补充',
label: '审批',
onClick: handleEdit.bind(null, record),
},
];

12
src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseList.vue

@ -9,7 +9,7 @@
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
<!-- <a-row :gutter="24">
<a-col :lg="6">
<a-form-item label="设备名称" name="deviceName">
<JInput placeholder="请输入设备名称" v-model:value="queryParam.deviceName"></JInput>
@ -30,7 +30,6 @@
</a-form-item>
</a-form-item>
</a-col>
<!-- <template v-if="toggleSearchStatus"> -->
<a-col :lg="6">
<a-form-item label="审批时间" name="auditDate_begin">
<a-date-picker
@ -46,20 +45,15 @@
</a-form-item>
</a-form-item>
</a-col>
<!-- </template> -->
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a> -->
</a-col>
</span>
</a-col>
</a-row>
</a-row> -->
</a-form>
</div>
<!--引用表格-->
@ -208,7 +202,7 @@
function getTableAction(record) {
return [
{
label: '审批',
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];

383
src/views/military/modules/equipmentManage/licenseManage/components/ApplyForm.vue

@ -2,40 +2,45 @@
<a-spin :spinning="confirmLoading">
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="24">
<!-- <a-col :span="24">
<a-form-item label="设备类型" v-bind="validateInfos.deviceType">
<j-dict-select-tag v-model:value="formData.deviceType" dictCode="ms_device_type" placeholder="请选择设备类型"
:disabled="disabled || supplementDisable" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
:string-to-number="true" />
<j-dict-select-tag
v-model:value="formData.deviceType"
dictCode="ms_device_type"
placeholder="请选择设备类型"
:disabled="disabled || supplementDisable"
:getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
:string-to-number="true"
/>
</a-form-item>
</a-col>
</a-col> -->
<a-col :span="24">
<a-form-item label="设备名称" v-bind="validateInfos.deviceName">
<!-- <a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" :disabled="disabled"></a-input> -->
<a-select v-model:value="formData.deviceName" show-search placeholder="请输入设备名称" :options="options"
@focus="handleFocus" @select="handleselect" :disabled="disabled || supplementDisable">
</a-select>
<a-form-item label="申请设备" v-bind="validateInfos.deviceName">
<a-input v-model:value="formData.deviceName" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="设备Id" v-bind="validateInfos.deviceId">
<a-input v-model:value="formData.deviceId" placeholder="请输入设备Id"
:disabled="true"></a-input>
<!-- <a-col :span="24">
<a-form-item label="申请设备" v-bind="validateInfos.deviceId">
<a-input v-model:value="formData.deviceId" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
</a-col> -->
<!-- <a-col :span="24">
<a-form-item label="入网时间" v-bind="validateInfos.importDate">
<a-date-picker placeholder="请选择入网时间" v-model:value="formData.importDate" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled || supplementDisable" />
</a-form-item>
</a-col>
<!-- <a-col :span="12">
<a-form-item label="状态" v-bind="validateInfos.status">
<a-input-number v-model:value="formData.status" placeholder="请输入状态" style="width: 100%" :disabled="disabled"/>
<a-date-picker
placeholder="请选择入网时间"
v-model:value="formData.importDate"
showTime
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:disabled="disabled || supplementDisable"
/>
</a-form-item>
</a-col> -->
<a-col :span="24">
<a-form-item label="审核状态" v-bind="validateInfos.status">
<j-dict-select-tag type="list" v-model:value="formData.status" dictCode="ms_approval_status" :string-to-number="true" :disabled="true" />
</a-form-item>
</a-col>
<!-- <a-col :span="12">
<a-form-item label="许可证编号" v-bind="validateInfos.licenseNo">
<a-input v-model:value="formData.licenseNo" placeholder="请输入许可证编号" :disabled="disabled"></a-input>
@ -62,171 +67,197 @@
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, computed, onMounted } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../MsIotImportLicense.api';
import { Form } from 'ant-design-vue';
import dayjs from 'dayjs';
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => { } },
formBpm: { type: Boolean, default: true },
//
supplement: {
type: Boolean,
default: false,
required: false,
},
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
deviceId: '',
deviceName: '',
deviceType: undefined,
licenseNo: '',
importDate: '',
status: undefined,
auditManid: '',
auditDate: '',
remark: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
const options: any = ref([]);
//
const validatorRules = {
deviceId: [{ required: true, message: '请输入设备Id!' },],
deviceName: [{ required: true, message: '请输入设备名称!' },],
deviceType: [{ required: true, message: '请输入设备类型!' },],
// licenseNo: [{ required: true, message: '!'},],
importDate: [{ required: true, message: '请输入入网时间!' },],
// auditManid: [{ required: true, message: '!'},],
// auditDate: [{ required: true, message: '!'},],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
//
const supplementDisable = computed(() => {
return props.supplement;
});
import { ref, reactive, nextTick, computed, onMounted } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../MsIotImportLicense.api';
import { Form } from 'ant-design-vue';
import dayjs from 'dayjs';
/**
* 新增
*/
function add() {
edit({
importDate: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), //
status: 0 //
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => {} },
formBpm: { type: Boolean, default: true },
//
supplement: {
type: Boolean,
default: false,
required: false,
},
});
}
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
//
Object.assign(formData, record);
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
deviceId: '',
deviceName: '',
deviceType: undefined,
licenseNo: '',
importDate: '',
status: undefined,
auditManid: '',
auditDate: '',
remark: '',
});
}
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
const options: any = ref([]);
//
const validatorRules = {
// deviceId: [{ required: true, message: 'Id!' }],
// deviceName: [{ required: true, message: '!' }],
// deviceType: [{ required: true, message: '!' }],
// licenseNo: [{ required: true, message: '!'},],
// importDate: [{ required: true, message: '!' }],
// auditManid: [{ required: true, message: '!'},],
// auditDate: [{ required: true, message: '!'},],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
/**
* 提交数据
*/
async function submitForm() {
//
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
//
const supplementDisable = computed(() => {
return props.supplement;
});
/**
* 新增
*/
function add() {
edit({
importDate: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), //
status: 0, //
});
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
/**
* 审批
*/
function edit(record, apply_status) {
nextTick(() => {
resetFields();
//
Object.assign(formData, record);
//
formData.importDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
//
formData.licenseNo = generateRandomCode();
});
}
}
function generateRandomCode() {
const now = new Date();
const year = now.getFullYear().toString().slice(-2);
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const randomNum = Math.floor(Math.random() * 1000)
.toString()
.padStart(3, '0');
const code = `${year}${month}${day}${hours}${minutes}${seconds}${randomNum}`;
return code;
}
function handleFocus() {
defHttp.get({
url: "/military/msDeviceInfo/list",
params: { deviceType: formData.deviceType }
}, { isTransformResponse: false })
// getAction("/military/msDeviceInfo/list",{deviceType:this.model.deviceType})
.then(res => {
if (res.success) {
options.value = [] //
let records = res.result.records;
for (let i of records) {
let item = { value: i.deviceName, label: i.deviceName, id: i.id, type: i.deviceType };
options.value.push(item)
/**
* 提交数据
*/
async function submitForm(apply_status) {
//
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
if (apply_status == 1) {
formData.status = 1;
} else {
formData.status = 2;
}
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
} else {
console.error(res.message)
}
})
}
function handleselect(e, option) {
console.log(e, option);
formData.deviceId = option.id
formData.deviceType = option.type
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
}
function handleFocus() {
defHttp
.get(
{
url: '/military/msDeviceInfo/list',
params: { deviceType: formData.deviceType },
},
{ isTransformResponse: false }
)
// getAction("/military/msDeviceInfo/list",{deviceType:this.model.deviceType})
.then((res) => {
if (res.success) {
options.value = []; //
let records = res.result.records;
for (let i of records) {
let item = { value: i.deviceName, label: i.deviceName, id: i.id, type: i.deviceType };
options.value.push(item);
}
} else {
console.error(res.message);
}
});
}
function handleselect(e, option) {
console.log(e, option);
formData.deviceId = option.id;
formData.deviceType = option.type;
}
defineExpose({
add,
edit,
submitForm,
});
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
min-height: 500px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
.antd-modal-form {
min-height: 500px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
</style>

30
src/views/military/modules/equipmentManage/licenseManage/components/ApplyModal.vue

@ -2,20 +2,17 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-11-30 10:39:05
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2023-12-01 09:22:01
* @LastEditTime: 2024-01-05 09:18:11
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\iot\components\ApplyModal.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<a-modal
:title="title"
:width="width"
:visible="visible"
@ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
>
<a-modal :title="title" :width="width" :visible="visible" @cancel="handleCancel">
<template #footer>
<a-button v-if="disableSubmit" @click="handleCancel">关闭</a-button>
<a-button v-if="!disableSubmit" type="primary" danger @click="refuse()">拒绝</a-button>
<a-button v-if="!disableSubmit" type="primary" @click="agree()">同意</a-button>
</template>
<ApplyForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :supplement="supplement" :formBpm="false"></ApplyForm>
</a-modal>
</template>
@ -31,7 +28,6 @@
const supplement = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
/**
* 新增
*/
@ -43,12 +39,22 @@
});
}
//
function refuse() {
registerForm.value.submitForm(2);
}
//
function agree() {
registerForm.value.submitForm(1);
}
/**
* 编辑
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '详情' : '补充';
title.value = disableSubmit.value ? '详情' : '审批';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record);

485
src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseForm.vue

@ -3,50 +3,87 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="12">
<a-form-item label="设备Id" v-bind="validateInfos.deviceId">
<a-input v-model:value="formData.deviceId" placeholder="请输入设备Id" :disabled="disabled"></a-input>
<a-form-item label="申请设备" v-bind="validateInfos.deviceId">
<a-tree-select
ref="deviceTree"
v-model:value="formData.deviceId"
allow-clear
:treeData="nodeTree"
:disabled="disabled"
placeholder="请选择申请设备"
@change="handleChange"
>
</a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="设备名称" v-bind="validateInfos.deviceName">
<a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" :disabled="disabled"></a-input>
<a-form-item label="设备编码">
<a-input v-model:value="deviceCode" :disabled="true" placeholder="未选择申请设备"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="设备类型" v-bind="validateInfos.deviceType">
<j-dict-select-tag v-model:value="formData.deviceType" dictCode="ms_device_type" placeholder="请选择设备类型"
:disabled="disabled" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
:string-to-number="true" />
<a-form-item label="部署位置">
<a-input v-model:value="devicePosition" :disabled="true" placeholder="未选择申请设备"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- <a-col :span="12">
<a-form-item label="设备类型" v-bind="validateInfos.deviceType">
<j-dict-select-tag
v-model:value="formData.deviceType"
dictCode="ms_device_type"
placeholder="请选择设备类型"
:disabled="disabled"
:getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
:string-to-number="true"
/>
</a-form-item>
</a-col> -->
<!-- <a-col :span="12">
<a-form-item label="入网时间" v-bind="validateInfos.importDate">
<a-date-picker placeholder="请选择入网时间" v-model:value="formData.importDate" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled" />
<a-date-picker
placeholder="请选择入网时间"
v-model:value="formData.importDate"
showTime
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:disabled="disabled"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="状态" v-bind="validateInfos.status">
<j-dict-select-tag type="list" v-model:value="formData.status" dictCode="ms_approval_status"
:string-to-number="true" placeholder="请选择状态" :disabled="disabled" />
<j-dict-select-tag
type="list"
v-model:value="formData.status"
dictCode="ms_approval_status"
:string-to-number="true"
placeholder="请选择状态"
:disabled="disabled"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="许可证编号" v-bind="validateInfos.licenseNo">
<a-input v-model:value="formData.licenseNo" placeholder="请输入许可证编号" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
</a-col> -->
<!-- <a-col :span="12">
<a-form-item label="审批人" v-bind="validateInfos.auditManid">
<a-input v-model:value="formData.auditManid" placeholder="请输入审批人" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
</a-col> -->
<!-- <a-col :span="12">
<a-form-item label="审批时间" v-bind="validateInfos.auditDate">
<a-date-picker placeholder="请选择审批时间" v-model:value="formData.auditDate" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled" />
<a-date-picker
placeholder="请选择审批时间"
v-model:value="formData.auditDate"
showTime
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:disabled="disabled"
/>
</a-form-item>
</a-col>
</a-col> -->
<a-col :span="12">
<a-form-item label="备注" v-bind="validateInfos.remark">
<a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input>
@ -58,154 +95,304 @@
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, computed, onMounted, watch } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../MsIotImportLicense.api';
import { Form } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ref, reactive, nextTick, computed, onMounted, watch } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../MsIotImportLicense.api';
import { Form } from 'ant-design-vue';
import dayjs from 'dayjs';
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => { } },
formBpm: { type: Boolean, default: true },
//
supplement: {
type: Boolean,
default: false,
required: false,
},
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
deviceId: '',
deviceName: '',
deviceType: undefined,
licenseNo: '',
importDate: '',
status: undefined,
auditManid: '',
auditDate: '',
remark: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//
const validatorRules = {
deviceId: [{ required: true, message: '请输入设备Id!' },],
deviceName: [{ required: true, message: '请输入设备名称!' },],
deviceType: [{ required: true, message: '请选择设备类型!' },],
licenseNo: [{ required: true, message: '请输入许可证编号!' },],
importDate: [{ required: true, message: '请输入入网时间!' },],
status: [{ required: true, message: '请选择状态!' }],
auditManid: [{ required: true, message: '请输入审批人!' },],
auditDate: [{ required: true, message: '请输入审批时间!' },],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
//
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
// id
const sceneId = userStore.userInfo?.sceneId;
//
const sceneList: any = [];
//
const areaList: any = [];
//
const stationList: any = [];
//
const newDeviceList: any = [];
//
function getCurrentScene() {
return defHttp.get(
{ url: '/military/msMapScene/list', params: { sceneId: sceneId + '*', pageNo: 1, pageSize: 9999 } },
{ isTransformResponse: false }
);
}
//
function getCurrentSceneArea() {
return defHttp.get({ url: '/military/msMapLine/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
}
//
function getCurrentAreaStation() {
return defHttp.get({ url: '/military/camera/site/list', params: { pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
}
//
function getCurrentStationDevice() {
return defHttp.get({ url: '/military/dtDeviceInfo/list', params: { isAudit: 0, pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false });
}
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
//
const nodeTree: any = ref([]);
//
const deviceCode: any = ref('');
//
const devicePosition: any = ref('');
//
function handleChange(value, label, extra) {
if (value) {
defHttp
.get({ url: '/military/dtDeviceInfo/queryById', params: { id: value, pageNo: 1, pageSize: 9999 } }, { isTransformResponse: false })
.then((res) => {
let deviceData = res.result;
deviceCode.value = deviceData.deviceCode;
devicePosition.value = deviceData.devicePosition;
formData.deviceName = deviceData.deviceName;
});
} else {
return true;
deviceCode.value = '';
devicePosition.value = '';
}
}
return props.formDisabled;
});
//
const supplementDisable = computed(() => {
return props.supplement;
});
watch(() => formData.status, (val) => {
if (val == 2) {
formData.licenseNo = null
}
else if (val == 1) {
formData.licenseNo = new Date().getTime() + Math.floor(Math.random() * 100) //
onMounted(() => {
//
getCurrentScene().then((res) => {
sceneList.value = res.result.records;
getCurrentSceneArea().then((res1) => {
areaList.value = res1.result.records;
getCurrentAreaStation().then((res2) => {
stationList.value = res2.result.records;
getCurrentStationDevice().then((res3) => {
newDeviceList.value = res3.result.records;
//
const tree: any = [];
//
sceneList.value.forEach((row) => {
const node = { title: row.sceneName, value: row.sceneId, children: [] };
tree.push(node);
});
//
areaList.value.forEach((row) => {
const parentNode = tree.find((node) => node.value === row.sceneId);
if (parentNode) {
const node = { title: row.name, value: row.id, children: [] };
parentNode.children.push(node);
}
});
//
stationList.value.forEach((row) => {
const parentNodes = tree.map((node) => node.children).flat();
const parentNode = parentNodes.find((node) => node.value === row.lineId);
if (parentNode) {
const node = { title: row.sitename, value: row.id, children: [] };
parentNode.children.push(node);
}
});
//
newDeviceList.value.forEach((row) => {
//
const parentNodes = tree.flatMap((node) => node.children).flatMap((node) => node.children);
const parentNode = parentNodes.find((node) => node.value === row.deviceOwnerId);
if (parentNode) {
const node = { title: row.deviceName, value: row.id, children: null };
parentNode.children.push(node);
}
});
// ant tree-select
nodeTree.value = handleCameraTree(tree);
});
});
});
});
});
//
function handleCameraTree(data, index = undefined) {
let arr: any = [];
for (let i = 0; i < data.length; i++) {
let obj: any = {};
let item = data[i];
obj.title = item.title;
obj.value = obj.key = item.value;
obj.disabled = item.children?.length >= 0 ? true : false;
if (item.children && item.children.length > 0) {
obj.children = [];
let indexValue: any = index ? index + '-' + (i + 1) : i + 1;
obj.children = handleCameraTree(item.children, indexValue);
}
arr.push(obj);
}
return arr;
}
})
/**
* 新增
*/
function add() {
edit({});
}
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => {} },
formBpm: { type: Boolean, default: true },
//
supplement: {
type: Boolean,
default: false,
required: false,
},
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
deviceId: undefined,
deviceName: '',
deviceType: undefined,
licenseNo: '',
importDate: '',
status: undefined,
auditManid: '',
auditDate: '',
remark: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//
const validatorRules = {
deviceId: [{ required: true, message: '请选择申请设备!', trigger: 'blur' }],
// deviceName: [{ required: true, message: '!' }],
// deviceType: [{ required: true, message: '!' }],
// licenseNo: [{ required: true, message: '!' }],
// importDate: [{ required: true, message: '!' }],
// status: [{ required: true, message: '' }],
// auditManid: [{ required: true, message: '!' }],
// auditDate: [{ required: true, message: '!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
//
Object.assign(formData, record);
// formData.licenseNo = new Date().getTime() + Math.floor(Math.random() * 100) //
formData.auditDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') //
// formData.status = 1 //
//
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
}
}
return props.formDisabled;
});
//
const supplementDisable = computed(() => {
return props.supplement;
});
}
/**
* 提交数据
*/
async function submitForm() {
//
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
watch(
() => formData.status,
(val) => {
if (val == 2) {
formData.licenseNo = null;
} else if (val == 1) {
formData.licenseNo = new Date().getTime() + Math.floor(Math.random() * 100); //
}
}
);
/**
* 新增
*/
function add() {
edit({
status: 0,
});
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
//
Object.assign(formData, record);
formData.auditDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'); //
//
if (formData.id) {
//
if (formData.deviceId) {
defHttp
.get(
{ url: '/military/dtDeviceInfo/queryById', params: { id: formData.deviceId, pageNo: 1, pageSize: 9999 } },
{ isTransformResponse: false }
)
.then((res) => {
let deviceData = res.result;
deviceCode.value = deviceData.deviceCode;
devicePosition.value = deviceData.devicePosition;
formData.deviceName = deviceData.deviceName;
});
} else {
deviceCode.value = '';
devicePosition.value = '';
}
}
})
.finally(() => {
confirmLoading.value = false;
});
}
}
/**
* 提交数据
*/
async function submitForm() {
//
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
min-height: 500px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
.antd-modal-form {
min-height: 500px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
</style>

21
src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue

@ -1,13 +1,22 @@
<template>
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<a-modal
:title="title"
:width="width"
:visible="visible"
@ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
destroyOnClose
>
<MsIotImportLicenseForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsIotImportLicenseForm>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, nextTick} from 'vue';
import MsIotImportLicenseForm from './MsIotImportLicenseForm.vue'
import { ref, nextTick } from 'vue';
import MsIotImportLicenseForm from './MsIotImportLicenseForm.vue';
const title = ref<string>('');
const width = ref<number>(1080);
const visible = ref<boolean>(false);
@ -25,7 +34,7 @@
registerForm.value.add();
});
}
/**
* 编辑
* @param record
@ -37,7 +46,7 @@
registerForm.value.edit(record);
});
}
/**
* 确定按钮点击事件
*/

Loading…
Cancel
Save