102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
|
<!--
|
||
|
|
* @Author: SunTao 328867980@qq.com
|
||
|
|
* @Date: 2024-10-18 15:22:31
|
||
|
|
* @LastEditors: SunTao 328867980@qq.com
|
||
|
|
* @LastEditTime: 2024-10-18 17:29:19
|
||
|
|
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
|
||
|
|
* @Description: 道路资产大屏-路产统计
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div
|
||
|
|
class="road-div"
|
||
|
|
v-for="(item, index) in roadList"
|
||
|
|
:key="`road-${index}`"
|
||
|
|
>
|
||
|
|
<div class="road-top">
|
||
|
|
<div class="road-top-name">
|
||
|
|
<a>{{ index + 1 }}</a
|
||
|
|
>{{ item.name }}
|
||
|
|
</div>
|
||
|
|
<div class="road-top-value">{{ item.value }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="road-bottom">
|
||
|
|
<div
|
||
|
|
:style="{ width: `${(item.value / 300) * 100}%` }"
|
||
|
|
:class="`road-bottom-${index}`"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "RoadStatistic",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
roadList: [
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
{ name: "G10152", value: 523 },
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
color: #ffffff;
|
||
|
|
|
||
|
|
.road-div {
|
||
|
|
height: 3rem;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 1.5rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
> div {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.index {
|
||
|
|
width: 4.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
width: 5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value {
|
||
|
|
width: 6.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.road-top {
|
||
|
|
.road-top-name {
|
||
|
|
line-height: 1.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.road-bottom {
|
||
|
|
height: 0.5rem;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|