feat:道路数据接口

ZhangXianQiang

2024-03-15 b3d89f70b2fefd7438eec61f7662da30ff8923c1

 src/views/daoAnOffice/left-center.vue

@@ -1,123 +1,198 @@
<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 ( [
const options = reactive([
  {
    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",
    num: "128",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,
    img: new URL('../../assets/img/gaosu.png', import.meta.url).href,
  }
])
const optionsT = reactive ( [
const optionsT = reactive([
  {
    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",
    num: "2355",
    img:new URL('../../assets/img/mtc.png', import.meta.url).href,
    img: new URL('../../assets/img/mtc.png', import.meta.url).href,
  }
])
const optionsS = reactive ( [
const optionsS = reactive([
  {
    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",
    num: "2355",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,
    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>
<div class="x-a">
  <div class="roadMileage">
    <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 class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsT" :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 class="x-a">
    <div class="roadMileage">
      <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>
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsS" :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 class="roadMileage">
      <p class="roadMileage-title">道路里程数量</p>
      <div style="display:flex;justify-content: space-between">
        <div v-for="(item, index) in optionsT" :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>
    <div class="roadMileage">
      <p class="roadMileage-title">道路里程数量</p>
      <div style="display:flex;justify-content: space-between">
        <div v-for="(item, index) in optionsS" :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 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>

<style scoped lang="scss">
.x-a{
  background-color: #111E3C;
.x-a {
  background-color: rgba(17, 34, 58, 0.6);

  border: 1px solid #29466A;
  padding: 10px 10px 20px;
}
.roadMileage{

.roadMileage {

  //display: flex;
  .roadMileage-title{
  .roadMileage-title {
    margin: 10px 0;
    font-family: PingFang SC;
    font-weight: 600;
@@ -125,21 +200,25 @@
    line-height: 22px;

  }
  .roadMileage-item{

  .roadMileage-item {
    padding: 15px 0;
    background: linear-gradient(0deg, rgba(13,29,50,0.55), rgba(34,82,154,0.55));
    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{
    .roadMileage-item-img {
      width: 130px;
    }
    .roadMileage-item-title{

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

    .roadMileage-item-num {
      text-align: center;
      font-weight: 800;
      font-family: PingFang SC;
@@ -147,4 +226,9 @@
    }
  }
}

.roadMileage-item-num {
  font-family: 'PangMenZhengDao' !important;
  letter-spacing: 1px !important;
}
</style>