简柏林 / thingskit-front · Commits

Commit 3d6c0dac9442e7e161facd081f76c22a22630126

Authored by xp.Huang
2 parents 1a6b8f6e a8d0bfbe

Merge branch 'dev-ft' into 'main' 

fix：修改Teambition上的问题（DEFECT-658-660）

See merge request huang/yun-teng-iot-front!288
Inline Side-by-side
Showing 6 changed files with 769 additions and 760 deletions
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 }, 46 },
47 ]); 47 ]);
48 const getLogo = computed(() => { 48 const getLogo = computed(() => {
49 - return userStore.platInfo?.logo; 49 + return userStore.platInfo?.background;
50 }); 50 });
51 const getTitle = computed(() => { 51 const getTitle = computed(() => {
52 // 设置icon 52 // 设置icon
@@ -4,22 +4,19 @@ @@ -4,22 +4,19 @@
4 <div class="right-wrap"> 4 <div class="right-wrap">
5 <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick"> 5 <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick">
6 <template #deviceState="{ record }"> 6 <template #deviceState="{ record }">
7 - <Tag  
8 - :color="  
9 - record.deviceState == DeviceState.INACTIVE  
10 - ? 'warning'  
11 - : record.deviceState == DeviceState.ONLINE  
12 - ? 'success'  
13 - : 'error'  
14 - "  
15 - class="ml-2"  
16 - > 7 + <Tag :color="
  8 + record.deviceState == DeviceState.INACTIVE
  9 + ? 'warning'
  10 + : record.deviceState == DeviceState.ONLINE
  11 + ? 'success'
  12 + : 'error'
  13 + " class="ml-2">
17 {{ 14 {{
18 - record.deviceState == DeviceState.INACTIVE  
19 - ? '待激活'  
20 - : record.deviceState == DeviceState.ONLINE  
21 - ? '在线'  
22 - : '离线' 15 + record.deviceState == DeviceState.INACTIVE
  16 + ? '待激活'
  17 + : record.deviceState == DeviceState.ONLINE
  18 + ? '在线'
  19 + : '离线'
23 }} 20 }}
24 </Tag> 21 </Tag>
25 </template> 22 </template>
@@ -30,15 +27,8 @@ @@ -30,15 +27,8 @@
30 </template> 27 </template>
31 </BasicTable> 28 </BasicTable>
32 </div> 29 </div>
33 - <BasicModal  
34 - @register="registerModal"  
35 - title="历史数据"  
36 - width="70%"  
37 - :minHeight="400"  
38 - :footer="null"  
39 - :canFullscreen="false"  
40 - @cancel="handleCancelModal"  
41 - > 30 + <BasicModal @register="registerModal" title="历史数据" width="70%" :minHeight="400" :footer="null"
  31 + :canFullscreen="false" @cancel="handleCancelModal">
42 <TimePeriodForm @register="timePeriodRegister" /> 32 <TimePeriodForm @register="timePeriodRegister" />
43 <!-- <BasicForm @register="registerForm" /> --> 33 <!-- <BasicForm @register="registerForm" /> -->
44 <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }"> 34 <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }">
@@ -50,364 +40,380 @@ @@ -50,364 +40,380 @@
50 </div> 40 </div>
51 </template> 41 </template>
52 <script lang="ts"> 42 <script lang="ts">
53 - import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';  
54 - import { useScript } from '/@/hooks/web/useScript';  
55 - import { formSchema, columns } from './config.data';  
56 - import { BasicTable, useTable } from '/@/components/Table';  
57 - import { devicePage } from '/@/api/alarm/contact/alarmContact';  
58 - import { Tag, Empty } from 'ant-design-vue';  
59 - import { DeviceState } from '/@/api/device/model/deviceModel';  
60 - import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';  
61 - import { useModal, BasicModal } from '/@/components/Modal';  
62 - import { useECharts } from '/@/hooks/web/useECharts';  
63 - import {  
64 - getDeviceHistoryInfo,  
65 - getDeviceDataKeys,  
66 - getDeviceActiveTime,  
67 - } from '/@/api/alarm/position';  
68 - import { useDrawer } from '/@/components/Drawer';  
69 - import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';  
70 - import moment from 'moment';  
71 - // 导入一些静态图片,避免打包时不能正确解析  
72 - import djx from '/@/assets/images/djx.png';  
73 - import zx from '/@/assets/images/zx.png';  
74 - import lx from '/@/assets/images/lx.png';  
75 - import djh from '/@/assets/images/djh.png';  
76 - import online from '/@/assets/images/online1.png';  
77 - import lx1 from '/@/assets/images/lx1.png';  
78 - import Loading from '/@/components/Loading/src/Loading.vue';  
79 - import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';  
80 - import { selectDeviceAttrSchema, eChartOptions } from './config.data';  
81 - import { defaultSchemas } from './cpns/TimePeriodForm/config';  
82 - import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';  
83 - import { dateUtil } from '/@/utils/dateUtil';  
84 - export default defineComponent({  
85 - name: 'BaiduMap',  
86 - components: {  
87 - BasicTable,  
88 - Tag,  
89 - Empty,  
90 - BasicModal,  
91 - DeviceDetailDrawer,  
92 - Loading,  
93 - TimePeriodForm, 43 +import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';
  44 +import { useScript } from '/@/hooks/web/useScript';
  45 +import { formSchema, columns } from './config.data';
  46 +import { BasicTable, useTable } from '/@/components/Table';
  47 +import { devicePage } from '/@/api/alarm/contact/alarmContact';
  48 +import { Tag, Empty } from 'ant-design-vue';
  49 +import { DeviceState } from '/@/api/device/model/deviceModel';
  50 +import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
  51 +import { useModal, BasicModal } from '/@/components/Modal';
  52 +import { useECharts } from '/@/hooks/web/useECharts';
  53 +import {
  54 + getDeviceHistoryInfo,
  55 + getDeviceDataKeys,
  56 + getDeviceActiveTime,
  57 +} from '/@/api/alarm/position';
  58 +import { useDrawer } from '/@/components/Drawer';
  59 +import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
  60 +import moment from 'moment';
  61 +// 导入一些静态图片,避免打包时不能正确解析
  62 +import djx from '/@/assets/images/djx.png';
  63 +import zx from '/@/assets/images/zx.png';
  64 +import lx from '/@/assets/images/lx.png';
  65 +import djh from '/@/assets/images/djh.png';
  66 +import online from '/@/assets/images/online1.png';
  67 +import lx1 from '/@/assets/images/lx1.png';
  68 +import Loading from '/@/components/Loading/src/Loading.vue';
  69 +import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
  70 +import { selectDeviceAttrSchema, eChartOptions } from './config.data';
  71 +import { defaultSchemas } from './cpns/TimePeriodForm/config';
  72 +import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
  73 +import { dateUtil } from '/@/utils/dateUtil';
  74 +export default defineComponent({
  75 + name: 'BaiduMap',
  76 + components: {
  77 + BasicTable,
  78 + Tag,
  79 + Empty,
  80 + BasicModal,
  81 + DeviceDetailDrawer,
  82 + Loading,
  83 + TimePeriodForm,
  84 + },
  85 + props: {
  86 + width: {
  87 + type: String,
  88 + default: '100%',
94 }, 89 },
95 - props: {  
96 - width: {  
97 - type: String,  
98 - default: '100%', 90 + height: {
  91 + type: String,
  92 + default: 'calc(100vh - 78px)',
  93 + },
  94 + },
  95 + setup() {
  96 + let entityId = '';
  97 + let globalRecord: any = {};
  98 + const wrapRef = ref<HTMLDivElement | null>(null);
  99 + const chartRef = ref<HTMLDivElement | null>(null);
  100 + const deviceAttrs = ref<string[]>([]);
  101 + const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  102 + const isNull = ref(true);
  103 + const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
  104 + const [registerDetailDrawer, { openDrawer }] = useDrawer();
  105 + const [registerModal, { openModal }] = useModal();
  106 + const loading = ref(false);
  107 +
  108 + const [registerTable] = useTable({
  109 + api: devicePage,
  110 + columns,
  111 + resizeHeightOffset: 32,
  112 + formConfig: {
  113 + schemas: formSchema,
  114 + labelAlign: 'left',
99 }, 115 },
100 - height: {  
101 - type: String,  
102 - default: 'calc(100vh - 78px)', 116 + showIndexColumn: false,
  117 + useSearchForm: true,
  118 + pagination: {
  119 + showSizeChanger: false,
103 }, 120 },
104 - },  
105 - setup() {  
106 - let entityId = '';  
107 - let globalRecord: any = {};  
108 - const wrapRef = ref<HTMLDivElement | null>(null);  
109 - const chartRef = ref<HTMLDivElement | null>(null);  
110 - const deviceAttrs = ref<string[]>([]);  
111 - const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);  
112 - const isNull = ref(true);  
113 - const { toPromise } = useScript({ src: BAI_DU_MAP_URL });  
114 - const [registerDetailDrawer, { openDrawer }] = useDrawer();  
115 - const [registerModal, { openModal }] = useModal();  
116 - const loading = ref(false); 121 + });
117 122
118 - const [registerTable] = useTable({  
119 - api: devicePage,  
120 - columns,  
121 - resizeHeightOffset: 32,  
122 - formConfig: {  
123 - schemas: formSchema,  
124 - labelAlign: 'left',  
125 - },  
126 - showIndexColumn: false,  
127 - useSearchForm: true,  
128 - pagination: {  
129 - showSizeChanger: false,  
130 - },  
131 - }); 123 + async function initMap() {
  124 + await toPromise();
  125 + await nextTick();
  126 + const wrapEl = unref(wrapRef);
  127 + const BMap = (window as any).BMap;
  128 + if (!wrapEl) return;
  129 + const map = new BMap.Map(wrapEl);
132 130
133 - async function initMap() {  
134 - await toPromise();  
135 - await nextTick();  
136 - const wrapEl = unref(wrapRef);  
137 - const BMap = (window as any).BMap;  
138 - if (!wrapEl) return;  
139 - const map = new BMap.Map(wrapEl);  
140 - const point = new BMap.Point(104.04666605565338, 30.543516387560476);  
141 - map.centerAndZoom(point, 15);  
142 - map.enableScrollWheelZoom(true);  
143 - }  
144 - // 点击表格某一行触发  
145 - const deviceRowClick = async (record) => {  
146 - entityId = record.tbDeviceId;  
147 - globalRecord = record;  
148 - const BMap = (window as any).BMap;  
149 - const wrapEl = unref(wrapRef);  
150 - const map = new BMap.Map(wrapEl);  
151 - // if (record.deviceInfo.address) {  
152 - // keys = await getDeviceDataKeys(entityId);  
153 - try {  
154 - deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];  
155 - } catch (error) {} 131 + const getLocation = new BMap.Geolocation();
  132 + getLocation.getCurrentPosition((position) => {
  133 + if (position) {
  134 + let preMarker = null;
  135 + const point = new BMap.Point(position.point.lng, position.point.lat);
  136 + let marker = new BMap.Marker(point, { size: 30 });
  137 + if (marker) {
  138 + map.removeOverlay(preMarker);
  139 + }
  140 + map.addOverlay(marker);
  141 + map.centerAndZoom(point, 15);
  142 + map.enableScrollWheelZoom(true);
  143 + } else {
  144 + const point = new BMap.Point(104.04666605565338, 30.543516387560476);
  145 + map.centerAndZoom(point, 15);
  146 + map.enableScrollWheelZoom(true);
  147 + }
  148 + })
  149 + }
  150 + // 点击表格某一行触发
  151 + const deviceRowClick = async (record) => {
  152 + entityId = record.tbDeviceId;
  153 + globalRecord = record;
  154 + const BMap = (window as any).BMap;
  155 + const wrapEl = unref(wrapRef);
  156 + const map = new BMap.Map(wrapEl);
  157 + // if (record.deviceInfo.address) {
  158 + // keys = await getDeviceDataKeys(entityId);
  159 + try {
  160 + deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
  161 + } catch (error) { }
156 162
157 - const { name, organizationDTO, deviceState, deviceProfile } = record;  
158 - const { longitude, latitude, address } = record.deviceInfo;  
159 - //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝  
160 - const point = new BMap.Point(  
161 - longitude == '' ? 104.04666605565338 : longitude,  
162 - latitude == '' ? 30.543516387560476 : latitude  
163 - );  
164 - let options = {  
165 - width: 330, // 信息窗口宽度  
166 - height: 0, // 信息窗口高度  
167 - };  
168 - map.centerAndZoom(point, 15);  
169 - map.enableScrollWheelZoom(true);  
170 - // 创建信息窗口对象  
171 - const res = await getDeviceActiveTime(entityId); 163 + const { name, organizationDTO, deviceState, deviceProfile } = record;
  164 + const { longitude, latitude, address } = record.deviceInfo;
  165 + //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
  166 + const point = new BMap.Point(
  167 + longitude == '' ? 104.04666605565338 : longitude,
  168 + latitude == '' ? 30.543516387560476 : latitude
  169 + );
  170 + let options = {
  171 + width: 330, // 信息窗口宽度
  172 + height: 0, // 信息窗口高度
  173 + };
  174 + map.centerAndZoom(point, 15);
  175 + map.enableScrollWheelZoom(true);
  176 + // 创建信息窗口对象
  177 + const res = await getDeviceActiveTime(entityId);
172 178
173 - let { value: activeStatus, lastUpdateTs } = res[0];  
174 - lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');  
175 - let infoWindow = new BMap.InfoWindow(  
176 - ` 179 + let { value: activeStatus, lastUpdateTs } = res[0];
  180 + lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
  181 + let infoWindow = new BMap.InfoWindow(
  182 + `
177 <div style="display:flex;justify-content:space-between; margin:20px 0px;"> 183 <div style="display:flex;justify-content:space-between; margin:20px 0px;">
178 <div style="font-size:16px;font-weight:bold">${name}</div> 184 <div style="font-size:16px;font-weight:bold">${name}</div>
179 - ${  
180 - deviceState === 'INACTIVE'  
181 - ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`  
182 - : deviceState === 'ONLINE'  
183 - ? `<div style="display:flex;align-items:center; "> 185 + ${deviceState === 'INACTIVE'
  186 + ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
  187 + : deviceState === 'ONLINE'
  188 + ? `<div style="display:flex;align-items:center; ">
184 <img style="width:15px;height:15px" src="${online}" class="mr-1">在线</div>` 189 <img style="width:15px;height:15px" src="${online}" class="mr-1">在线</div>`
185 - : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`  
186 - } 190 + : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
  191 + }
187 </div> 192 </div>
188 <div>所属组织：${organizationDTO.name}</div> 193 <div>所属组织：${organizationDTO.name}</div>
189 <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div> 194 <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
190 - <div style="margin-top:6px;">设备位置：${  
191 - address == '' ? '该设备暂无地理位置' : address  
192 - }</div> 195 + <div style="margin-top:6px;">设备位置：${address == '' ? '该设备暂无地理位置' : address
  196 + }</div>
193 <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div> 197 <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
194 <div style="display:flex;justify-content:end; margin-top:10px"> 198 <div style="display:flex;justify-content:end; margin-top:10px">
195 <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button> 199 <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
196 <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button> 200 <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
197 </div> 201 </div>
198 `, 202 `,
199 - options  
200 - );  
201 -  
202 - map.openInfoWindow(infoWindow, map.getCenter());  
203 - let preMarker = null;  
204 -  
205 - const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;  
206 - let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));  
207 - let marker = new BMap.Marker(point, { icon: myIcon });  
208 - if (marker) {  
209 - map.removeOverlay(preMarker);  
210 - }  
211 - map.addOverlay(marker);  
212 - //标注监听事件  
213 - marker.addEventListener('click', function (e) {  
214 - const point = e.point;  
215 - map.openInfoWindow(infoWindow, point);  
216 - });  
217 - //标注监听事件  
218 - // } else {  
219 - // const point = new BMap.Point(106.63028229687498, 36.06735821600903);  
220 - // let options = {  
221 - // width: 100, // 信息窗口宽度  
222 - // height: 100, // 信息窗口高度  
223 - // title: '提示', // 信息窗口标题  
224 - // };  
225 - // map.centerAndZoom(point, 5);  
226 - // map.enableScrollWheelZoom(true);  
227 - // let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象  
228 - // map.openInfoWindow(infoWindow, map.getCenter());  
229 - // }  
230 - }; 203 + options
  204 + );
231 205
232 - // 设备信息  
233 - const openDeviceInfoDrawer = async () => {  
234 - const { id, tbDeviceId } = globalRecord;  
235 - openDrawer(true, {  
236 - id,  
237 - tbDeviceId,  
238 - });  
239 - }; 206 + map.openInfoWindow(infoWindow, map.getCenter());
  207 + let preMarker = null;
240 208
241 - const [timePeriodRegister, method] = useTimePeriodForm({  
242 - schemas: [...defaultSchemas, ...selectDeviceAttrSchema],  
243 - async submitFunc() {  
244 - // 表单验证  
245 - await method.validate();  
246 - const value = method.getFieldsValue();  
247 - const searchParams = getSearchParams(value); 209 + const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
  210 + let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
  211 + let marker = new BMap.Marker(point, { icon: myIcon });
  212 + if (marker) {
  213 + map.removeOverlay(preMarker);
  214 + }
  215 + map.addOverlay(marker);
  216 + //标注监听事件
  217 + marker.addEventListener('click', function (e) {
  218 + const point = e.point;
  219 + map.openInfoWindow(infoWindow, point);
  220 + });
  221 + //标注监听事件
  222 + // } else {
  223 + // const point = new BMap.Point(106.63028229687498, 36.06735821600903);
  224 + // let options = {
  225 + // width: 100, // 信息窗口宽度
  226 + // height: 100, // 信息窗口高度
  227 + // title: '提示', // 信息窗口标题
  228 + // };
  229 + // map.centerAndZoom(point, 5);
  230 + // map.enableScrollWheelZoom(true);
  231 + // let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
  232 + // map.openInfoWindow(infoWindow, map.getCenter());
  233 + // }
  234 + };
248 235
249 - if (!hasDeviceAttr()) return;  
250 - // 发送请求  
251 - loading.value = true;  
252 - const res = await getDeviceHistoryInfo(searchParams);  
253 - // 判断数据对象是否为空  
254 - if (!Object.keys(res).length) {  
255 - isNull.value = false;  
256 - return;  
257 - } else {  
258 - isNull.value = true;  
259 - }  
260 - setChartOptions(res, value.keys);  
261 - loading.value = false;  
262 - }, 236 + // 设备信息
  237 + const openDeviceInfoDrawer = async () => {
  238 + const { id, tbDeviceId } = globalRecord;
  239 + openDrawer(true, {
  240 + id,
  241 + tbDeviceId,
263 }); 242 });
  243 + };
264 244
265 - function getSearchParams(value: Recordable) {  
266 - const { startTs, endTs, interval, agg, limit, keys, way } = value;  
267 - if (way === QueryWay.LATEST) {  
268 - return {  
269 - entityId,  
270 - keys: keys ? keys : unref(deviceAttrs).join(),  
271 - startTs: moment().subtract(startTs, 'ms').valueOf(),  
272 - endTs: Date.now(),  
273 - interval,  
274 - agg,  
275 - limit,  
276 - }; 245 + const [timePeriodRegister, method] = useTimePeriodForm({
  246 + schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
  247 + async submitFunc() {
  248 + // 表单验证
  249 + await method.validate();
  250 + const value = method.getFieldsValue();
  251 + const searchParams = getSearchParams(value);
  252 +
  253 + if (!hasDeviceAttr()) return;
  254 + // 发送请求
  255 + loading.value = true;
  256 + const res = await getDeviceHistoryInfo(searchParams);
  257 + // 判断数据对象是否为空
  258 + if (!Object.keys(res).length) {
  259 + isNull.value = false;
  260 + return;
277 } else { 261 } else {
278 - return {  
279 - entityId,  
280 - keys: keys ? keys : unref(deviceAttrs).join(),  
281 - startTs: moment(startTs).valueOf(),  
282 - endTs: moment(endTs).valueOf(),  
283 - interval,  
284 - agg,  
285 - limit,  
286 - }; 262 + isNull.value = true;
287 } 263 }
  264 + setChartOptions(res, value.keys);
  265 + loading.value = false;
  266 + },
  267 + });
  268 +
  269 + function getSearchParams(value: Recordable) {
  270 + const { startTs, endTs, interval, agg, limit, keys, way } = value;
  271 + if (way === QueryWay.LATEST) {
  272 + return {
  273 + entityId,
  274 + keys: keys ? keys : unref(deviceAttrs).join(),
  275 + startTs: moment().subtract(startTs, 'ms').valueOf(),
  276 + endTs: Date.now(),
  277 + interval,
  278 + agg,
  279 + limit,
  280 + };
  281 + } else {
  282 + return {
  283 + entityId,
  284 + keys: keys ? keys : unref(deviceAttrs).join(),
  285 + startTs: moment(startTs).valueOf(),
  286 + endTs: moment(endTs).valueOf(),
  287 + interval,
  288 + agg,
  289 + limit,
  290 + };
288 } 291 }
  292 + }
289 293
290 - const openHistoryModal = async () => {  
291 - openModal(true); 294 + const openHistoryModal = async () => {
  295 + openModal(true);
292 296
293 - await nextTick();  
294 - method.updateSchema({  
295 - field: 'keys',  
296 - componentProps: {  
297 - options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),  
298 - },  
299 - }); 297 + await nextTick();
  298 + method.updateSchema({
  299 + field: 'keys',
  300 + componentProps: {
  301 + options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
  302 + },
  303 + });
300 304
301 - method.setFieldsValue({  
302 - [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,  
303 - [SchemaFiled.LIMIT]: 7,  
304 - [SchemaFiled.AGG]: AggregateDataEnum.NONE,  
305 - }); 305 + method.setFieldsValue({
  306 + [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
  307 + [SchemaFiled.LIMIT]: 7,
  308 + [SchemaFiled.AGG]: AggregateDataEnum.NONE,
  309 + });
306 310
307 - if (!hasDeviceAttr()) return; 311 + if (!hasDeviceAttr()) return;
308 312
309 - const res = await getDeviceHistoryInfo({  
310 - entityId,  
311 - keys: unref(deviceAttrs).join(),  
312 - startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,  
313 - endTs: Date.now(),  
314 - agg: AggregateDataEnum.NONE,  
315 - }); 313 + const res = await getDeviceHistoryInfo({
  314 + entityId,
  315 + keys: unref(deviceAttrs).join(),
  316 + startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
  317 + endTs: Date.now(),
  318 + agg: AggregateDataEnum.NONE,
  319 + });
316 320
317 - // 判断对象是否为空  
318 - if (!Object.keys(res).length) {  
319 - isNull.value = false;  
320 - return;  
321 - } else {  
322 - isNull.value = true;  
323 - }  
324 - setChartOptions(res);  
325 - };  
326 - function hasDeviceAttr() {  
327 - if (!unref(deviceAttrs).length) {  
328 - isNull.value = false;  
329 - return false;  
330 - } else {  
331 - isNull.value = true;  
332 - return true;  
333 - } 321 + // 判断对象是否为空
  322 + if (!Object.keys(res).length) {
  323 + isNull.value = false;
  324 + return;
  325 + } else {
  326 + isNull.value = true;
  327 + }
  328 + setChartOptions(res);
  329 + };
  330 + function hasDeviceAttr() {
  331 + if (!unref(deviceAttrs).length) {
  332 + isNull.value = false;
  333 + return false;
  334 + } else {
  335 + isNull.value = true;
  336 + return true;
334 } 337 }
  338 + }
335 339
336 - function setChartOptions(data, keys?) {  
337 - const dataArray: any[] = [];  
338 - for (const key in data) {  
339 - for (const item1 of data[key]) {  
340 - let { ts, value } = item1;  
341 - const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');  
342 - value = Number(value).toFixed(2);  
343 - dataArray.push([time, value, key]);  
344 - } 340 + function setChartOptions(data, keys?) {
  341 + const dataArray: any[] = [];
  342 + for (const key in data) {
  343 + for (const item1 of data[key]) {
  344 + let { ts, value } = item1;
  345 + const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
  346 + value = Number(value).toFixed(2);
  347 + dataArray.push([time, value, key]);
345 } 348 }
346 - keys = keys ? [keys] : unref(deviceAttrs);  
347 - const series: any = keys.map((item) => {  
348 - return {  
349 - name: item,  
350 - type: 'line',  
351 - data: dataArray.filter((item1) => item1[2] === item),  
352 - };  
353 - });  
354 - // 设置数据  
355 - setOptions(eChartOptions(series, keys));  
356 } 349 }
357 -  
358 - const handleCancelModal = () => {  
359 - method.setFieldsValue({  
360 - [SchemaFiled.WAY]: QueryWay.LATEST,  
361 - [SchemaFiled.KEYS]: null,  
362 - [SchemaFiled.DATE_RANGE]: [],  
363 - [SchemaFiled.INTERVAL]: null,  
364 - [SchemaFiled.LIMIT]: 7,  
365 - [SchemaFiled.AGG]: AggregateDataEnum.NONE,  
366 - });  
367 - getInstance()?.clear();  
368 - };  
369 -  
370 - onMounted(() => {  
371 - initMap();  
372 - (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;  
373 - (window as any).openHistoryModal = openHistoryModal; 350 + keys = keys ? [keys] : unref(deviceAttrs);
  351 + const series: any = keys.map((item) => {
  352 + return {
  353 + name: item,
  354 + type: 'line',
  355 + data: dataArray.filter((item1) => item1[2] === item),
  356 + };
374 }); 357 });
  358 + // 设置数据
  359 + setOptions(eChartOptions(series, keys));
  360 + }
375 361
376 - onUnmounted(() => {  
377 - (window as any).openDeviceInfoDrawer = null;  
378 - (window as any).openHistoryModal = null; 362 + const handleCancelModal = () => {
  363 + method.setFieldsValue({
  364 + [SchemaFiled.WAY]: QueryWay.LATEST,
  365 + [SchemaFiled.KEYS]: null,
  366 + [SchemaFiled.DATE_RANGE]: [],
  367 + [SchemaFiled.INTERVAL]: null,
  368 + [SchemaFiled.LIMIT]: 7,
  369 + [SchemaFiled.AGG]: AggregateDataEnum.NONE,
379 }); 370 });
  371 + getInstance()?.clear();
  372 + };
380 373
381 - return {  
382 - wrapRef,  
383 - registerTable,  
384 - deviceRowClick,  
385 - DeviceState,  
386 - registerModal,  
387 - chartRef,  
388 - isNull,  
389 - registerDetailDrawer,  
390 - loading,  
391 - timePeriodRegister,  
392 - handleCancelModal,  
393 - };  
394 - },  
395 - }); 374 + onMounted(() => {
  375 + initMap();
  376 + (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
  377 + (window as any).openHistoryModal = openHistoryModal;
  378 + });
  379 +
  380 + onUnmounted(() => {
  381 + (window as any).openDeviceInfoDrawer = null;
  382 + (window as any).openHistoryModal = null;
  383 + });
  384 +
  385 + return {
  386 + wrapRef,
  387 + registerTable,
  388 + deviceRowClick,
  389 + DeviceState,
  390 + registerModal,
  391 + chartRef,
  392 + isNull,
  393 + registerDetailDrawer,
  394 + loading,
  395 + timePeriodRegister,
  396 + handleCancelModal,
  397 + };
  398 + },
  399 +});
396 </script> 400 </script>
397 <style scoped lang="less"> 401 <style scoped lang="less">
398 - .wrapper {  
399 - position: relative;  
400 - :deep(.BMap_shadow) {  
401 - display: none;  
402 - }  
403 - }  
404 - .right-wrap {  
405 - padding-top: 10px;  
406 - width: 28%;  
407 - height: 95%;  
408 - position: absolute;  
409 - right: 5%;  
410 - top: 3%;  
411 - background-color: #fff; 402 +.wrapper {
  403 + position: relative;
  404 +
  405 + :deep(.BMap_shadow) {
  406 + display: none;
412 } 407 }
  408 +}
  409 +
  410 +.right-wrap {
  411 + padding-top: 10px;
  412 + width: 28%;
  413 + height: 95%;
  414 + position: absolute;
  415 + right: 5%;
  416 + top: 3%;
  417 + background-color: #fff;
  418 +}
