优化初始化进入界面时，默认监测因子选项为PM颗粒物等常用因子

riku

2024-11-11 d205764a3ebe073b8302e8faf9345b74ae3350df

优化初始化进入界面时，默认监测因子选项为PM颗粒物等常用因子

 src/assets/mipmap/underway-3.png

 src/components/core/CoreMenu.vue

@@ -93,6 +93,9 @@
      m[index].selected = true;
      this.$router.push(m[index].path);
    }
  },
  mounted() {
    this.navTo(0);
  }
};
</script>

 src/components/map/MapScene.vue

@@ -56,6 +56,14 @@
      sceneMap: new Map()
    };
  },
  watch: {
    // å½“切换区县时，清空所有选项
    districtCode(nV, oV) {
      if (nV != oV) {
        this.handelCheckAllChange(false);
      }
    }
  },
  methods: {
    fetchScene(sceneType) {
      return sceneInfoApi
@@ -84,13 +92,14 @@

      // æ ¹æ®é€‰é¡¹ï¼Œå°†æœªæ‰“开的图层开启
      types.forEach((t) => {
        if (!lableMarkMap.has(t)) {
        const key = this.districtCode + t;
        if (!lableMarkMap.has(key)) {
          this.fetchScene(t).then((res) => {
            const layer = marks.createLabelMarks(sceneIcon(t), res);
            lableMarkMap.set(t, { show: true, layer });
            lableMarkMap.set(key, { show: true, layer });
          });
        } else {
          const m = lableMarkMap.get(t);
          const m = lableMarkMap.get(key);
          if (!m.show) {
            MapUtil.addViews(m.layer);
            m.show = true;
@@ -100,7 +109,7 @@

      // æ ¹æ®é€‰é¡¹ï¼Œå°†å¼€å¯ä¸­çš„未选中图层关闭
      for (const [key, value] of lableMarkMap) {
        if (!types.includes(key)) {
        if (!types.map((t) => this.districtCode + t).includes(key)) {
          if (value.show) {
            MapUtil.removeViews(value.layer);
            value.show = false;

 src/components/mission/MissionManage.vue

@@ -54,14 +54,14 @@
                @click="deleteMission(row)"
                >删除</el-button
              >
              <!-- <el-button
              <el-button
                :loading="row.downloadLoading"
                type="primary"
                size="small"
                class="el-button-custom"
                @click="downloadReport(row)"
                >报告</el-button
              > -->
              >
            </template>
          </el-table-column>
        </el-table>

 src/components/monitor/FactorRadio.vue

@@ -12,7 +12,7 @@

<script>
// ç›‘测因子单选框
import { radioOptions } from '@/constant/radio-options';
import { radioOptions, defaultOptions } from '@/constant/radio-options';
import { TYPE0 } from '@/constant/device-type';

export default {
@@ -26,7 +26,7 @@
  emits: ['change'],
  data() {
    return {
      radio: radioOptions(TYPE0)[0].value
      radio: defaultOptions(TYPE0)
    };
  },
  computed: {

 src/components/scene/SceneSearch.vue

@@ -21,6 +21,7 @@
          :data="sceneStore.sceneList"
          table-layout="fixed"
          size="small"
          height="30vh"
          :show-overflow-tooltip="true"
          border
          row-class-name="t-row"
@@ -28,18 +29,25 @@
          header-row-class-name="t-header-row"
          header-cell-class-name="t-header-cell"
          @row-click="handleRowClick"
          @filter-change="handleFilterChange"
        >
          <el-table-column type="index" label="#" width="25" />
          <el-table-column
            prop="type"
            label="类型"
            width="55"
            width="56"
            column-key="type"
            :filters="sceneTypeFilter"
            :filter-method="filterHandler"
          />
          <el-table-column prop="name" label="名称" />
          <!-- <el-table-column prop="location" label="地址" /> -->
          <!-- <el-table-column prop="districtName" label="区县" align="center" /> -->
          <el-table-column
            prop="districtName"
            label="区县"
            align="center"
            width="54"
          />
          <!-- <el-table-column label="管理" width="70" align="center">
            <template #default="{ row }">
              <el-button
@@ -94,7 +102,8 @@
  data() {
    return {
      dialogVisible: false,
      onConfirm: undefined
      onConfirm: undefined,
      showSceneTypes: []
    };
  },
  computed: {
@@ -108,6 +117,15 @@
        .map((v) => {
          return { text: v.label, value: v.label };
        });
    },
    showSceneList() {
      if (this.showSceneTypes.length == 0) {
        return this.sceneStore.sceneList;
      } else {
        return this.sceneStore.sceneList.filter((v) => {
          return this.showSceneTypes.indexOf(v.type) != -1;
        });
      }
    }
  },
  watch: {
@@ -120,14 +138,20 @@
        }
      }
    },
    'sceneStore.sceneList': {
      handler(nV, oV) {
    // 'sceneStore.sceneList': {
    //   handler(nV, oV) {
    //     if (nV != oV) {
    //       this.dialogVisible = true;
    //       this.drawMarks(nV);
    //     }
    //   },
    //   deep: true
    // },
    showSceneList(nV, oV) {
        if (nV != oV) {
          this.dialogVisible = true;
          this.drawMarks(nV);
        }
      },
      deep: true
    },
    'toolboxStore.sceneSearchStatus': {
      handler(nV) {
@@ -158,6 +182,10 @@
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleFilterChange(newFilters) {
      // console.log(newFilters);
      this.showSceneTypes = newFilters['type'];
    }
  }
};

 src/components/search/OptionDevice.vue

@@ -18,7 +18,7 @@
</template>

<script>
import { deviceList } from '@/constant/device-type';
// import { deviceList } from '@/constant/device-type';
import { mapStores } from 'pinia';
import { useDeviceStore } from '@/stores/device';


 src/components/search/OptionLocation.vue

@@ -39,7 +39,35 @@
      {
        label: '长宁区',
        value: '310105'
      },
      {
        label: '静安区',
        value: '310106'
      },
      {
        label: '徐汇区',
        value: '310104'
      },
      {
        label: '金山区',
        value: '310116'
      }
      // {
      //   label: '普陀区',
      //   value: '310107'
      // },
      // {
      //   label: '闵行区',
      //   value: '310112'
      // },
      // {
      //   label: '宝山区',
      //   value: '310113'
      // },
      // {
      //   label: '嘉定区',
      //   value: '310114'
      // },
    ];

    if (import.meta.env.VITE_DATA_MODE == 'jingan') {

 src/constant/checkbox-options.js

@@ -1,11 +1,16 @@
import { TYPE0, TYPE1, TYPE2, TYPE4 } from '@/constant/device-type';
import {
  option1,
  default1,
  option2,
  option3,
  default3,
  option4
} from '@/constant/checkbox-options/options';
import { option1 as option1Jingan } from '@/constant/checkbox-options/options-jingan';
import {
  option1 as option1Jingan,
  default1 as default1Jingan
} from '@/constant/checkbox-options/options-jingan';

// ç›‘测因子单选框选项
function checkboxOptions(deviceType) {
@@ -32,6 +37,30 @@
  }
}

function defaultOptions(deviceType) {
  if (import.meta.env.VITE_DATA_MODE == 'jingan') {
    switch (deviceType) {
      case TYPE0:
        return default1Jingan;
      default:
        return undefined;
    }
  } else {
    switch (deviceType) {
      case TYPE0:
        return default1;
      case TYPE1:
        return default3;
      case TYPE2:
        return undefined;
      case TYPE4:
        return undefined;
      default:
        return undefined;
    }
  }
}

/**
 * é»˜è®¤é€‰é¡¹
 * @param {*} deviceType è®¾å¤‡ç±»åž‹
@@ -39,6 +68,14 @@
 * @returns
 */
function defaultFactorTypes(deviceType, count = 3) {
  const defaultOpt = defaultOptions(deviceType);
  if (defaultOpt) {
    if (defaultOpt.length > count) {
      return defaultOpt.slice(0, count);
    } else {
      return defaultOpt;
    }
  } else {
  const list = checkboxOptions(deviceType);
  if (list.length > count) {
    return list.slice(0, count).map((v) => v.value);
@@ -46,5 +83,6 @@
    return list.map((v) => v.value);
  }
}
}

export { checkboxOptions, defaultFactorTypes };

 src/constant/checkbox-options/options-jingan.js

@@ -49,3 +49,5 @@
    value: '17'
  }
];

export const default1 = [option1[3].value, option1[4].value, option1[0].value];

 src/constant/checkbox-options/options.js

@@ -58,18 +58,21 @@
    label: '风速',
    name: 'WIND_SPEED',
    value: '16'
  },
  }
  // {
  //   label: '风向',
  //   name: 'WIND_DIRECTION',
  //   value: '17'
  // },
  {
    label: '高度',
    name: 'HEIGHT',
    value: '18'
  }
  // {
  //   label: '高度',
  //   name: 'HEIGHT',
  //   value: '18'
  // }
];

// é»˜è®¤é€‰é¡¹
const default1 = [option1[5].value, option1[6].value, option1[7].value];

const option2 = [
  {
@@ -144,13 +147,21 @@
    label: '风速',
    name: 'WIND_SPEED',
    value: '16'
  }
  },
  // {
  //   label: '风向',
  //   name: 'WIND_DIRECTION',
  //   value: '17'
  // }
  // },
  {
    label: '高度',
    name: 'HEIGHT',
    value: '18'
  }
];

// é»˜è®¤é€‰é¡¹
const default3 = [option3[5].value, option3[6].value, option3[7].value];

const option4 = [
  {
@@ -170,4 +181,4 @@
  }
];

export { option1, option2, option3, option4 };
export { option1, default1, option2, option3, default3, option4 };

 src/constant/device-type.js

@@ -66,7 +66,7 @@
}

function typeName(type) {
  return typeList().find((v) => (v.value = type)).label;
  return typeList().find((v) => v.value == type).label;
}

export { TYPE0, TYPE1, TYPE2, TYPE3, TYPE4, typeList, typeName, deviceList };

 src/constant/radio-options.js

@@ -1,6 +1,14 @@
import { TYPE0, TYPE1, TYPE2 } from '@/constant/device-type';
import { option1, option2 } from '@/constant/radio-options/options';
import { option1 as option1Jingan } from '@/constant/radio-options/options-jingan';
import {
  option1,
  default1,
  option2,
  default2
} from '@/constant/radio-options/options';
import {
  option1 as option1Jingan,
  default1 as default1Jingan
} from '@/constant/radio-options/options-jingan';

// ç›‘测因子单选框选项
function radioOptions(deviceType) {
@@ -21,74 +29,22 @@
  }
}

// const option1 = [
//   {
//     label: 'NO2',
//     name: 'NO2',
//     value: '1'
//   },
//   {
//     label: 'CO',
//     name: 'CO',
//     value: '2'
//   },
//   {
//     label: 'H2S',
//     name: 'H2S',
//     value: '3'
//   },
//   {
//     label: 'SO2',
//     name: 'SO2',
//     value: '4'
//   },
//   {
//     label: 'O3',
//     name: 'O3',
//     value: '5'
//   },
//   {
//     label: 'PM2.5',
//     name: 'PM25',
//     value: '6'
//   },
//   {
//     label: 'PM10',
//     name: 'PM10',
//     value: '7'
//   },
//   {
//     label: 'TVOC',
//     name: 'VOC',
//     value: '10'
//   }
// ];
function defaultOptions(deviceType) {
  if (import.meta.env.VITE_DATA_MODE == 'jingan') {
    if (TYPE0 == deviceType) {
      return default1Jingan;
    } else {
      return undefined;
    }
  } else {
    if ([TYPE0, TYPE1].includes(deviceType)) {
      return default1;
    } else if (deviceType == TYPE2) {
      return default2;
    } else {
      return undefined;
    }
  }
}

// const option2 = [
//   {
//     label: '温度',
//     name: 'TMP',
//     value: '1'
//   },
//   {
//     label: '电导率',
//     name: 'spC',
//     value: '2'
//   },
//   {
//     label: '浊度',
//     name: 'tur',
//     value: '3'
//   },
//   {
//     label: '溶解氧',
//     name: 'DO',
//     value: '4'
//   },
//   {
//     label: 'PH',
//     name: 'PH',
//     value: '5'
//   }
// ];
export { radioOptions };
export { radioOptions, defaultOptions };

 src/constant/radio-options/options-jingan.js

@@ -29,3 +29,6 @@
    value: '7'
  }
];

