feat:道路数据接口

ZhangXianQiang

2024-03-15 b3d89f70b2fefd7438eec61f7662da30ff8923c1

 src/views/daoAnOffice/left-center.vue

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, computed } from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";
const options = reactive ( [
@@ -7,17 +7,20 @@
    title: "高速路",
    name: "1",
    num: "195",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
    img: new URL('../../assets/img/gaosu.png', import.meta.url).href,
  },
  {
    title: "国省道",
    name: "1",
    num: "167",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
    img: new URL('../../assets/img/gaosu.png', import.meta.url).href,
  },
  {
    title: "县乡道",
    name: "1",
    num: "188",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
    img: new URL('../../assets/img/gaosu.png', import.meta.url).href,
  },
  {
    title: "农村道路",
    name: "1",
@@ -30,17 +33,20 @@
    title: "货运车辆",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/hycl.png', import.meta.url).href,},
    img: new URL('../../assets/img/hycl.png', import.meta.url).href,
  },
  {
    title: "公交客运",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/gjky.png', import.meta.url).href,},
    img: new URL('../../assets/img/gjky.png', import.meta.url).href,
  },
  {
    title: "小型骑车",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/xxqc.png', import.meta.url).href,},
    img: new URL('../../assets/img/xxqc.png', import.meta.url).href,
  },
  {
    title: "摩托车",
    name: "1",
@@ -53,17 +59,20 @@
    title: "货源车辆驾驶人",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
    img: new URL('../../assets/img/qclc.png', import.meta.url).href,
  },
  {
    title: "公交客运驾驶人",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
    img: new URL('../../assets/img/qclc.png', import.meta.url).href,
  },
  {
    title: "小型汽车驾驶人",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
    img: new URL('../../assets/img/qclc.png', import.meta.url).href,
  },
  {
    title: "摩托车驾驶人",
    name: "1",
@@ -71,6 +80,58 @@
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,
  }
])

const iconList = ref([
  {
    id: 1,
    iconName: '道路里程数量',
    icon: new URL('../../assets/img/gaosu.png', import.meta.url).href
  },
  {
    id: 2,
    iconName: '机动车保有量',
    icon: [
      {
        key: 'indexOneName',
        img: new URL('../../assets/img/hycl.png', import.meta.url).href
      },
      {
        key: 'indexTwoName',
        img: new URL('../../assets/img/gjky.png', import.meta.url).href
      },
      {
        key: 'indexThreeName',
        img: new URL('../../assets/img/xxqc.png', import.meta.url).href
      },
      {
        key: 'indexFourName',
        img: new URL('../../assets/img/mtc.png', import.meta.url).href
      },
    ],
  },
  {
    id: 3,
    iconName: '驾驶人保有量',
    icon: new URL('../../assets/img/qclc.png', import.meta.url).href
  }
])
const dataInfo = ref({});

const getData = () => {
  currentGET('mileage').then((res) => {
    if (res.code === 200) {
      dataInfo.value = res.data
    } else {

    }
  });
}

getData();

computed(() => {

})
</script>

<template>
@@ -106,6 +167,17 @@
    </div>
  </div>


    <div class="roadMileage" v-for="item in dataInfo">
      <p class="roadMileage-title">道路里程数量</p>
      <div style="display:flex;justify-content: space-between">
        <div v-for="(item, index) in options" :key="index" class="roadMileage-item">
          <img :src="item.img" alt="" class="roadMileage-item-img">
          <p class="roadMileage-item-title">{{ item.title }}</p>
          <p class="roadMileage-item-num">{{ item.num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

@@ -116,7 +188,9 @@
  border: 1px solid #29466A;
  padding: 10px 10px 20px;
}

.roadMileage{

  //display: flex;
  .roadMileage-title{
    margin: 10px 0;
@@ -126,20 +200,24 @@
    line-height: 22px;

  }

  .roadMileage-item{
    padding: 15px 0;
    background: linear-gradient(0deg, rgba(13,29,50,0.55), rgba(34,82,154,0.55));

    //border: 1px solid #29466A;
    //opacity: 0.6;
    //background: #11223A;
    .roadMileage-item-img{
      width: 130px;
    }

    .roadMileage-item-title{
      text-align: center;
      font-family: PingFang SC;
      color: #44DBDD;
    }

    .roadMileage-item-num{
      text-align: center;
      font-weight: 800;