413 </style> 419 </style>
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicModal  
4 - v-bind="$attrs"  
5 - width="55rem"  
6 - @register="register"  
7 - :title="getTitle"  
8 - @ok="handleSubmit"  
9 - @cancel="handleCancel"  
10 - :showOkBtn="isShowOkBtnFalse"  
11 - > 3 + <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle" @ok="handleSubmit"
  4 + @cancel="handleCancel" :showOkBtn="isShowOkBtnFalse">
12 <div class="step-form-form"> 5 <div class="step-form-form">
13 <a-steps :current="current"> 6 <a-steps :current="current">
14 <a-step title="设备配置" /> 7 <a-step title="设备配置" />
@@ -18,281 +11,289 @@ @@ -18,281 +11,289 @@
18 <div class="mt-5"> 11 <div class="mt-5">
19 <!-- 设备配置 --> 12 <!-- 设备配置 -->
20 <div v-show="current === 0"> 13 <div v-show="current === 0">
21 - <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1"  
22 - /></div> 14 + <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1" />
  15 + </div>
23 <!-- 设备配置 --> 16 <!-- 设备配置 -->
24 <!-- 传输配置 --> 17 <!-- 传输配置 -->
25 <div v-show="current === 1"> 18 <div v-show="current === 1">
26 - <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev"  
27 - /></div> 19 + <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev" />
  20 + </div>
