简柏林 / thingskit-front · Commits

You need to sign in or sign up before continuing.

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 46 },
47 47 ]);
48 48 const getLogo = computed(() => {
49   - return userStore.platInfo?.logo;
  49 + return userStore.platInfo?.background;
50 50 });
51 51 const getTitle = computed(() => {
52 52 // 设置icon
... ...
... ... @@ -4,22 +4,19 @@
4 4 <div class="right-wrap">
5 5 <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick">
6 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 21 </Tag>
25 22 </template>
... ... @@ -30,15 +27,8 @@
30 27 </template>
31 28 </BasicTable>
32 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 32 <TimePeriodForm @register="timePeriodRegister" />
43 33 <!-- <BasicForm @register="registerForm" /> -->
44 34 <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }">
... ... @@ -50,364 +40,380 @@
50 40 </div>
51 41 </template>
52 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 183 <div style="display:flex;justify-content:space-between; margin:20px 0px;">
178 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 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 192 </div>
188 193 <div>所属组织：${organizationDTO.name}</div>
189 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 197 <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
194 198 <div style="display:flex;justify-content:end; margin-top:10px">
195 199 <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
196 200 <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
197 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 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 400 </script>
397 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 419 </style>
... ...
1 1 <template>
2 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 5 <div class="step-form-form">
13 6 <a-steps :current="current">
14 7 <a-step title="设备配置" />
... ... @@ -18,281 +11,289 @@
18 11 <div class="mt-5">
19 12 <!-- 设备配置 -->
20 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 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 22 </div>
30 23 </BasicModal>
31 24 </div>
32 25 </template>
33 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 163 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
194 164 getPic = getStep1Obj.icon;
195   - getStepOneData = {
196   - ...getStep1Obj.key,
197   - ...{ image: getPic },
198   - };
199 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 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 299 </script>
... ...
... ... @@ -4,21 +4,9 @@
4 4 <div>
5 5 <BasicForm @register="register">
6 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 10 <div v-else>
23 11 <LoadingOutlined v-if="loading" />
24 12 <PlusOutlined v-else />
... ... @@ -32,154 +20,161 @@
32 20 </div>
33 21 </template>
34 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 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 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 130 </script>
137 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 180 </style>
... ...
... ... @@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
4 4
5 5 export const step1Schemas: FormSchema[] = [
6 6 {
7   - field: 'name',
  7 + field: 'image',
8 8 label: '上传图片',
9 9 component: 'Input',
10 10 slot: 'imageSelect',
... ... @@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [
14 14 label: '配置名称',
15 15 required: true,
16 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 119 //登录失败如果是502，返回的html,那么提示框什么都没有
120 120 if (data.message == 'Invalid username or password' && typeof data.message == 'string') {
121 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 128 if (userInfo) {
... ...