无人机管理后台前端(已迁走)
张含笑
2025-05-09 5b33c40610d02e045ee2f926e34dc5b7ae25d4eb
个人工作台调整
4 files modified
174 ■■■■ changed files
.env.development 4 ●●●● patch | view | raw | blame | history
src/views/wel/components/backlog.vue 101 ●●●●● patch | view | raw | blame | history
src/views/wel/components/statistics.vue 32 ●●●● patch | view | raw | blame | history
src/views/wel/index.vue 37 ●●●● patch | view | raw | blame | history
.env.development
@@ -10,8 +10,8 @@
VITE_APP_BASE=/manage
# 服务地址
# VITE_APP_URL = https://wrj.shuixiongit.com/api
VITE_APP_URL= http://192.168.1.7
VITE_APP_URL = https://wrj.shuixiongit.com/api
# VITE_APP_URL= http://192.168.1.7
# 域名
VITE_APP_AREA_NAME =  wss://wrj.shuixiongit.com
src/views/wel/components/backlog.vue
@@ -16,12 +16,12 @@
          <div class="content-wrapper">
            <div class="main-content">
              <span class="status-tag">{{ statusMap[item.status] }}</span>
              <span class="todo-text">{{ item.title }}</span>
              <span class="todo-text">{{ item.event_name }}</span>
            </div>
            <div class="action-area">
              <img :src="st7" alt="">
              <span class="todo-date">{{ item.date }}</span>
              <img :src="st7" alt="" />
              <span class="todo-date">{{ item.job_create_time?.slice(0,10) }}</span>
            </div>
          </div>
        </div>
@@ -31,46 +31,31 @@
</template>
<script setup>
import st7 from '@/assets/images/workbench/st7.png'
// 状态显示映射
const statusMap = {
  pending: '待审核',
  processing: '处理中',
  todo: '待处理',
};
// 待办事项数据
const todos = ref([
  {
    status: 'pending',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'todo',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'processing',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'pending',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'todo',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
]);
const jumporder=()=>{
import st7 from '@/assets/images/workbench/st7.png';
import { getList } from '@/api/tickets/ticket';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'
const todos = ref([]);
const router = useRouter()
const jumporder = () => {
  console.log('tiao');
}
  router.push({
        path: '/tickets/ticket',
    })
};
const statusMap = {
  2: '待审核',
  3: '处理中',
  0: '待处理',
  4: '已完成',
};
const getListMatter = async () => {
  const res = await getList({});
  todos.value=res.data.data.records?.slice(0,5)
};
onMounted(() => {
  getListMatter();
});
</script>
<style lang="scss" scoped>
@@ -98,8 +83,8 @@
    .todo-item {
      display: flex;
      align-items: center;
     background: #FFFFFF;
      cursor: pointer;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
      transition: all 0.2s ease;
@@ -148,40 +133,38 @@
      .action-area {
        display: flex;
        align-items: center;
     margin-right: 42px;
        margin-right: 42px;
        .todo-date {
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
    // 状态颜色方案
    .status-pending {
      border-left-color: #FF6560;
      color: #FF6560;
    .status-2 {
      border-left-color: #ff6560;
      color: #ff6560;
      .status-indicator {
        background: #FF6560;
        background: #ff6560;
      }
    }
    .status-todo {
      border-left-color: #5D77FB;
      color: #5D77FB;
    .status-0 {
      border-left-color: #5d77fb;
      color: #5d77fb;
      .status-indicator {
        background: #5D77FB;
        background: #5d77fb;
      }
    }
    .status-processing {
      border-left-color: #FF8B26;
      color: #FF8B26;
    .status-3 {
      border-left-color: #ff8b26;
      color: #ff8b26;
      .status-indicator {
        background: #FF8B26;
        background: #ff8b26;
      }
    }
  }
src/views/wel/components/statistics.vue
@@ -9,7 +9,7 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <div class="grid-container1" v-if="permission?.device_statistics_six">
    <div class="grid-container1">
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
          <img :src="test[item].img" :alt="newtitleData[item].name" />
@@ -29,30 +29,6 @@
            }"></span>
            <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
            <span class="count">{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-container" v-if="permission?.device_statistics_four">
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
          <img :src="test[item].img" :alt="newtitleData[item].name" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</span>
          </div>
          <div class="status-list">
            <div v-for="(status, statusIndex) in newtitleData[item].status_map" :key="statusIndex" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusIndex)"
              :style="{ color: getStatusColor(test[item]?.name, statusIndex) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusIndex),
                color: getStatusColor(test[item]?.name, statusIndex),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count">{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span>
            </div>
          </div>
        </div>
      </div>
@@ -222,6 +198,12 @@
}
const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode,).then(res => {
  console.log(permission, 111)
    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data
      return
    }
    for (let key in res.data.data) {
      if (permission.value?.device_statistics_four && (key === 'flow_type_list' ||
        key === 'insure_list')) continue
src/views/wel/index.vue
@@ -132,6 +132,8 @@
  dateSelect.value = item;
  console.log('日期选择', params.value.date_enum);
  getTypeData();
  getFlyList()
  getFlyTimeList()
};
const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg2, color: '#FF6560', status: '2', rate: 0 },
@@ -185,7 +187,7 @@
const getFlyTimeList=()=>{
  getFlyTime(params.value).then(res=>{
   const resList = res?.data?.data || [];
    console.log('飞行统计11',res.data.data);
    // console.log('飞行统计11',res.data.data);
    lineCharts(resList)
  })
}
@@ -291,6 +293,33 @@
const flight_distance=[]
const flight_time=[]
const event_num=[]
// /遍历数据填充各系列
  bardata?.forEach(period => {
    let hasDuration = false, hasDistance = false, hasResult = false;
    period.data?.forEach(item => {
      switch(item.name) {
        case '飞行时长':
          flight_time.push(parseFloat(item.value) || 0);
          hasDuration = true;
          break;
        case '飞行里程':
          // 转换为万公里 (假设原始单位是米)
          flight_distance.push((parseFloat(item.value) / 1000000 || 0).toFixed(2));
          hasDistance = true;
          break;
        case '任务成果':
          event_num.push(Number(item.value) || 0);
          hasResult = true;
          break;
      }
    });
    // 处理可能缺失的数据项
    if(!hasDuration) flight_time.push(0);
    if(!hasDistance) flight_distance.push(0);
    if(!hasResult) event_num.push(0);
  });
  var option = {
    tooltip: {
      trigger: 'item',
@@ -426,7 +455,7 @@
            barBorderRadius: 6,
          },
        },
        data: [11, 14, 133, 4, 10, 14, 116, 12, 12, 58, 15, 12],
        data: flight_time,
      },
      {
        name: '飞行里程',
@@ -447,7 +476,7 @@
            barBorderRadius: 6,
          },
        },
        data: [0, 1, 9, 0, 5, 3, 0, 2, 0, 0, 1, 0],
        data: flight_distance,
      },
      {
        name: '任务成果',
@@ -466,7 +495,7 @@
        lineStyle: {
          color: 'rgba(52, 146, 242, 1)',
        },
        data: [1, 7, 6, 30, 20, 21.43, 11, 16.67, 22, 88, 6.67, 10],
        data: event_num,
      },
    ],
  };