28 <!-- 传输配置 --> 21 <!-- 传输配置 -->
29 </div> 22 </div>
30 </BasicModal> 23 </BasicModal>
31 </div> 24 </div>
32 </template> 25 </template>
33 <script lang="ts"> 26 <script lang="ts">
34 - import {  
35 - defineComponent,  
36 - nextTick,  
37 - ref,  
38 - computed,  
39 - unref,  
40 - getCurrentInstance,  
41 - reactive,  
42 - } from 'vue';  
43 - import { BasicModal, useModalInner } from '/@/components/Modal';  
44 - import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';  
45 - import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';  
46 - import { Steps } from 'ant-design-vue';  
47 - import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';  
48 - import { useMessage } from '/@/hooks/web/useMessage'; 27 +import {
  28 + defineComponent,
  29 + nextTick,
  30 + ref,
  31 + computed,
  32 + unref,
  33 + getCurrentInstance,
  34 + reactive,
  35 +} from 'vue';
  36 +import { BasicModal, useModalInner } from '/@/components/Modal';
  37 +import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  38 +import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  39 +import { Steps } from 'ant-design-vue';
  40 +import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  41 +import { useMessage } from '/@/hooks/web/useMessage';
  42 +
  43 +export default defineComponent({
  44 + name: 'DeviceModal',
  45 + components: {
  46 + BasicModal,
  47 + DeviceProfileStep1,
  48 + DeviceProfileStep2,
  49 + [Steps.name]: Steps,
  50 + [Steps.Step.name]: Steps.Step,
  51 + },
  52 + props: {
  53 + userData: { type: Object },
  54 + },
  55 + emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
  56 + setup(_, { emit }) {
  57 + const { proxy } = getCurrentInstance() as any;
  58 + const DeviceProfileStep1Ref = ref(null);
  59 + const DeviceProfileStep2Ref = ref(null);
  60 + const { createMessage } = useMessage();
  61 + let postDeviceConfogData: any = reactive({});
  62 + let getStepOneData: any = reactive({});
  63 + let getStepTwoData: any = reactive({});
  64 + const editData: any = ref({});
  65 + const postEditId = ref('');
  66 + const createTime = ref('');
  67 + const current = ref(0);
  68 + const isUpdate = ref(0);
  69 + const isShowOkBtnFalse = ref(true);
  70 + const isNextStatus = ref(false);
  71 + let transportTypeObj = reactive({
  72 + transportType: '',
  73 + });
  74 + let profileDataObj: any = reactive({
  75 + profileData: null,
  76 + });
  77 + let isEdit = ref(true);
  78 + let noEditObj: any = reactive({});
  79 + const getTitle = computed(() =>
  80 + isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
  81 + );
  82 + const editTransportType = ref('');
  83 + const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
  84 + const [register, { closeModal }] = useModalInner(async (data) => {
  85 + isUpdate.value = data.isUpdate;
  86 + if (isUpdate.value == 1) {
  87 + handleCancel();
  88 + isShowOkBtnFalse.value = true;
  89 + current.value = 0;
  90 + isEdit.value = false;
  91 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
  92 + } else if (isUpdate.value == 2) {
  93 + isEdit.value = true;
  94 + handleCancel();
  95 + isShowOkBtnFalse.value = true;
  96 + current.value = 0;
  97 + postEditId.value = data.record.id;
  98 + createTime.value = data.record.createTime;
  99 + editTransportType.value = data.record.transportType;
  100 + editData.value = await deviceConfigGetDetail(postEditId.value);
  101 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  102 + name: editData.value.name,
  103 + defaultRuleChainId: editData.value.defaultRuleChainId,
  104 + defaultQueueName: editData.value.defaultQueueName,
  105 + description: editData.value.description,
  106 + image: editData.value.image,
  107 + });
  108 + if (editData.value.default) {
  109 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)
  110 +
  111 + } else {
  112 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
49 113
50 - export default defineComponent({  
51 - name: 'DeviceModal',  
52 - components: {  
53 - BasicModal,  
54 - DeviceProfileStep1,  
55 - DeviceProfileStep2,  
56 - [Steps.name]: Steps,  
57 - [Steps.Step.name]: Steps.Step,  
58 - },  
59 - props: {  
60 - userData: { type: Object },  
61 - },  
62 - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],  
63 - setup(_, { emit }) {  
64 - const { proxy } = getCurrentInstance() as any;  
65 - const DeviceProfileStep1Ref = ref(null);  
66 - const DeviceProfileStep2Ref = ref(null);  
67 - const { createMessage } = useMessage();  
68 - let postDeviceConfogData: any = reactive({});  
69 - let getStepOneData: any = reactive({});  
70 - let getStepTwoData: any = reactive({});  
71 - const editData: any = ref({});  
72 - const postEditId = ref('');  
73 - const createTime = ref('');  
74 - const current = ref(0);  
75 - const isUpdate = ref(0);  
76 - const isShowOkBtnFalse = ref(true);  
77 - const isNextStatus = ref(false);  
78 - let transportTypeObj = reactive({  
79 - transportType: '',  
80 - });  
81 - let profileDataObj: any = reactive({  
82 - profileData: null,  
83 - });  
84 - let isEdit = ref(true);  
85 - let noEditObj: any = reactive({});  
86 - const getTitle = computed(() =>  
87 - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'  
88 - );  
89 - const editTransportType = ref('');  
90 - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));  
91 - const [register, { closeModal }] = useModalInner(async (data) => {  
92 - isUpdate.value = data.isUpdate;  
93 - if (isUpdate.value == 1) {  
94 - handleCancel();  
95 - isShowOkBtnFalse.value = true;  
96 - current.value = 0;  
97 - isEdit.value = false;  
98 - } else if (isUpdate.value == 2) {  
99 - isEdit.value = true;  
100 - handleCancel();  
101 - isShowOkBtnFalse.value = true;  
102 - current.value = 0;  
103 - postEditId.value = data.record.id;  
104 - createTime.value = data.record.createTime;  
105 - editTransportType.value = data.record.transportType;  
106 - editData.value = await deviceConfigGetDetail(postEditId.value);  
107 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
108 - name: editData.value.name,  
109 - defaultRuleChainId: editData.value.defaultRuleChainId,  
110 - defaultQueueName: editData.value.defaultQueueName,  
111 - description: editData.value.description,  
112 - image: editData.value.image,  
113 - });  
114 - noEditObj = {  
115 - id: editData.value.id,  
116 - name: editData.value?.name,  
117 - createTime: createTime.value,  
118 - transportType: editTransportType.value,  
119 - type: editData.value?.type,  
120 - profileData: editData.value?.profileData,  
121 - defaultQueueName: editData.value.defaultQueueName,  
122 - image: editData.value.image,  
123 - defaultRuleChainId: editData.value.defaultRuleChainId,  
124 - description: editData.value.description,  
125 - tenantId: editData.value.tenantId,  
126 - };  
127 - } else if (isUpdate.value == 3) {  
128 - handleCancel();  
129 - isShowOkBtnFalse.value = false;  
130 - current.value = 0;  
131 - postEditId.value = data.record.id;  
132 - createTime.value = data.record.createTime;  
133 - editData.value = await deviceConfigGetDetail(postEditId.value);  
134 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
135 - name: editData.value.name,  
136 - defaultRuleChainId: editData.value.defaultRuleChainId,  
137 - defaultQueueName: editData.value.defaultQueueName,  
138 - description: editData.value.description,  
139 - image: editData.value.image,  
140 - });  
141 - }  
142 - });  
143 - function handleStepPrev() {  
144 - current.value--;  
145 - if (isUpdate.value == 2) {  
146 - isEdit.value = true;  
147 - noEditObj = {  
148 - id: editData.value.id,  
149 - name: editData.value?.name,  
150 - createTime: createTime.value,  
151 - transportType: editTransportType.value,  
152 - type: editData.value?.type,  
153 - profileData: editData.value?.profileData,  
154 - defaultQueueName: editData.value.defaultQueueName,  
155 - image: editData.value.image,  
156 - defaultRuleChainId: editData.value.defaultRuleChainId,  
157 - description: editData.value.description,  
158 - tenantId: editData.value.tenantId,  
159 - };  
160 - nextTick(async () => {  
161 - let getPic = null;  
162 - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();  
163 - getPic = getStep1Obj.icon;  
164 - Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);  
165 - });  
166 - }  
167 - }  
168 - //第一步  
169 - function handleStepNext1(v, v1) {  
170 - isNextStatus.value = true;  
171 - if (isNextStatus.value) {  
172 - getStepOneData = {  
173 - ...v,  
174 - ...{ image: v1 },  
175 - };  
176 - }  
177 - current.value++;  
178 - if (isUpdate.value == 2) {  
179 - isEdit.value = false;  
180 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
181 - } else if (isUpdate.value == 3) {  
182 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
183 } 114 }
  115 + noEditObj = {
  116 + id: editData.value.id,
  117 + name: editData.value?.name,
  118 + createTime: createTime.value,
  119 + transportType: editTransportType.value,
  120 + type: editData.value?.type,
  121 + profileData: editData.value?.profileData,
  122 + defaultQueueName: editData.value.defaultQueueName,
  123 + image: editData.value.image,
  124 + defaultRuleChainId: editData.value.defaultRuleChainId,
  125 + description: editData.value.description,
  126 + tenantId: editData.value.tenantId,
  127 + };
  128 + } else if (isUpdate.value == 3) {
  129 + handleCancel();
  130 + isShowOkBtnFalse.value = false;
  131 + current.value = 0;
  132 + postEditId.value = data.record.id;
  133 + createTime.value = data.record.createTime;
  134 + editData.value = await deviceConfigGetDetail(postEditId.value);
  135 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  136 + name: editData.value.name,
  137 + defaultRuleChainId: editData.value.defaultRuleChainId,
  138 + defaultQueueName: editData.value.defaultQueueName,
  139 + description: editData.value.description,
  140 + image: editData.value.image,
  141 + });
