feat: 修改UI重新传的首页机巢效果

chenyao

2025-04-10 4ca9d0b91c821c18eeeea381b6e16132fe6577b8

feat: 修改UI重新传的首页机巢效果

 src/assets/images/home/homeLeft/Group_1321315132.png

 src/assets/images/home/homeLeft/inspection-num.png

 src/assets/images/home/homeLeft/inspection-num1.png

 src/assets/images/home/homeLeft/table-icon.png

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue

@@ -9,11 +9,14 @@
                <div class="name">总任务数</div>
            </div>
            <div class="status">
                <div v-for="item in list">
                    <div :style="{ color: item.color }" class="value">
                        {{ jobStatistics[item.field] }}
                <div class="item" v-for="(item, index) in list">
                    <div>
                        <div :style="{ color: item.color }" class="value">
                            {{ jobStatistics[item.field] }}
                        </div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                    <div class="name">{{ item.name }}</div>
                    <div v-if="index !== 2 && index !== 4" class="right-line"></div>
                </div>
            </div>
        </div>
@@ -171,14 +174,14 @@

    .inspection-num {
        background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%;
        width: 360px;
        height: 118px;
        width: 378px;
        height: 110px;
        position: relative;

        .total {
            position: absolute;
            left: 34px;
            top: 44px;
            left: 20px;
            top: 36px;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
@@ -194,24 +197,40 @@

        .status {
            position: absolute;
            top: 8px;
            right: 10px;
            width: 200px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            line-height: 22px;
            padding: 0 10px 10px 0;

            left: 115px;
            width: 250px;
            height: 110px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1    , 30px); // 设置每行高度
            gap: 10px 0; // 调整行间距
            align-content: center;
			
            .item {
                display: flex;
                align-items: center;
            }
            .right-line {
        width: 0px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
        margin-left: 10px;
      }
            .name {
                width: 56px;
                text-align: center;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
                margin-top: -4px;
            }

            .value {
                width: 56px;
                text-align: center;
                font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 26px;

 src/views/Home/HomeLeft/OverviewNext.vue

@@ -153,6 +153,14 @@
        top: 14px;
        left: 10px;
      }
      .name {
        display: flex;
        align-items: center;
        gap: 8px; // 添加图片和文字之间的间距
        img {
          vertical-align: middle;
        }
      }
      .status {
        color: #fff;
        cursor: pointer;

 src/views/Home/HomeLeft/components/MachineNestTotal.vue

@@ -7,9 +7,12 @@
        <div class="name">机巢总数</div>
      </div>
      <div class="status">
        <div v-for="item in listNum">
          <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
          <div class="name">{{ item.name }}</div>
        <div class="item" v-for="(item, index) in listNum">
          <div>
            <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
          <div class="right-line" v-if="index !== listNum.length - 1"></div>
        </div>
      </div>
    </div>
@@ -92,13 +95,29 @@
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      .item {
        display: flex;
        align-items: center;
      }
      .right-line {
        width: 0px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
        margin-left: 10px;
      }
      .name {
        text-align: center;
        width: 42px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .value {
        text-align: center;
        width: 42px;
        font-weight: 400;
        font-size: 26px;
      }

 src/views/Home/HomeRight/EventOverview.vue

@@ -118,12 +118,12 @@
};

const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg1, color: '#FF8E8E', status: '2' },
  { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' },
  { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' },
  { name: '待处理', value: 0, img: overviewImg3, color: '#6FCAFF', status: '0' },
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFD509', status: '3' },
  { name: '已完成', value: 0, img: overviewImg5, color: '#FF8E8E', status: '4' },
  { name: '已完结', value: 0, img: overviewImg6, color: '#8EFFAC', status: '5' },
  { name: '待处理', value: 0, img: overviewImg3, color: '#E36913', status: '0' },
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' },
  { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' },
  { name: '已完结', value: 0, img: overviewImg6, color: '#11C4FF', status: '5' },
]);
const seriesObj = {};
eventTypeList.value.forEach(item => {

 src/views/TaskManage/TaskIntermediateContent/initPointWayline.js

@@ -22,7 +22,8 @@
 * @param { 单点航线 相关功能} url 
 */
export const initPointWayline = (url) => {
  const { viewer } = cesiumOperation();
  
  let viewer = window.$viewer;

  // 解析kmz文件
  const parsingFiles = async (url) => {
@@ -34,6 +35,18 @@
  };
  // 在地图上画线
  const drawWayline = (xmlJson) => {
    const points = xmlJson?.['Folder']?.['Placemark']
    const points = xmlJson?.['Folder']?.['Placemark'];
    getPositionsHeight(points, viewer, 100).then((result) => {
      positions = result.map((item) => {
        return Cesium.Cartesian3.fromDegrees(
          Number(item.longitude),
          Number(item.latitude),
          item.FinalHeight,
        )
      });
      result.forEach((item, index) => {
        let setting = {};
      });
    });
  };
};