简柏林 / thingskit-front · Commits

Commit a8d0bfbe50d16690372c70bb42c435f3f89238f5

Authored by fengwotao
1 parent 0ec5a22f

pref：优化设备地理位置为当前定位

Inline Side-by-side
Showing 1 changed file with 346 additions and 340 deletions
@@ -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>