Merge branch 'refs/heads/feature/v9.0/9.0.1' into test

张含笑

2025-12-09 5808f76456ca0d40de5074f132b73a5a488e3e13

 src/views/wel/components/proportionStatic.vue

@@ -13,7 +13,7 @@
          :key="index"
          @click="timeClick(item, index)"
        >
          {{ timeListStr[index] }}
          {{ timeListStr[index] }} 
        </div>
      </div>
    </div>
@@ -21,14 +21,14 @@
      <div class="card-group">
        <div class="main-card">
          <div class="status-grid">
            <div class="status-item" v-for="(item, index) in eventTypeList" :key="index">
            <div class="status-item" v-for="(item, index) in eventTypeList" :key="index" @click="jumpEventDetails(item,index)">
              <div class="statusCon">
                <div class="status-label">{{ item.name }}</div>
                <div class="status-value">{{ item.value }}<span>个</span></div>
                <div class="ratio">
                  占比
                  <span :style="{ color: item.color }"
                    >{{ ((item.rate * 100) / 100).toFixed(2) }}%</span
                    >{{ item.rate || 0 }}%</span
                  >
                </div>
              </div>
@@ -46,36 +46,50 @@

<script setup>
import useEchartsResize from '@/hooks/useEchartsResize';
import { getJobEventByStatus } from '@/api/home/index';
import { getJobEventByStatus, getEventStatusNum } from '@/api/home/index';
import { getDateRange } from '@/utils/date'
import overviewImg2 from '@/assets/images/workbench/tc2.svg';
import overviewImg3 from '@/assets/images/workbench/tc3.svg';
import overviewImg4 from '@/assets/images/workbench/tc4.svg';
import overviewImg5 from '@/assets/images/workbench/tc5.svg';
import { useRouter } from 'vue-router'
import _ from 'lodash'
const router = useRouter()
let checked = ref('CURRENT_YEAR');
let timeListStr = ['本周', '本月', '本年'];
let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];

const dateRanges = {
  today: getDateRange('today'),
  week: getDateRange('week'),
  month: getDateRange('month'),
  year: getDateRange('year'),
}

