refactor: 重构代码前后顺序

罗广辉

2025-03-31 1652dae4658228642748ff69ee0fdaa3dfafdfe8

refactor: 重构代码前后顺序

 src/api/home/index.js

@@ -24,13 +24,14 @@
    data
  });
};
// 事件概况
// 事件概况总数
export const getJobEventTotal = () => {
  return request({
    url: '/drone-device-core/jobEvent/total',
    method: 'get',
  });
};
// 事件概况分类数
export const getJobEventByStatus = (data) => {
  return request({
    url: '/drone-device-core/jobEvent/eventByStatus',

 src/views/Home/SearchBox.vue

@@ -1,3 +1,30 @@
<template>
  <div class="searchBox">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <el-select v-model="value2" placeholder="请选择查询">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>
<script setup>
const input3 = ref('');

@@ -26,33 +53,6 @@
  },
];
</script>
<template>
  <div class="searchBox">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <el-select v-model="value2" placeholder="请选择查询">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>
<style scoped lang="scss">
.searchBox {
  width: 420px;

 src/views/Home/components/HomeRight/Synergy.vue

@@ -1,3 +1,14 @@
<template>
  <CommonTitle title="降本增效" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="synergy">
      <div class="synergy-item" v-for="item in list">
        <div class="title">{{ item.name }}</div>
        <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { pxToRem } from '@/utils/rem';
@@ -22,17 +33,6 @@
  getStatisticalData();
});
</script>
<template>
  <CommonTitle title="降本增效" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="synergy">
      <div class="synergy-item" v-for="item in list">
        <div class="title">{{ item.name }}</div>
        <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.synergy {

 src/views/Home/components/HomeRight/TaskAchievements.vue

@@ -1,3 +1,38 @@
<template>
  <CommonTitle title="任务成果" @details="detailsFun" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="taskAchievements">
      <div class="rawData">
        <div class="bigTitle">原始<br />数据</div>
        <div class="rawDataRight">
          <img src="../../../../assets/images/home/homeRight/rowData.png" alt="" />
          <div class="rawDataContent">
            <div>
              <div class="title">照片总数(张)</div>
              <div class="value">{{ photoNum }}</div>
            </div>
            <div>
              <div class="title">视频总数(个)</div>
              <div class="value">{{ videoNum }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="processingData">
        <div class="bigTitle">处理<br />数据</div>
        <div class="data-right">
          <div v-for="item in list">
            <img :src="item.img" alt="" />
            <div class="content">
              <div class="title">{{ item.name }}</div>
              <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { pxToRem } from '@/utils/rem';
@@ -38,41 +73,6 @@
  getStatisticalData();
});
</script>
<template>
  <CommonTitle title="任务成果" @details="detailsFun" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="taskAchievements">
      <div class="rawData">
        <div class="bigTitle">原始<br />数据</div>
        <div class="rawDataRight">
          <img src="../../../../assets/images/home/homeRight/rowData.png" alt="" />
          <div class="rawDataContent">
            <div>
              <div class="title">照片总数(张)</div>
              <div class="value">{{ photoNum }}</div>
            </div>
            <div>
              <div class="title">视频总数(个)</div>
              <div class="value">{{ videoNum }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="processingData">
        <div class="bigTitle">处理<br />数据</div>
        <div class="data-right">
          <div v-for="item in list">
            <img :src="item.img" alt="" />
            <div class="content">
              <div class="title">{{ item.name }}</div>
              <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.taskAchievements {

 src/views/Home/useEventOperate/EventPopUpBox.vue

@@ -1,16 +1,3 @@
<script setup>
import { Close } from '@element-plus/icons-vue';

const list = [
  { name: '执行中', value: '1', color: '#FFA768' },
  { name: '在线', value: '20', color: '#8EFFAC' },
  { name: '离线', value: '14', color: '#FFFFFF' },
  { name: '异常', value: '25', color: '#FF6262' },
];

const props = defineProps(['data', 'removeLabel']);
</script>

<template>
  <div class="mapPopUpBox">
    <div class="title">
@@ -34,6 +21,18 @@
    </div>
  </div>
</template>
<script setup>
import { Close } from '@element-plus/icons-vue';

const list = [
  { name: '执行中', value: '1', color: '#FFA768' },
  { name: '在线', value: '20', color: '#8EFFAC' },
  { name: '离线', value: '14', color: '#FFFFFF' },
  { name: '异常', value: '25', color: '#FF6262' },
];

const props = defineProps(['data', 'removeLabel']);
</script>

<style scoped lang="scss">
.mapPopUpBox {

 src/views/Home/useUavHome/MapPopUpBox.vue

@@ -1,16 +1,3 @@
<script setup>
import { Close } from '@element-plus/icons-vue';

const list = [
  { name: '执行中', value: '1', color: '#FFA768' },
  { name: '在线', value: '20', color: '#8EFFAC' },
  { name: '离线', value: '14', color: '#FFFFFF' },
  { name: '异常', value: '25', color: '#FF6262' },
];

const props = defineProps(['data', 'removeLabel']);
</script>

<template>
  <div class="mapPopUpBox">
    <div class="header">
@@ -41,7 +28,18 @@
    </div>
  </div>
</template>
<script setup>
import { Close } from '@element-plus/icons-vue';

const list = [
  { name: '执行中', value: '1', color: '#FFA768' },
  { name: '在线', value: '20', color: '#8EFFAC' },
  { name: '离线', value: '14', color: '#FFFFFF' },
  { name: '异常', value: '25', color: '#FF6262' },
];

const props = defineProps(['data', 'removeLabel']);
</script>
<style scoped lang="scss">
.mapPopUpBox {
  width: 418px;