184 } 142 }
185 - const handleSubmit = async () => {  
186 - let getPic = null;  
187 - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();  
188 - profileDataObj.profileData = getStepTwoData;  
189 - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;  
190 - delete profileDataObj?.profileData?.transportConfiguration?.transportType;  
191 - //没有点击下一步  
192 - if (!isNextStatus.value) { 143 + });
  144 + function handleStepPrev() {
  145 + current.value--;
  146 + if (isUpdate.value == 2) {
  147 + isEdit.value = true;
  148 + noEditObj = {
  149 + id: editData.value.id,
  150 + name: editData.value?.name,
  151 + createTime: createTime.value,
  152 + transportType: editTransportType.value,
  153 + type: editData.value?.type,
  154 + profileData: editData.value?.profileData,
  155 + defaultQueueName: editData.value.defaultQueueName,
  156 + image: editData.value.image,
  157 + defaultRuleChainId: editData.value.defaultRuleChainId,
  158 + description: editData.value.description,
  159 + tenantId: editData.value.tenantId,
  160 + };
  161 + nextTick(async () => {
  162 + let getPic = null;
193 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func(); 163 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
194 getPic = getStep1Obj.icon; 164 getPic = getStep1Obj.icon;
195 - getStepOneData = {  
196 - ...getStep1Obj.key,  
197 - ...{ image: getPic },  
198 - };  
199 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key); 165 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
200 - }  
201 - const id = isUpdate.value == 1 ? '' : postEditId.value;  
202 - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };  
203 -  
204 - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {  
205 - profileDataObj.profileData = null;  
206 - }  
207 - postDeviceConfogData = {  
208 - ...getStepOneData,  
209 - ...profileDataObj,  
210 - ...transportTypeObj,  
211 - id,  
212 - ...createTimePost, 166 + });
  167 + }
  168 + }
  169 + //第一步
  170 + function handleStepNext1(v, v1) {
  171 + isNextStatus.value = true;
  172 + if (isNextStatus.value) {
  173 + getStepOneData = {
  174 + ...v,
  175 + ...{ image: v1 },
213 }; 176 };
214 - if (isUpdate.value == 1) {  
215 - delete postDeviceConfogData.id;  
216 - }  
217 - let isMappingsKey = ref(false);  
218 - let isMappingValue = ref(false);  
219 - let isQueryings = ref(false);  
220 - let isOIDRepet = ref(false);  
221 - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(  
222 - (f: any) => {  
223 - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {  
224 - if (f.queryingFrequencyMs == null) {  
225 - isQueryings.value = true;  
226 - return createMessage.error('请填写查询频率');  
227 - } else {  
228 - isQueryings.value = false;  
229 - }  
230 - }  
231 - if (f.mappings.length == 0) {  
232 - isMappingsKey.value = true;  
233 - isMappingValue.value = true; 177 + }
  178 + current.value++;
  179 + if (isUpdate.value == 2) {
  180 + isEdit.value = false;
  181 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  182 + } else if (isUpdate.value == 3) {
  183 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  184 + }
  185 + }
  186 + const handleSubmit = async () => {
  187 + let getPic = null;
  188 + getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
  189 + profileDataObj.profileData = getStepTwoData;
  190 + transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
  191 + delete profileDataObj?.profileData?.transportConfiguration?.transportType;
  192 + //没有点击下一步
  193 + if (!isNextStatus.value) {
  194 + const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  195 + getPic = getStep1Obj.icon;
  196 + getStepOneData = {
  197 + ...getStep1Obj.key,
  198 + ...{ image: getPic },
  199 + };
  200 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  201 + }
  202 + const id = isUpdate.value == 1 ? '' : postEditId.value;
  203 + const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
  204 +
  205 + if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
  206 + profileDataObj.profileData = null;
  207 + }
  208 + postDeviceConfogData = {
  209 + ...getStepOneData,
  210 + ...profileDataObj,
  211 + ...transportTypeObj,
  212 + id,
  213 + ...createTimePost,
  214 + };
  215 + if (isUpdate.value == 1) {
  216 + delete postDeviceConfogData.id;
  217 + }
  218 + let isMappingsKey = ref(false);
  219 + let isMappingValue = ref(false);
  220 + let isQueryings = ref(false);
  221 + let isOIDRepet = ref(false);
  222 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  223 + (f: any) => {
  224 + if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
  225 + if (f.queryingFrequencyMs == null) {
  226 + isQueryings.value = true;
  227 + return createMessage.error('请填写查询频率');
234 } else { 228 } else {
235 - f.mappings.forEach((f1) => {  
236 - const findNoneKey = Object.keys(f1).includes('');  
237 - if (findNoneKey) {  
238 - isMappingsKey.value = true;  
239 - }  
240 - });  
241 - f.mappings.forEach((f2) => {  
242 - const findNoneVal = Object.values(f2).includes('');  
243 - if (findNoneVal) {  
244 - isMappingValue.value = true;  
245 - }  
246 - });  
247 - //新增OID不能重复=====同一层级的OID不能重复  
248 - f.mappings.forEach((item, _) => {  
249 - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {  
250 - isOIDRepet.value = true;  
251 - }  
252 - }); 229 + isQueryings.value = false;
253 } 230 }
254 } 231 }
255 - );  
256 - if (isQueryings.value) return createMessage.error('请填写查询频率');  
257 - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');  
258 - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');  
259 - if (isOIDRepet.value) return createMessage.error('OID不能重复');  
260 - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)  
261 - .then((res) => {  
262 - if (!res) return;  
263 - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');  
264 - closeModal();  
265 - emit('success');  
266 - isNextStatus.value = false;  
267 - })  
268 - .catch((e) => {  
269 - createMessage.error(e);  
270 - });  
271 - };  
272 - const handleCancel = () => {  
273 - nextTick(() => {  
274 - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();  
275 - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc(); 232 + if (f.mappings.length == 0) {
  233 + isMappingsKey.value = true;
  234 + isMappingValue.value = true;
  235 + } else {
  236 + f.mappings.forEach((f1) => {
  237 + const findNoneKey = Object.keys(f1).includes('');
  238 + if (findNoneKey) {
  239 + isMappingsKey.value = true;
  240 + }
  241 + });
  242 + f.mappings.forEach((f2) => {
  243 + const findNoneVal = Object.values(f2).includes('');
  244 + if (findNoneVal) {
  245 + isMappingValue.value = true;
  246 + }
  247 + });
  248 + //新增OID不能重复=====同一层级的OID不能重复
  249 + f.mappings.forEach((item, _) => {
  250 + if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
  251 + isOIDRepet.value = true;
  252 + }
  253 + });
  254 + }
  255 + }
  256 + );
  257 + if (isQueryings.value) return createMessage.error('请填写查询频率');
  258 + if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
  259 + if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
  260 + if (isOIDRepet.value) return createMessage.error('OID不能重复');
  261 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
  262 + .then((res) => {
  263 + if (!res) return;
  264 + createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
  265 + closeModal();
  266 + emit('success');
  267 + isNextStatus.value = false;
  268 + })
  269 + .catch((e) => {
  270 + createMessage.error(e);
276 }); 271 });
277 - };  
278 - function handleRedo() {  
279 - current.value = 0;  
280 - }  
281 - return {  
282 - isShowOkBtnFalse,  
283 - DeviceProfileStep2Ref,  
284 - DeviceProfileStep1Ref,  
285 - editData,  
286 - handleSubmit,  
287 - handleCancel,  
288 - register,  
289 - getTitle,  
290 - getViewTitle,  
291 - current,  
292 - handleStepPrev,  
293 - handleStepNext1,  
294 - handleRedo,  
295 - };  
296 - },  
297 - }); 272 + };
  273 + const handleCancel = () => {
  274 + nextTick(() => {
  275 + proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
  276 + proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
  277 + });
  278 + };
  279 + function handleRedo() {
  280 + current.value = 0;
  281 + }
  282 + return {
  283 + isShowOkBtnFalse,
  284 + DeviceProfileStep2Ref,
  285 + DeviceProfileStep1Ref,
  286 + editData,
  287 + handleSubmit,
  288 + handleCancel,
  289 + register,
  290 + getTitle,
  291 + getViewTitle,
  292 + current,
  293 + handleStepPrev,
  294 + handleStepNext1,
  295 + handleRedo,
  296 + };
  297 + },
  298 +});
