新增设备

plus-ui-ts/src/views/system/device/index.vue → plus-ui-ts/src/views/device/deviceList/index.vue

@@ -7,9 +7,6 @@
             <el-form-item label="名称" prop="name">
               <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
-            <el-form-item label="方向" prop="direction">
-              <el-input v-model="queryParams.direction" placeholder="请输入方向" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
             <el-form-item label="桩号" prop="zh">
               <el-input v-model="queryParams.zh" placeholder="请输入桩号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
@@ -35,13 +32,14 @@
             <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:device:add']">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:device:edit']">修改</el-button>
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:device:edit']"
+              >修改</el-button
+            >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:device:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:device:export']">导出</el-button>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:device:remove']"
+              >删除</el-button
+            >
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -49,14 +47,12 @@
 
       <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="编号" align="center" prop="id" v-if="true" />
+        <el-table-column label="编号" align="center" prop="id" />
         <el-table-column label="名称" align="center" prop="name" />
         <el-table-column label="方向" align="center" prop="direction" />
         <el-table-column label="桩号" align="center" prop="zh" />
         <el-table-column label="经度" align="center" prop="lon" />
         <el-table-column label="纬度" align="center" prop="lat" />
-        <el-table-column label="扩展1" align="center" prop="ext1" />
-        <el-table-column label="扩展2" align="center" prop="ext2" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
@@ -72,23 +68,28 @@
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改设备-摄像机对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="deviceFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="方向" prop="direction">
-          <el-input v-model="form.direction" placeholder="请输入方向" />
-        </el-form-item>
-        <el-form-item label="桩号" prop="zh">
-          <el-input v-model="form.zh" placeholder="请输入桩号" />
-        </el-form-item>
-        <el-form-item label="经度" prop="lon">
-          <el-input v-model="form.lon" placeholder="请输入经度" />
-        </el-form-item>
-        <el-form-item label="纬度" prop="lat">
-          <el-input v-model="form.lat" placeholder="请输入纬度" />
-        </el-form-item>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="deviceFormRef" label-position="top" label-suffix=":" :model="form" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" /> </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="方向" prop="direction">
+              <el-input v-model="form.direction" placeholder="请输入方向" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="桩号" prop="zh">
+              <el-input v-model="form.zh" placeholder="请输入桩号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="位置">
+              <div class="map" id="map"></div>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -117,7 +118,7 @@ const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const deviceFormRef = ref<ElFormInstance>();
-
+const bdmap = ref(null);
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -131,10 +132,10 @@ const initFormData: DeviceForm = {
   lon: undefined,
   lat: undefined,
   ext1: undefined,
-  ext2: undefined,
-}
-const data = reactive<PageData<DeviceForm, DeviceQuery>>({
-  form: {...initFormData},
+  ext2: undefined
+};
+const data = reactive({
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -145,17 +146,11 @@ const data = reactive<PageData<DeviceForm, DeviceQuery>>({
     lat: undefined,
     ext1: undefined,
     ext2: undefined,
-    params: {
-    }
-  },
-  rules: {
-    id: [
-      { required: true, message: "编号不能为空", trigger: "blur" }
-    ],
+    params: {}
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form } = toRefs(data);
 
 /** 查询设备-摄像机列表 */
 const getList = async () => {
@@ -164,55 +159,89 @@ const getList = async () => {
   deviceList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
-
+};
+const initMap = (center) => {
+  const [lng, lat] = center || [118.879999, 32.016216];
+  const map = new BMapGL.Map('map'); // 创建地图实例
+  const point = new BMapGL.Point(lng, lat); // 创建点坐标
+  map.centerAndZoom(point, 14);
+  map.enableScrollWheelZoom(true);
+  bdmap.value = map;
+  if (center) {
+    drawPoint([lng, lat]);
+  }
+  map.addEventListener('click', function (e) {
+    const { lng, lat } = e.latlng;
+    form.value.lon = lng;
+    form.value.lat = lat;
+    drawPoint([lng, lat]);
+  });
+};
+const drawPoint = (point) => {
+  bdmap.value && bdmap.value.clearOverlays();
+  const [lng, lat] = point;
+  const icon = new BMapGL.Icon(new URL('@/assets/images/monitor.svg', import.meta.url).href, new BMapGL.Size(30, 30));
+  const marker = new BMapGL.Marker(new BMapGL.Point(lng, lat), { icon });
+  bdmap.value.addOverlay(marker);
+};
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 /** 表单重置 */
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
   deviceFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: DeviceVO[]) => {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加设备-摄像机";
-}
+  dialog.title = '添加设备';
+  nextTick(() => {
+    initMap();
+  });
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: DeviceVO) => {
   reset();
-  const _id = row?.id || ids.value[0]
+  const _id = row?.id || ids.value[0];
   const res = await getDevice(_id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改设备-摄像机";
-}
+  dialog.title = '修改设备';
+  nextTick(() => {
+    const { lon, lat } = form.value;
+    if (lon && lat) {
+      initMap([Number(lon), Number(lat)]);
+    } else {
+      initMap(null);
+    }
+  });
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -220,34 +249,33 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateDevice(form.value).finally(() =>  buttonLoading.value = false);
+        await updateDevice(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addDevice(form.value).finally(() =>  buttonLoading.value = false);
+        await addDevice(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: DeviceVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除设备-摄像机编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await proxy?.$modal.confirm('是否确认删除设备？').finally(() => (loading.value = false));
   await delDevice(_ids);
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
   await getList();
-}
-
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download('system/device/export', {
-    ...queryParams.value
-  }, `device_${new Date().getTime()}.xlsx`)
-}
+};
 
 onMounted(() => {
   getList();
 });
 </script>
+<style lang="scss" scoped>
+.map {
+  width: 100%;
+  height: 300px;
+}
+</style>

plus-ui-ts/src/views/index.vue

@@ -288,7 +288,7 @@
     </el-dialog>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import BaseChart from '@/components/BaseChart/index.vue';
 import monitorIcon from '@/assets/images/monitor.svg';
@@ -297,26 +297,13 @@ import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 import { downloadFile } from '@/utils/download.js';
 import { listEvent, generateReport, updateEvent, getEvent } from '@/api/system/event';
+import { listDevice } from '@/api/system/device';
 import { dateFormat } from '@/utils/index';
 import { ElLoading } from 'element-plus';
 import { base64Encoded, base64Decoded } from '@/utils/crypto';
 const { proxy } = getCurrentInstance();
 const bdmap = ref(null);
 const downLoading = ref(false);
-const marks = ref([
-  {
-    longitude: 118.84651017058795,
-    latitude: 32.03286965957209
-  },
-  {
-    longitude: 118.87381865809128,
-    latitude: 32.050866853291296
-  },
-  {
-    longitude: 118.88459832421101,
-    latitude: 32.01094988629638
-  }
-]);
 const { event_level } = toRefs(proxy?.useDict('event_level'));
 const { event_status } = toRefs(proxy?.useDict('event_status'));
 const editorRef = shallowRef();
@@ -345,7 +332,7 @@ const dialog = reactive({
   title: '事件详情',
   loading: null
 });
-const form = ref({});
+const form = ref<any>({});
 const statData = reactive({
   monthCount: undefined,
   monthAlready: undefined,
@@ -449,15 +436,15 @@ const eventList = ref([]);
 const total = ref(0);
 const dialogVisible = ref(false);
 const reportForm = reactive({
-  'year': '',
+  'year': null,
   'seq': 1,
   'title': '',
-  'month': '',
-  'day': '',
+  'month': null,
+  'day': null,
   'content': '',
   'fw': '市委、市政府总值班室',
-  'qf': '朱劲',
-  'sh': '宗仁',
+  'qf': '宗仁',
+  'sh': '朱劲',
   'ps': '',
   'ba': 'KB608',
   'zby': '83194295',
@@ -465,6 +452,7 @@ const reportForm = reactive({
   'type': 'pdf'
 });
 const reportSeq = ref(0);
+const deviceList = ref([]);
 onMounted(() => {
   try {
     const map = new BMapGL.Map('map'); // 创建地图实例
@@ -476,11 +464,11 @@ onMounted(() => {
       const { lng, lat } = e.latlng;
       console.log(e.latlng);
     });
-    showMarks();
   } catch (e) {}
 
   getList();
   getStat();
+  getDeviceList();
 });
 const getList = async () => {
   const { dateRange } = queryParams.value;
@@ -540,7 +528,7 @@ const getStat = async () => {
   statData.not = res.rows.filter((item) => item.status == '2' || item.status === null).length;
   statData.report = res.rows.filter((item) => item.status == '3').length;
 };
-const getTimeRange = (unit = 'day', options = {}) => {
+const getTimeRange = (unit = 'day', options: any = {}) => {
   const now = new Date();
   const { firstDayOfWeek = 1 } = options;
 
@@ -659,6 +647,14 @@ const resetQuery = () => {
   };
   getList();
 };
+const getDeviceList = () => {
+  listDevice().then(({ code, rows }) => {
+    if (code === 200) {
+      deviceList.value = rows;
+      showMarks();
+    }
+  });
+};
 onBeforeUnmount(() => {
   const editor = editorRef.value;
   if (editor == null) return;
@@ -666,12 +662,14 @@ onBeforeUnmount(() => {
 });
 const showMarks = () => {
   bdmap.value.clearOverlays();
-  marks.value.forEach((item) => {
-    const pt = new BMapGL.Point(Number(item.longitude), Number(item.latitude));
-    const icon = new BMapGL.Icon(monitorIcon, new BMapGL.Size(30, 30));
-    const marker = new BMapGL.Marker(pt, { icon });
-    bdmap.value.addOverlay(marker);
-  });
+  deviceList.value
+    .filter((item) => item.lon && item.lat)
+    .forEach((item) => {
+      const pt = new BMapGL.Point(Number(item.lon), Number(item.lat));
+      const icon = new BMapGL.Icon(monitorIcon, new BMapGL.Size(30, 30));
+      const marker = new BMapGL.Marker(pt, { icon });
+      bdmap.value.addOverlay(marker);
+    });
 };
 const showDetails = (row) => {
   getEvent(row.id).then(({ code, data }) => {
@@ -703,7 +701,7 @@ const showDetails = (row) => {
         });
       });
       const { content, ext2 } = form.value;
-      if (content) {
+      if (content && ext2.reportTime) {
         showReport.value = true;
         dealReportData(base64Decoded(content), ext2.reportTime);
       }