141 lines
2.7 KiB
Vue
141 lines
2.7 KiB
Vue
<template>
|
|
<!-- <Tit title="地区交通概览" style="margin-bottom: 8px" :class="{ loaded: loaded }">
|
|
<div class="leftOne-content">
|
|
</div>
|
|
</Tit> -->
|
|
<div>
|
|
<img src="@/assets/imgs/dituc.png" alt style="width: 100%;height: 100%;margin-left: 40px;" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineExpose, reactive } from 'vue'
|
|
import Tit from "./Tit/index.vue";
|
|
// import * as CockpitApi from '@/api/cockpit'
|
|
// import Tit
|
|
const loading = ref(false)
|
|
const loaded = ref(false)
|
|
const percentage = ref()
|
|
const state = reactive({
|
|
// seriesData: {}
|
|
})
|
|
|
|
// const percentage = computed(() => {
|
|
// return (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 >= 100
|
|
// ? 100
|
|
// : (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 || 0
|
|
// })
|
|
|
|
const getData = (data) => {
|
|
loading.value = true
|
|
// CockpitApi.getCoreIndicators_1(data)
|
|
// .then((res) => {
|
|
// loading.value = false
|
|
// nextTick(() => {
|
|
// loaded.value = true
|
|
// })
|
|
// state.seriesData = res
|
|
// percentage.value = Number(res.lastCompletionRate.replace('%', ''))
|
|
// // state.seriesData = res.reduce((pre, cur) => {
|
|
// // pre[cur.code] = cur.value
|
|
// // return pre
|
|
// // }, {})
|
|
// })
|
|
// .catch(() => {
|
|
// loading.value = false
|
|
// })
|
|
}
|
|
|
|
const search = (data) => {
|
|
// getData(data)
|
|
}
|
|
|
|
// search()
|
|
|
|
defineExpose({
|
|
search
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftOne-content {
|
|
padding: 0 73px 0 43px;
|
|
width: 340px;
|
|
height: 800px;
|
|
background-color: #05151a;
|
|
color: aliceblue;
|
|
}
|
|
|
|
.label {
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #c6d8e4;
|
|
margin-bottom: 18px;
|
|
padding-top: 21px;
|
|
}
|
|
|
|
.value-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.value {
|
|
font-family: Bebas;
|
|
font-size: 32px;
|
|
color: transparent;
|
|
background: linear-gradient(180deg, #3ff1b6 0%, #08dae8 100%);
|
|
background-clip: text;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.value-pre {
|
|
font-family: Bebas;
|
|
font-size: 14px;
|
|
color: #cedce6;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.value-text {
|
|
&-l {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&-v {
|
|
font-size: 20px;
|
|
font-family: Bebas;
|
|
}
|
|
}
|
|
|
|
.total {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.total-label {
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #c6d8e4;
|
|
}
|
|
|
|
.total-value {
|
|
font-family: Bebas;
|
|
font-size: 16px;
|
|
color: #cedce6;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.total-value-pre {
|
|
font-family: Bebas;
|
|
font-size: 14px;
|
|
color: #cedce6;
|
|
margin-left: 7px;
|
|
}
|
|
|
|
// :deep(.el-progress-bar__inner) {
|
|
// background: linear-gradient(90deg, #00fdc7 0%, #0dc2ff 100%);
|
|
// }
|
|
</style>
|