298 </script> 299 </script>
@@ -4,21 +4,9 @@ @@ -4,21 +4,9 @@
4 <div> 4 <div>
5 <BasicForm @register="register"> 5 <BasicForm @register="register">
6 <template #imageSelect> 6 <template #imageSelect>
7 - <Upload  
8 - style="width: 20vw"  
9 - name="avatar"  
10 - list-type="picture-card"  
11 - class="avatar-uploader"  
12 - :show-upload-list="false"  
13 - :customRequest="customUploadqrcodePic"  
14 - :before-upload="beforeUploadqrcodePic"  
15 - >  
16 - <img  
17 - v-if="peresonalPic"  
18 - :src="peresonalPic"  
19 - alt="avatar"  
20 - style="width: 6.25rem; height: 6.25rem"  
21 - /> 7 + <Upload style="width: 20vw" name="avatar" list-type="picture-card" class="avatar-uploader"
  8 + :show-upload-list="false" :customRequest="customUploadqrcodePic" :before-upload="beforeUploadqrcodePic">
  9 + <img v-if="peresonalPic" :src="peresonalPic" alt="avatar" style="width: 6.25rem; height: 6.25rem" />
22 <div v-else> 10 <div v-else>
23 <LoadingOutlined v-if="loading" /> 11 <LoadingOutlined v-if="loading" />
24 <PlusOutlined v-else /> 12 <PlusOutlined v-else />
@@ -32,154 +20,161 @@ @@ -32,154 +20,161 @@
32 </div> 20 </div>
33 </template> 21 </template>
34 <script lang="ts"> 22 <script lang="ts">
35 - import { defineComponent, ref } from 'vue';  
36 - import { BasicForm, useForm } from '/@/components/Form';  
37 - import { step1Schemas } from './data';  
38 - import { Select, Input, Divider } from 'ant-design-vue';  
39 - import { uploadApi } from '/@/api/personal/index';  
40 - import { Upload } from 'ant-design-vue';  
41 - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';  
42 - import { useMessage } from '/@/hooks/web/useMessage';  
43 - import type { FileItem } from '/@/components/Upload/src/typing'; 23 +import { defineComponent, ref } from 'vue';
  24 +import { BasicForm, useForm } from '/@/components/Form';
  25 +import { step1Schemas } from './data';
  26 +import { Select, Input, Divider } from 'ant-design-vue';
  27 +import { uploadApi } from '/@/api/personal/index';
  28 +import { Upload } from 'ant-design-vue';
  29 +import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  30 +import { useMessage } from '/@/hooks/web/useMessage';
  31 +import type { FileItem } from '/@/components/Upload/src/typing';