// é»˜è®¤é€‰é¡¹ PM2.5
export const default1 = option1[3].value;

 src/constant/radio-options/options.js

@@ -45,6 +45,9 @@
  }
];

// é»˜è®¤é€‰é¡¹ PM2.5
export const default1 = option1[5].value;

export const option2 = [
  {
    label: '温度',
@@ -72,3 +75,6 @@
    value: '5'
  }
];

// é»˜è®¤é€‰é¡¹ æ¸©åº¦
export const default2 = option2[0].value;

 src/stores/device.js

@@ -21,7 +21,9 @@
      return deviceApi
        .fethchDevice({ type: type, page, pageSize })
        .then((res) => {
          deviceList.value = res.data;
          deviceList.value = res.data.sort((a, b) => {
            return a.deviceCode < b.deviceCode ? -1 : 1;
          });
          return res;
        });
    });

 src/views/LoginPage_Backup.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,204 @@
<template>
  <div class="background">
    <div class="title-content">
      é£žç¾½å¤§æ°”环境走航监测污染溯源报告智能生成系统
    </div>

    <div class="flexbox flex-space-around">
      <div class="input-box flexbox">
        <div class="flexbox-col align-items" style="margin: auto">
          <div class="flexbox-col input-content flex-space-between">
            <el-form
              :model="formObj"
              ref="formRef"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input
                  size="default"
                  v-model="formObj.userName"
                  placeholder="用户名"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  size="default"
                  type="password"
                  show-password
                  v-model="formObj.password"
                  placeholder="密码"
                  style="width: 200px"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="btn-login" @click="login">登录</div>
        </div>
      </div>

      <img :src="underwayPng" alt="走航监测" class="img-1" />
    </div>
  </div>
