From b3d89f70b2fefd7438eec61f7662da30ff8923c1 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 15 三月 2024 14:35:46 +0800
Subject: [PATCH] feat:道路数据接口
---
src/api/modules/index.ts | 3
src/views/daoAnOffice/left-center.vue | 180 ++++++++++++++++++++++++++++++++------------
2 files changed, 131 insertions(+), 52 deletions(-)
diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index c59a9c6..bda9897 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -14,7 +14,8 @@
// 璇锋眰鍦板潃缁熶竴瑙勫垝
export default {
'leftTop':'/dataDashboard/trafficIndex',//杩�3骞翠氦閫氫簨鏁呮寚鏁�
- 'subgrade': '/dataDashboard/pcrData',
+ // 浜鸿溅璺熀纭�淇℃伅
+ 'mileage': '/dataDashboard/pcrData',
'leftCenter':'/bigscreen/countUserNum',//宸︿腑
"centerMap":"/bigscreen/centerMap",
"centerBottom":"/bigscreen/installationPlan",
diff --git a/src/views/daoAnOffice/left-center.vue b/src/views/daoAnOffice/left-center.vue
index 593ed44..1104504 100644
--- a/src/views/daoAnOffice/left-center.vue
+++ b/src/views/daoAnOffice/left-center.vue
@@ -1,124 +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{
+.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;
@@ -126,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;
--
Gitblit v1.8.0