const params = ref({
  date_enum: 'CURRENT_YEAR',
  // date_enum: 'CURRENT_YEAR',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
  end_date: dateRanges['year'][1], // undefined,
  start_date: dateRanges['year'][0], // undefined,
  source:1,//数据来源
});
const dateSelect = ref('CURRENT_YEAR');
const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg2, color: '#FF472F', status: '2', rate: 0 },
  { name: '待处理', value: 0, img: overviewImg3, color: '#FF7411', status: '0', rate: 0 },
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC300', status: '3', rate: 0 },
  { name: '已完成', value: 0, img: overviewImg5, color: '#0291A1', status: '4', rate: 0 },
  { name: '待审核', value: 0, img: overviewImg2, color: '#FF472F', status: '2', rate: 0 ,tagging:'pending' },
  { name: '待处理', value: 0, img: overviewImg3, color: '#FF7411', status: '0', rate: 0 ,tagging:'processing' },
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC300', status: '3', rate: 0 ,tagging:'inProgress'},
  { name: '已完成', value: 0, img: overviewImg5, color: '#0291A1', status: '4', rate: 0 ,tagging:'completed'},
]);
//  工单统计
const getTypeData = () => {
  getJobEventByStatus(params.value).then(res => {
  getEventStatusNum(params.value).then(res => {
    const resList = res?.data?.data || [];
    let totalNum = resList.reduce((sum, item) => sum + (item.num || 0), 0) - resList[0].num;
    resList.forEach(item => {
      eventTypeList.value.forEach(item1 => {
        if (item1.name === item.name) {
          item1.value = item.num;
          item1.rate = item.rate;
          item1.rate = _.round((item.num/totalNum)*100, 1);
        }
      });
    });
@@ -91,30 +105,50 @@

let timeClick = (item, index) => {
  checked.value = item;
  params.value.date_enum = item;
  // params.value.date_enum = item;
  if(item === 'CURRENT_WEEK') {
    params.value.start_date = dateRanges['week'][0]
    params.value.end_date = dateRanges['week'][1]
  } else if(item === 'CURRENT_MONTH') {
    params.value.start_date = dateRanges['month'][0]
    params.value.end_date = dateRanges['month'][1]
  } else {
    params.value.start_date = dateRanges['year'][0]
    params.value.end_date = dateRanges['year'][1]
  }

  dateSelect.value = item;
  getTypeData();
};
// 跳转事件工单
const jumpEventDetails = (item,index)=>{
// console.log('tiaozhuan',item);
  router.replace({
    path: `/tickets/ticket`, 
    query: { tab: item.tagging }
  });
}
// 图表
const echartsRef = ref(null);
let { chart } = useEchartsResize(echartsRef);
const initChart = val => {
  const totalNum = val.reduce((sum, item) => sum + item.num, 0);
  let totalNum = val[0].num //val.reduce((sum, item) => sum + item.num, 0);
  let filteredData = val.filter(item => item.name !== "全部状态");
  const data = {
    total: {
      title: '总计',
      figure: totalNum.toString(), // 动态计算总数
    },
    data: val.map(item => ({
    data: filteredData.map(item => ({
      value: item.num,
      name: item.name,
      rate: item.rate,
      rate: _.round((item.num/totalNum)*100, 1),
    })),
  };
  const containerWidth = chart.value.clientWidth;
  const isSmallScreen = containerWidth < 768; // 移动端判断
  const echartsOption = {
    color: ['#FF472F', '#FF7411', '#FFC300', '#0291A1'],
    color: ['#0291A1', '#FF7411', '#FFC300', '#FF472F'],
    tooltip: {
      trigger: 'item',
      padding: 0,
@@ -187,12 +221,12 @@
  border-radius: 8px 8px 8px 8px;
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
//   height: 315px;
    height: pxToVh(355);

  height: pxToVh(282);
  margin-bottom: 10px;
  .card-title {
    display: flex;
    margin-bottom: 10px;
    margin-bottom: 4px;
    align-items: center;
    justify-content: space-between;
    .cardtotal {
@@ -240,24 +274,17 @@
      .status-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        // row-gap: 19px;
        // gap: 10px;
   
        // padding-bottom: 5px;

        .status-item {
          display: flex;
          text-align: center;
          justify-content: space-between;
        //   height: 97px;
          height: pxToVh(107);
          //   max-width: 158px;
          margin-bottom: 19px;
          height: pxToVh(97);
          margin-bottom: 10px;
          margin-right: 14px;
          width: 144px;
          background: #f6f8fe;
          border-radius: 8px 8px 8px 8px;

          cursor: pointer;
          img {
            width: 26px;
            height: 26px;
@@ -265,10 +292,11 @@
          }

          .statusCon {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            // align-items: center;
            padding: 5px 4px 9px 10px;
          justify-content: space-between;
            padding: 10px 4px 39px 10px;
            text-align: left;

            .status-label {
@@ -276,6 +304,7 @@
              font-size: 14px;
              text-align: left;
              color: #383838;
              margin: 0;
            }

            .ratio {
@@ -284,15 +313,16 @@
              color: #363636;
              white-space: nowrap;
              text-align: left;
              margin-top: 10px;
            }

            .status-value {
              font-family: 'Source Han Sans CN';
              font-weight: bold;
              font-size: 30px;
              font-size: 28px;
              height: 28px;
              color: #363636;
              // margin: 5px 0;
              // font-style: italic;
            margin-top: -6px;
              display: inline-block;
              transform: skewX(-5deg);

@@ -337,12 +367,16 @@
  .card-item {
    width: 94px;
    height: 100%;
    line-height: 28px;
    // line-height: 28px;
    cursor: pointer;
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 14px;
    color: #7c8091;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .card-item:first-child {