riku
2024-09-02 02349238af964e19a46da93e20466a48d755a453
正在实现设备管理模块
已修改5个文件
已删除1个文件
已添加4个文件
190 ■■■■■ 文件已修改
src/api/deviceApi.js 21 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/missionApi.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components.d.ts 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/device/DeviceCreate.vue 补丁 | 查看 | 原始文档 | blame | 历史
src/components/device/DeviceManage.vue 102 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/map/MapScene.vue 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/constant/device-type.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/stores/counter.js 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/stores/device.js 42 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/LoginPage.vue 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/deviceApi.js
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
import { $http } from './index';
/**
 * èµ°èˆªè®¾å¤‡ç›¸å…³æŽ¥å£API
 */
export default {
  fethchDevice({ type, page, pageSize }) {
    let params = `page=${page}&perPage=${pageSize}`;
    params += type ? `&type=${type}` : '';
    return $http.get(`air/device/type?${params}`).then((res) => res.data);
  },
  putNewDevice(device) {
    return $http.post(`air/device/create`, device).then((res) => res.data);
  },
  deleteDevice(deviceCode) {
    let params = `deviceCode=${deviceCode}`;
    return $http.post(`air/device/delete?${params}`).then((res) => res.data);
  }
};
src/api/missionApi.js
@@ -2,7 +2,7 @@
import { Base64 } from 'js-base64';
/**
 *
 * èµ°èˆªä»»åŠ¡ç›¸å…³æŽ¥å£API
 */
export default {
  fethchMission({ type, page, pageSize }) {
src/components.d.ts
@@ -16,6 +16,8 @@
    CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
    DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
    DataTable: typeof import('./components/monitor/DataTable.vue')['default']
    DeviceCreate: typeof import('./components/device/DeviceCreate.vue')['default']
    DeviceManage: typeof import('./components/device/DeviceManage.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCascader: typeof import('element-plus/es')['ElCascader']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
src/components/device/DeviceCreate.vue
src/components/device/DeviceManage.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@
<template>
  <el-button
    type="primary"
    icon="Memo"
    class="el-button-custom p-events-auto"
    @click="dialogVisible = !dialogVisible"
  >
    è®¾å¤‡ç®¡ç†
  </el-button>
  <CardDialog v-model="dialogVisible" title="走航设备管理">
    <el-row class="mission-table">
      <el-col :span="20">
        <el-table
          :data="deviceStore.deviceList"
          table-layout="fixed"
          size="small"
          :show-overflow-tooltip="true"
          border
          height="64vh"
          row-class-name="t-row"
          cell-class-name="t-cell"
          header-row-class-name="t-header-row"
          header-cell-class-name="t-header-cell"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"
          />
          <el-table-column prop="deviceType" label="设备类型" align="center" />
          <el-table-column prop="deviceCode" label="设备编号" align="center" />
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            :formatter="timeFormatter"
          />
          <el-table-column label="管理" width="140" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                class="el-button-custom"
                @click="deleteDevice(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="4" class="flex-col">
        <div>
          <!-- todo è®¾å¤‡åˆ›å»º -->
        </div>
      </el-col>
    </el-row>
  </CardDialog>
  <MessageBox
    v-model="msgBoxVisible"
    :on-confirm="onConfirm"
    title="删除走航任务"
    msg="确认是否删除该走航任务"
    confirmText="删除"
  ></MessageBox>
</template>
<script>
import moment from 'moment';
import deviceApi from '@/api/deviceApi';
import { mapStores } from 'pinia';
import { useDeviceStore } from '@/stores/device';
import { useFetchData } from '@/composables/fetchData';
export default {
  setup() {
    const { loading, fetchData } = useFetchData();
    return { loading, fetchData };
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      msgBoxVisible: false,
      onConfirm: undefined
    };
  },
  computed: {
    ...mapStores(useDeviceStore)
  },
  methods: {
    deleteDevice(row) {
      this.onConfirm = () => {
        this.deviceStore.deleteDevice(row.deviceCode);
      };
      this.msgBoxVisible = true;
    },
    timeFormatter(row, col, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>
src/components/map/MapScene.vue
@@ -7,6 +7,7 @@
        class="el-button-custom p-events-auto"
      >
        åœºæ™¯æ ‡æ³¨
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
    </template>
    <OptionLocation v-model="districtCode"></OptionLocation>
src/constant/device-type.js
@@ -51,7 +51,7 @@
      return v.value == t;
    });
    return [1, 2, 3].map((v) => {
      const label = `${typeStr}设备${v}号`;
      const label = `${typeStr.label}设备${v}号`;
      const value = `${t}000000000${v}`;
      return {
        label: label,
src/stores/counter.js
ÎļþÒÑɾ³ý
src/stores/device.js
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,42 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
import deviceApi from '@/api/deviceApi';
import { useFetchData } from '@/composables/fetchData';
// èµ°èˆªä»»åŠ¡
export const useDeviceStore = defineStore('device', () => {
  const deviceList = ref([]);
  const { loading, fetchData } = useFetchData();
  function fetchDevice(type) {
    return fetchData((page, pageSize) => {
      return deviceApi
        .fethchDevice({ type: type, page, pageSize })
        .then((res) => {
          deviceList.value = res.data;
          return res;
        });
    });
  }
  function deleteDevice(deviceCode) {
    return fetchData(() => {
      return deviceApi.deleteDevice(deviceCode).then((res) => {
        let index = -1;
        for (let i = 0; i < deviceList.value.length; i++) {
          const e = deviceList.value[i];
          if (e.deviceCode == deviceCode) {
            index = i;
            break;
          }
        }
        if (index != -1) {
          deviceList.value.splice(index, 1);
        }
        return res;
      });
    });
  }
  return { deviceList, loading, fetchDevice, deleteDevice };
});
src/views/LoginPage.vue
@@ -73,8 +73,10 @@
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (
            this.formObj.userName == 'jingan' &&
            this.formObj.password == 'jingan123'
            (this.formObj.userName == 'jingan' &&
              this.formObj.password == 'jingan123') ||
            (this.formObj.userName == 'feiyu' &&
              this.formObj.password == 'fyhb123')
          ) {
            this.$router.replace('/index/hmode');
          } else {