44 32
45 - export default defineComponent({  
46 - components: {  
47 - BasicForm,  
48 - [Select.name]: Select,  
49 - [Input.name]: Input,  
50 - [Input.Group.name]: Input.Group,  
51 - [Divider.name]: Divider,  
52 - Upload,  
53 - PlusOutlined,  
54 - LoadingOutlined,  
55 - },  
56 - emits: ['next', 'resetFunc', 'register'],  
57 - setup(_, { emit }) {  
58 - const loading = ref(false); 33 +export default defineComponent({
  34 + components: {
  35 + BasicForm,
  36 + [Select.name]: Select,
  37 + [Input.name]: Input,
  38 + [Input.Group.name]: Input.Group,
  39 + [Divider.name]: Divider,
  40 + Upload,
  41 + PlusOutlined,
  42 + LoadingOutlined,
  43 + },
  44 + emits: ['next', 'resetFunc', 'register'],
  45 + setup(_, { emit }) {
  46 + const loading = ref(false);
59 47
60 - const { createMessage } = useMessage();  
61 - const peresonalPic = ref(''); 48 + const { createMessage } = useMessage();
  49 + const peresonalPic = ref('');
62 50
63 - const [register, { validate, setFieldsValue, resetFields }] = useForm({  
64 - labelWidth: 100,  
65 - schemas: step1Schemas,  
66 - actionColOptions: {  
67 - span: 14,  
68 - },  
69 - showResetButton: false,  
70 - submitButtonOptions: {  
71 - text: '下一步',  
72 - },  
73 - submitFunc: customSubmitFunc,  
74 - });  
75 - //回显数据  
76 - const setStepOneFieldsValueFunc = (v) => {  
77 - setFieldsValue(v);  
78 - peresonalPic.value = v.image;  
79 - };  
80 - const customUploadqrcodePic = async ({ file }) => {  
81 - if (beforeUploadqrcodePic(file)) {  
82 - peresonalPic.value = '';  
83 - loading.value = true;  
84 - const formData = new FormData();  
85 - formData.append('file', file);  
86 - const response = await uploadApi(formData);  
87 - if (response.fileStaticUri) {  
88 - peresonalPic.value = response.fileStaticUri;  
89 - loading.value = false;  
90 - }  
91 - }  
92 - };  
93 - const beforeUploadqrcodePic = (file: FileItem) => {  
94 - const isJpgOrPng =  
95 - file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';  
96 - if (!isJpgOrPng) {  
97 - createMessage.error('只能上传图片文件!');  
98 - }  
99 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
100 - if (!isLt2M) {  
101 - createMessage.error('图片大小不能超过5MB!');  
102 - }  
103 - return isJpgOrPng && isLt2M;  
104 - };  
105 -  
106 - async function customSubmitFunc() {  
107 - const values = await validate();  
108 - emit('next', values, peresonalPic.value); 51 + const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
  52 + labelWidth: 100,
  53 + schemas: step1Schemas,
  54 + actionColOptions: {
  55 + span: 14,
  56 + },
  57 + showResetButton: false,
  58 + submitButtonOptions: {
  59 + text: '下一步',
  60 + },
  61 + submitFunc: customSubmitFunc,
  62 + });
  63 + const editOrAddNameStatus = (nameStatus) => updateSchema({
  64 + field: 'name', componentProps: {
  65 + disabled: nameStatus
109 } 66 }
110 - //清空数据  
111 - const customResetStepOneFunc = () => {  
112 - resetFields(); 67 + })
  68 + //回显数据
  69 + const setStepOneFieldsValueFunc = (v) => {
  70 + setFieldsValue(v);
  71 + peresonalPic.value = v.image;
  72 + };
  73 + const customUploadqrcodePic = async ({ file }) => {
  74 + if (beforeUploadqrcodePic(file)) {
113 peresonalPic.value = ''; 75 peresonalPic.value = '';
114 - };  
115 - const getStep1Func = async () => {  
116 - const valueStep1 = await validate();  
117 - const pic = peresonalPic.value;  
118 - return {  
119 - key: valueStep1,  
120 - icon: pic,  
121 - };  
122 - }; 76 + loading.value = true;
  77 + const formData = new FormData();
  78 + formData.append('file', file);
  79 + const response = await uploadApi(formData);
  80 + if (response.fileStaticUri) {
  81 + peresonalPic.value = response.fileStaticUri;
  82 + loading.value = false;
  83 + }
  84 + }
  85 + };
  86 + const beforeUploadqrcodePic = (file: FileItem) => {
  87 + const isJpgOrPng =
  88 + file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  89 + if (!isJpgOrPng) {
  90 + createMessage.error('只能上传图片文件!');
  91 + }
  92 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  93 + if (!isLt2M) {
  94 + createMessage.error('图片大小不能超过5MB!');
  95 + }
  96 + return isJpgOrPng && isLt2M;
  97 + };
  98 +
  99 + async function customSubmitFunc() {
  100 + const values = await validate();
  101 + emit('next', values, peresonalPic.value);
  102 + }
  103 + //清空数据
  104 + const customResetStepOneFunc = () => {
  105 + resetFields();
  106 + peresonalPic.value = '';
  107 + };
  108 + const getStep1Func = async () => {
  109 + const valueStep1 = await validate();
  110 + const pic = peresonalPic.value;
123 return { 111 return {
124 - register,  
125 - setStepOneFieldsValueFunc,  
126 - customResetStepOneFunc,  
127 - uploadApi,  
128 - peresonalPic,  
129 - beforeUploadqrcodePic,  
130 - customUploadqrcodePic,  
131 - getStep1Func,  
132 - loading, 112 + key: valueStep1,
  113 + icon: pic,
133 }; 114 };
134 - },  
135 - }); 115 + };
  116 + return {
  117 + register,
  118 + setStepOneFieldsValueFunc,
  119 + customResetStepOneFunc,
  120 + uploadApi,
  121 + peresonalPic,
  122 + beforeUploadqrcodePic,
  123 + customUploadqrcodePic,
  124 + getStep1Func,
  125 + loading,
  126 + editOrAddNameStatus
  127 + };
  128 + },
  129 +});
