新增选项组件，修改组合式函数fetchData

riku

2023-05-19 c9571c465c756deedbfe424b5eab2d7591119f77

新增选项组件，修改组合式函数fetchData

 src/components.d.ts

@@ -10,6 +10,7 @@
    BaseContentLayout: typeof import('./components/core/BaseContentLayout.vue')['default']
    BasePanelLayout: typeof import('./components/core/BasePanelLayout.vue')['default']
    Content: typeof import('./components/core/Content.vue')['default']
    copy: typeof import('./components/search-option/OptionScene copy.vue')['default']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
    ElBacktop: typeof import('element-plus/es')['ElBacktop']
@@ -60,10 +61,16 @@
    Footer: typeof import('./components/core/Footer.vue')['default']
    FormCol: typeof import('./components/layout/FormCol.vue')['default']
    Header: typeof import('./components/core/Header.vue')['default']
    Location: typeof import('./components/search-option/Location.vue')['default']
    LocationOption: typeof import('./components/search-option/LocationOption.vue')['default']
    MenuItems: typeof import('./components/core/MenuItems.vue')['default']
    OptionLocation: typeof import('./components/search-option/OptionLocation.vue')['default']
    OptionOnlineStatus: typeof import('./components/search-option/OptionOnlineStatus.vue')['default']
    OptionScene: typeof import('./components/search-option/OptionScene.vue')['default']
    ProblemCard: typeof import('./components/ProblemCard.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    SceneOption: typeof import('./components/search-option/SceneOption.vue')['default']
    SearchBar: typeof import('./components/SearchBar.vue')['default']
    SideList: typeof import('./components/SideList.vue')['default']
    SiderMenu: typeof import('./components/core/SiderMenu.vue')['default']

 src/components/SearchBar.vue

@@ -38,14 +38,14 @@

<script>
import taskApi from '@/api/fysp/taskApi';
import { enumScene_2NA } from "@/enum/scene";
import { enumScene } from "@/enum/scene";

export default {
  emits: ['onSubmit'],
  data() {
    return {
      topTasks: [],
      sceneTypes: enumScene_2NA(),
      sceneTypes: enumScene(2, false),
      formSearch: {
        topTaskId: '',
        sceneTypeId: '',

 src/components/search-option/OptionLocation.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,61 @@
<template>
  <el-cascader
    v-model="selectedOptions"
    :options="locations"
    placeholder="placeholder"
    :props="props"
    style="width: 280px"
  />
</template>

<script>
import { enumLocation } from '@/enum/location';

export default {
  props: {
    // æ˜¯å¦åœ¨é¦–选项处添加“全部”选项
    allOption: {
      type: Boolean,
      default: true,
    },
    // æŸ¥è¯¢çš„行政级别，取值1，2，3，4
    level: {
      type: Number,
      default: 4,
    },
    // ç»“果返回数组
    value: Array,
  },
  emits: ['update:value'],
  data() {
    return {
      locations: enumLocation(this.allOption, this.level),
      selectedOptions: [],
      props: {
        checkStrictly: true,
      },
    };
  },
  computed: {
    placeholder() {
      const list = '省/市/区/镇'.split('/');
      const p = [];
      for (let i = 0; i < this.level; i++) {
        p.push(list[i]);
      }
      return p;
    },
  },
  watch: {
    selectedOptions: {
      handler(val) {
        this.$emit('update:value', val);
      },
      deep: true,
    },
  },
  mounted() {
    this.selectedOptions = [this.locations[0].value];
  },
};
</script>

 src/components/search-option/OptionOnlineStatus.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
<template>
  <el-select
    v-model="selectedOptions"
    placeholder="上线状态"
    style="width: 75px"
  >
    <el-option
      v-for="s in onlineStatus"
      :key="s.value"
      :label="s.label"
      :value="s"
    />
  </el-select>
</template>

<script>
import { enumOnlineStatus } from '@/enum/onlineStatus';

export default {
  props: {
    // æ˜¯å¦åœ¨é¦–选项处添加“全部”选项
    allOption: {
      type: Boolean,
      default: true,
    },
    // è¿”回结果
    value: Object,
  },
  emits: ['update:value'],
  data() {
    return {
      onlineStatus: enumOnlineStatus(),
      selectedOptions: {},
    };
  },
  watch: {
    selectedOptions: {
      handler(val) {
        this.$emit('update:value', val);
      },
      deep: true,
    },
  },
  mounted() {
    this.selectedOptions = this.onlineStatus[0];
  },
};
</script>

 src/components/search-option/OptionScene.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
<template>
  <el-select
    v-model="selectedOptions"
    placeholder="场景类型"
    style="width: 150px"
  >
    <el-option
      v-for="s in sceneTypes"
      :key="s.value"
      :label="s.label"
      :value="s"
    />
  </el-select>
</template>

<script>
import { enumScene } from '@/enum/scene';

export default {
  props: {
    // æ˜¯å¦åœ¨é¦–选项处添加“全部”选项
    allOption: {
      type: Boolean,
      default: true,
    },
    // 1:飞羽环境系统；2：飞羽监管系统；
    type: {
      type: Number,
      default: 1,
    },
    // è¿”回结果
    value: Object,
  },
  emits: ['update:value'],
  data() {
    return {
      sceneTypes: enumScene(this.type, this.allOption),
      selectedOptions: {},
    };
  },
  watch: {
    selectedOptions: {
      handler(val) {
        this.$emit('update:value', val);
      },
      deep: true,
    },
  },
  mounted() {
    this.selectedOptions = this.sceneTypes[0];
  },
};
</script>

 src/composables/fetchData.js

@@ -23,8 +23,22 @@

  // æ•°æ®èŽ·å–
  function fetchData() {
    fetch(currentPage, pageSize).then((res) => {
    loadStatus.value = 1;
    fetch(currentPage.value, pageSize.value)
      .then((pageInfo) => {
        currentPage.value = pageInfo.currentPage;
        totalPage.value = pageInfo.totalPage;
        total.value = pageInfo.total;
      
        loadStatus.value = 0;
      })
      .catch(() => {
        loadStatus.value = 3;
      })
      .finally(() => {
        loadStatus.value = 2;
    });
  }

  return {currentPage, totalPage, pageSize, total, loadStatus, fetchData}
}

 src/enum/location.js

@@ -1,6 +1,20 @@
// è¡Œæ”¿åŒºåˆ’
/**
 * èŽ·å–行政区划
 * @param {Boolean} allOption æ˜¯å¦åœ¨å¤´éƒ¨æ·»åŠ â€œå…¨éƒ¨â€é€‰é¡¹
 * @param {Number} level èŽ·å–的分类深度，范围 1 - 4
 * @returns
 */
function enumLocation(allOption = true, level = 4) {
  const l = _enumLocation();
  if (!allOption) {
    l.shift();
  }
  _deleteByLevel(l, level, 1);

function enumLocation() {
  return l;
}

function _enumLocation() {
  return [
    {
      label: '全部',
@@ -127,10 +141,24 @@
    },
  ];
}
function enumLocationNA() {
  const l = enumLocation();
  l.shift();
  return l;

// æŒ‰ç…§éœ€æ±‚的定位精度返回对应数据
function _deleteByLevel(locations, level, step) {
  if (step == level) {
    locations.forEach((l) => {
      if (l.children) {
        l.children = undefined;
      }
    });
    return;
  } else {
    step++;
    locations.forEach((l) => {
      if (l.children) {
        _deleteByLevel(l.children, level, step);
      }
    });
  }
}

export { enumLocation, enumLocationNA };
export { enumLocation };

 src/enum/onlineStatus.js

@@ -1,6 +1,18 @@
// ä¸Šä¸‹çº¿çŠ¶æ€
/**
 * ä¸Šä¸‹çº¿çŠ¶æ€
 * @param {Boolean} allOption æ˜¯å¦åœ¨å¤´éƒ¨æ·»åŠ â€œå…¨éƒ¨â€é€‰é¡¹
 * @returns
 */
function enumOnlineStatus(allOption = true) {
  const l = _enumOnlineStatus();
  if (!allOption) {
    l.shift();
  }

function enumOnlineStatus() {
  return l;
}

function _enumOnlineStatus() {
  return [
    {
      label: '全部',
@@ -17,10 +29,4 @@
  ];
}

function enumOnlineStatusNA() {
  const l = enumOnlineStatus();
  l.shift();
  return l;
}

export { enumOnlineStatus, enumOnlineStatusNA };
export { enumOnlineStatus };

 src/enum/scene.js

@@ -1,7 +1,38 @@
// åœºæ™¯ç±»åž‹æžšä¸¾
/**
 * åœºæ™¯ç±»åž‹æžšä¸¾
 * @param {Number} type 1:飞羽环境系统；2：飞羽监管系统；
 * @param {Boolean} allOption æ˜¯å¦åœ¨å¤´éƒ¨æ·»åŠ â€œå…¨éƒ¨â€é€‰é¡¹
 */
function enumScene(type, allOption = true) {
  let l;
  switch (type) {
    case 1:
      l = _enumScene_1();
      break;
    case 2:
      l = _enumScene_2();
      break;
    default:
      l = _enumScene_1();
      break;
  }
  if (!allOption) {
    l.shift();
  }

  return l;
}

function getSceneName(value, type = 1) {
  enumScene(type).find((v) => {
    if (v.value == value) {
      return v;
    }
  });
}

// é£žç¾½çŽ¯å¢ƒç³»ç»Ÿ
function enumScene_1() {
function _enumScene_1() {
  return [
    {
      label: '全部',
@@ -37,21 +68,9 @@
    },
  ];
}
function enumScene_1NA() {
  const l = enumScene_1();
  l.shift();
  return l;
}
function getSceneName_1(value) {
  enumScene_1().find((v) => {
    if (v.value == value) {
      return v;
    }
  });
}

// é£žç¾½ç›‘管系统
function enumScene_2() {
function _enumScene_2() {
  return [
    {
      label: '全部',
@@ -95,16 +114,5 @@
    },
  ];
}
function enumScene_2NA() {
  const l = enumScene_2();
  l.shift();
  return l;
}

export {
  enumScene_1,
  enumScene_1NA,
  getSceneName_1,
  enumScene_2,
  enumScene_2NA,
};
export { enumScene, getSceneName };

 src/test.js

@@ -1,26 +1,17 @@
const list = [
  [310104501,    '漕河泾新兴技术开发区'],
  [310104004,    '湖南路街道'],
  [310104003,    '天平路街道'],
  [310104012,    '虹梅路街道'],
  [310104008,    '枫林路街道'],
  [310104007,    '斜土路街道'],
  [310104010,    '长桥街道'],
  [310104011,    '田林街道'],
  [310104013,    '康健新村街道'],
  [310104014,    '徐家汇街道'],
  [310104015,    '凌云路街道'],
  [310104016,    '龙华街道'],
  [310104017,    '漕河泾街道'],
  [310104103,    '华泾镇'],
];
const shape = {
  radius: 9,
  d() {
    return this.radius * 2;
  },
  p: () => 2 * Math.PI * this.radius,
};

const result = [];
list.forEach((l) => {
  result.push({
    label: l[1],
    value: l[0] + '',
  });
});
console.log(shape.d());
console.log(shape.p());

console.log(result);
const str = 'abc';
if (str[0] >= 'a' && str[0] <= 'z') {
  let a = parseInt(str[0]);
  a -= 32;
  console.log(a);
}

 src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue

@@ -103,8 +103,8 @@

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { enumScene_2NA } from '@/enum/scene';
import { enumLocationNA } from '@/enum/location';
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import sceneApi from '@/api/fysp/sceneApi';
import { useFormConfirm } from '@/composables/formConfirm';

@@ -126,8 +126,8 @@
  },
});
const loading = ref(false);
const sceneTypes = reactive(enumScene_2NA());
const locations = reactive(enumLocationNA());
const sceneTypes = reactive(enumScene(2, false));
const locations = reactive(enumLocation(false));
const cascaderProps = reactive({
  checkStrictly: true,
});

 src/views/baseinfo/fysp/scene/CompSceneDeviceInfo.vue

@@ -76,7 +76,7 @@
<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { useFormConfirm } from '@/composables/formConfirm';
import { enumOnlineStatusNA } from '@/enum/onlineStatus';
import { enumOnlineStatus } from '@/enum/onlineStatus';
import sceneApi from '@/api/fysp/sceneApi';

const props = defineProps({
@@ -97,7 +97,7 @@
  },
});
const loading = ref(false);
const onlineStatus = reactive(enumOnlineStatusNA());
const onlineStatus = reactive(enumOnlineStatus(false));
const rules = reactive({
  sdNum: [
    {

 src/views/baseinfo/fysp/scene/SceneInfo.vue

@@ -2,16 +2,26 @@
  <el-row ref="searchRef">
    <el-form :inline="true" :model="formSearch">
      <el-form-item label="省/市/区/镇" prop="_locations">
        <el-cascader
        <!-- <el-cascader
          v-model="formSearch._locations"
          :options="locations"
          placeholder="省/市/区/镇"
          :props="props"
          style="width: 280px"
        />
        /> -->
        <OptionLocation
          :allOption="true"
          :level="4"
          v-model:value="formSearch._locations"
        ></OptionLocation>
      </el-form-item>
      <el-form-item label="场景类型" prop="scensetypeid">
        <el-select
      <el-form-item label="场景类型" prop="scensetype">
        <OptionScene
          :allOption="true"
          :type="2"
          v-model:value="formSearch.scensetype"
        ></OptionScene>
        <!-- <el-select
          v-model="formSearch.scensetypeid"
          placeholder="场景类型"
          style="width: 150px"
@@ -22,10 +32,14 @@
            :label="s.label"
            :value="s.value"
          />
        </el-select>
        </el-select> -->
      </el-form-item>
      <el-form-item label="上线状态" prop="online">
        <el-select
        <OptionOnlineStatus
          :allOption="true"
          v-model:value="formSearch.online"
        ></OptionOnlineStatus>
        <!-- <el-select
          v-model="formSearch.online"
          placeholder="上线状态"
          style="width: 75px"
@@ -36,7 +50,7 @@
            :label="s.label"
            :value="s.value"
          />
        </el-select>
        </el-select> -->
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="onSearch"
@@ -106,9 +120,6 @@
</template>

<script>
import { enumScene_2 } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import { enumOnlineStatus } from '@/enum/onlineStatus';
import sceneApi from '@/api/fysp/sceneApi';
import { useLoadingStore } from '@/stores/loadingStore';
import { mapStores } from 'pinia';
@@ -117,20 +128,10 @@
export default {
  data() {
    return {
      locations: enumLocation(),
      sceneTypes: enumScene_2(),
      onlineStatus: enumOnlineStatus(),
      formSearch: {
        _locations: [],
        provincecode: '',
        citycode: '',
        districtcode: '',
        towncode: '',
        scensetypeid: '',
        online: '',
      },
      props: {
        checkStrictly: true,
        scensetype: {},
        online: {},
      },

      tableData: [],
@@ -177,10 +178,10 @@
        ? (area.towncode = f._locations[3][0])
        : (area.towncode = null);
      // åœºæ™¯ç±»åž‹
      area.scensetypeid = f.scensetypeid;
      area.scensetypeid = f.scensetype.value;
      if (area.scensetypeid == '0') area.scensetypeid = null;
      // ä¸Šä¸‹çº¿çŠ¶æ€
      area.online = f.online;
      area.online = f.online.value;

      sceneApi
        .searchScene(area, this.currentPage, this.pageSize)
@@ -234,9 +235,6 @@
    },
  },
  mounted() {
    this.formSearch.scensetypeid = this.sceneTypes[0].value;
    this.formSearch._locations = [this.locations[0].value];
    this.formSearch.online = this.onlineStatus[0].value;
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  },

 src/views/baseinfo/fysp/user/UserInfo.vue

@@ -29,14 +29,14 @@
</template>

<script>
import { enumScene_2 } from '@/enum/scene';
import { enumScene } from '@/enum/scene';
import { enumDistrict } from '@/enum/district';

export default {
  data() {
    return {
      districts: enumDistrict(),
      sceneTypes: enumScene_2(),
      sceneTypes: enumScene(2),
      formSearch: {
        district: '',
        sceneTypeId: '',

 src/views/fytz/monitor-data/DustData.vue

@@ -106,14 +106,14 @@
</template>

<script>
import { enumScene_1 } from '@/enum/scene';
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';

export default {
  data() {
    return {
      locations: enumLocation(),
      sceneTypes: enumScene_1(),
      sceneTypes: enumScene(1),
      formSearch: {
        _locations: [],
        provincecode: '',

 src/views/fytz/user/UserInfo.vue

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

<script>
import { enumScene_1 } from '@/enum/scene';
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import { enumOnlineStatus } from '@/enum/onlineStatus';
import userApi from '@/api/fytz/userApi';
@@ -149,7 +149,7 @@
  data() {
    return {
      locations: enumLocation(),
      sceneTypes: enumScene_1(),
      sceneTypes: enumScene(1),
      onlineStatus: enumOnlineStatus(),
      formSearch: {
        _locations: [],

 src/views/fytz/user/components/CompUserInfo.vue

@@ -113,8 +113,8 @@
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { useFormConfirm } from '@/composables/formConfirm';
import { enumUserNA } from '@/enum/user';
import { enumScene_1NA, getSceneName_1 } from '@/enum/scene';
import { enumLocationNA } from '@/enum/location';
import { enumScene, getSceneName } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import userApi from '@/api/fytz/userApi';

const props = defineProps({
@@ -146,8 +146,8 @@
});

const userTypes = reactive(enumUserNA());
const sceneTypes = reactive(enumScene_1NA());
const locations = enumLocationNA();
const sceneTypes = reactive(enumScene(1, false));
const locations = enumLocation(false);
const locationsProps = reactive({
  checkStrictly: true,
});
@@ -206,7 +206,7 @@
  };

  s._scenetype = {
    label: getSceneName_1(s.extension2),
    label: getSceneName(s.extension2, 1),
    value: s.extension2,
  };


 src/views/notice/CompNoticeAdd.vue

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

<script>
import { enumScene_1 } from '@/enum/scene';
import { enumScene } from '@/enum/scene';
import { enumDistrict } from '@/enum/district';
import { enumNotice } from '@/enum/notice';

@@ -74,7 +74,7 @@
        // expandTrigger: 'hover'
      },
      districts: enumDistrict(),
      sceneTypes: enumScene_1(),
      sceneTypes: enumScene(1),
      noticeTypes: enumNotice(),
      form: {
        //发布者id

 src/views/notice/NoticeManage.vue

@@ -140,7 +140,7 @@
<script>
import noticeApi from '@/api/fytz/noticeApi';
import { useDateFormat } from '@vueuse/core';
import { enumScene_1 } from '@/enum/scene';
import { enumScene } from '@/enum/scene';
import { enumDistrict } from '@/enum/district';
import { enumNotice } from '@/enum/notice';

@@ -156,7 +156,7 @@
      loading: false,
      drawer: false,
      districts: enumDistrict(),
      sceneTypes: enumScene_1(),
      sceneTypes: enumScene(1),
      noticeTypes: enumNotice(),
      formSearch: {
        district: '',