</template>

<script>
import underwayPng3 from '@/assets/mipmap/underway-3.png';
import underwayPng2 from '@/assets/mipmap/underway-2.png';
import underwayPng from '@/assets/mipmap/underway.png';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      formObj: {},
      rules: {
        userName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    underwayPng() {
      if (import.meta.env.VITE_DATA_MODE == 'jingan') {
        return underwayPng2;
      } else {
        return underwayPng3;
      }
    }
  },
  methods: {
    login() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (
            (this.formObj.userName == 'jingan' &&
              this.formObj.password == 'jingan123') ||
            (this.formObj.userName == 'feiyu' &&
              this.formObj.password == 'fyhb123')
          ) {
            this.$router.replace('/index/hmode');
          } else {
            ElMessage({
              message: '用户名或密码错误',
              type: 'error'
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.background {
  background-color: #002378;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 768px;
  min-width: 1366px;
}

.title-content {
  /* position: absolute; */
  width: 100%;
  height: 200px;
  padding: 3vh 0 0 0;
  /* top: 80px;
    left: 0;
    right: 0; */
  color: white;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  background-image: url('@/assets/mipmap/title_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.img-1 {
  min-height: 500px;
  height: 60vh;
  /* margin-left: 6vw; */
}

.input-box {
  width: 400px;
  height: 420px;
  /* background-color: aquamarine; */
  background-image: url('@/assets/mipmap/border.png');
  background-size: 100% 100%;
  color: white;
}

.input-content {
}

.input-content .text-box {
  width: 220px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-login {
  margin-top: 20px;
  border-radius: 6px;
  padding: 8px 60px;
  box-shadow: 10px 10px 10px rgba(39, 39, 39, 0.473);
  background: -moz-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -ms-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -o-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -webkit-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  cursor: pointer;
}
</style>

 src/views/historymode/HistoryMode.vue

@@ -56,7 +56,7 @@
import { useFetchData } from '@/composables/fetchData';
import moment from 'moment';
import { TYPE0 } from '@/constant/device-type';
import { radioOptions } from '@/constant/radio-options';
import { defaultOptions } from '@/constant/radio-options';
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';
@@ -79,7 +79,7 @@
      // ç›‘测设备编号
      deviceCode: '',
      // ç›‘测因子的类型编号
      factorType: radioOptions(TYPE0)[0].value,
      factorType: defaultOptions(TYPE0),
      // ç›‘测数据
      factorDatas: new FactorDatas(),
      // å†³å®šç»˜åˆ¶3D图形时是否与原图像合并

 src/views/realtimemode/RealtimeMode.vue

@@ -28,7 +28,7 @@
import moment from 'moment';
import { useFetchData } from '@/composables/fetchData';
import { TYPE0 } from '@/constant/device-type';
import { radioOptions } from '@/constant/radio-options';
import { defaultOptions } from '@/constant/radio-options';
import { FactorDatas } from '@/model/FactorDatas';
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
@@ -55,7 +55,7 @@
      deviceType: TYPE0,
      deviceCode: '',
      // ç›‘测因子的类型编号
      factorType: radioOptions(TYPE0)[0].value,
      factorType: defaultOptions(TYPE0),
      // æ–°èŽ·å–的监测数据
      factorDatas: new FactorDatas(),
      // å…¨éƒ¨ç›‘测数据

 src/views/realtimemode/component/DeviceChange.vue

@@ -33,14 +33,18 @@
    }
  },
  watch: {
    // formSearch(nV, oV) {
    //   if (nV != oV) {
    //     this.handleChange(nV[0].value);
    //   }
    // }
    // å½“设备编号首次从后端获取时，触发通知事件
    ['formSearch.deviceCode'](nV, oV) {
      if (oV == undefined && nV != oV) {
        this.handleClick();
      }
    }
  },
  mounted() {
    this.$emit('change', this.formSearch);
    // å½“设备编号已经从后端获取完成时，直接触发通知事件
    if (this.formSearch.deviceCode) {
      this.handleClick();
    }
  }
};
</script>