136 </script> 130 </script>
137 <style lang="less" scoped> 131 <style lang="less" scoped>
138 - .step1 {  
139 - &-form {  
140 - width: 500px;  
141 - margin: 0 auto;  
142 - }  
143 -  
144 - h3 {  
145 - margin: 0 0 12px;  
146 - font-size: 16px;  
147 - line-height: 32px;  
148 - color: @text-color;  
149 - } 132 +.step1 {
  133 + &-form {
  134 + width: 500px;
  135 + margin: 0 auto;
  136 + }
150 137
151 - h4 {  
152 - margin: 0 0 4px;  
153 - font-size: 14px;  
154 - line-height: 22px;  
155 - color: @text-color;  
156 - } 138 + h3 {
  139 + margin: 0 0 12px;
  140 + font-size: 16px;
  141 + line-height: 32px;
  142 + color: @text-color;
  143 + }
157 144
158 - p {  
159 - color: @text-color;  
160 - }  
161 - .device-icon-style {  
162 - :deep .ant-upload-select-picture-card {  
163 - display: inherit;  
164 - float: none;  
165 - width: 4.9vw;  
166 - height: 9.5vh;  
167 - margin-right: 8px;  
168 - text-align: center;  
169 - vertical-align: top;  
170 - background-color: #fafafa;  
171 - border: 1px dashed #d9d9d9;  
172 - cursor: pointer;  
173 - transition: border-color 0.3s ease;  
174 - }  
175 - } 145 + h4 {
  146 + margin: 0 0 4px;
  147 + font-size: 14px;
  148 + line-height: 22px;
  149 + color: @text-color;
176 } 150 }
177 151
178 - .pay-select {  
179 - width: 20%; 152 + p {
  153 + color: @text-color;
180 } 154 }
181 155
182 - .pay-input {  
183 - width: 70%; 156 + .device-icon-style {
  157 + :deep .ant-upload-select-picture-card {
  158 + display: inherit;
  159 + float: none;
  160 + width: 4.9vw;
  161 + height: 9.5vh;
  162 + margin-right: 8px;
  163 + text-align: center;
  164 + vertical-align: top;
  165 + background-color: #fafafa;
  166 + border: 1px dashed #d9d9d9;
  167 + cursor: pointer;
  168 + transition: border-color 0.3s ease;
  169 + }
184 } 170 }
  171 +}
  172 +
  173 +.pay-select {
  174 + width: 20%;
  175 +}
  176 +
  177 +.pay-input {
  178 + width: 70%;
  179 +}
185 </style> 180 </style>
@@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict'; @@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
4 4
5 export const step1Schemas: FormSchema[] = [ 5 export const step1Schemas: FormSchema[] = [
6 { 6 {
7 - field: 'name', 7 + field: 'image',
8 label: '上传图片', 8 label: '上传图片',
9 component: 'Input', 9 component: 'Input',
10 slot: 'imageSelect', 10 slot: 'imageSelect',
@@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [ @@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [
14 label: '配置名称', 14 label: '配置名称',
15 required: true, 15 required: true,
16 component: 'Input', 16 component: 'Input',
17 - componentProps: {  
18 - maxLength: 255,  
19 - placeholder: '请输入配置名称', 17 + componentProps() {
  18 + return {
  19 + disabled: false,
  20 + ength: 255,
  21 + placeholder: '请输入配置名称',
  22 + };
20 }, 23 },
21 }, 24 },
22 { 25 {
@@ -119,6 +119,10 @@ @@ -119,6 +119,10 @@
119 //登录失败如果是502，返回的html,那么提示框什么都没有 119 //登录失败如果是502，返回的html,那么提示框什么都没有
120 if (data.message == 'Invalid username or password' && typeof data.message == 'string') { 120 if (data.message == 'Invalid username or password' && typeof data.message == 'string') {
121 createMessage.error(data.message); 121 createMessage.error(data.message);
  122 + } else if (data.message == '账号已过期,请联系管理员') {
  123 + createMessage.error(data.message);
  124 + } else {
  125 + createMessage.error(data.message);
122 } 126 }
123 }); 127 });
124 if (userInfo) { 128 if (userInfo) {