lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善功能

Browse Source
This commit is contained in:
zjc
2024-12-30 11:56:20 +08:00
parent cb35986d1a
commit d2c0db5270
9 changed files with 1508 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/request.js
View File

@@ -1,5 +1,4 @@
import axios from 'axios' import axios from 'axios'
import qs from 'qs'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'

BIN
src/assets/images/arrow-down-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

3
src/components/Correspondence/index.vue
View File

@@ -49,8 +49,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.box-4-content { .box-4-content {
position: relative; position: relative;
margin-top: vh(10); margin: vh(10);
margin-left: vw(10);
width: vw(300); width: vw(300);
height: vh(1060); height: vh(1060);
background-image: url('@/assets/images/bg-1.png'); background-image: url('@/assets/images/bg-1.png');

59
src/components/Header/index.vue
View File

@@ -4,7 +4,7 @@
<li <li
class="nav-left-item" class="nav-left-item"
:style="{ :style="{
backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})` backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
}" }"
v-for="(item, index) in navLeft" v-for="(item, index) in navLeft"
:key="index" :key="index"
@@ -12,6 +12,24 @@
> >
{{ item.name }} {{ item.name }}
</li> </li>
<el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
<li
class="nav-left-item"
:style="{
backgroundImage: `url(${title2})`
}"
>
{{ otherScenic || '其他景区' }}
<img class="icon" src="@/assets/images/arrow-down-1.png" />
</li>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in navLeft" :key="index" :command="item">
<span class="label"> {{ item.name }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</ul> </ul>
<div class="title"> <div class="title">
<span>{{ title }}</span> <span>{{ title }}</span>
@@ -44,8 +62,8 @@
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import title2 from '@/assets/images/title-2.png' import title2 from '@/assets/images/title-2.png'
import title2Select from '@/assets/images/title-2-select.png' import title2Select from '@/assets/images/title-2-select.png'
import { getWeatherApi } from '@/api/home' import { getWeatherApi } from '@/api/home'
import { getSpotApi } from '@/api/sentiment'
const emit = defineEmits(['change']) const emit = defineEmits(['change'])
@@ -59,6 +77,7 @@
let isSkip = ref(true) let isSkip = ref(true)
let isBack = ref(false) let isBack = ref(false)
let current = ref(0) let current = ref(0)
let otherScenic = ref('')
// 补零 // 补零
const fillZero = (value) => { const fillZero = (value) => {
@@ -79,31 +98,37 @@
minute minute
)}:${fillZero(second)}` )}:${fillZero(second)}`
} }
const handleCommand = (e) => {
console.log(e, '=========')
title.value = e.name
otherScenic.value = e.name
current.value = ''
}
// 返回上一页 // 返回上一页
const handleBack = () => { const handleBack = () => {
router.go(-1) router.go(-1)
} }
// 点击导航 // 点击导航
const handleNav = (item, index) => { const handleNav = (item, index) => {
if (isSkip.value) { if (isSkip.value) {
router.push(item.path) router.push(item.path)
} else { } else {
emit('on-change', index) if (current.value === index) return
otherScenic.value = ''
current.value = index
title.value = item.name
} }
} }
// 获取天气数据 // 获取天气数据
const getWeather = async () => { const getWeather = async () => {
let res = await getWeatherApi() let res = await getWeatherApi()
weatherData.value = res.data weatherData.value = res.data
} }
// 设置当前路由导航栏 // 设置当前路由导航栏
const setNav = () => { const setNav = async () => {
switch (router.currentRoute.value.path) { switch (router.currentRoute.value.path) {
case '/home': case '/home':
isSkip.value = true
title.value = '奉节县旅游指挥调度中心' title.value = '奉节县旅游指挥调度中心'
navLeft.value = [ navLeft.value = [
{ name: '安全', path: '/monitor' }, { name: '安全', path: '/monitor' },
@@ -118,10 +143,17 @@
] ]
break break
case '/scenic': case '/scenic':
title.value = '景区' isSkip.value = false
navLeft.value = []
navRight.value = []
isBack.value = true isBack.value = true
let res = await getSpotApi()
navLeft.value = res.data.map((item) => {
return {
name: item.ssname,
id: item.id
}
})
title.value = navLeft.value[current.value].name
navRight.value = []
break break
case '/sentiment': case '/sentiment':
title.value = '舆情检测' title.value = '舆情检测'
@@ -249,6 +281,7 @@
font-size: vw(48); font-size: vw(48);
font-weight: 800; font-weight: 800;
color: transparent; color: transparent;
letter-spacing: vw(10);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -271,6 +304,10 @@
text-align: center; text-align: center;
color: rgba(208, 236, 255, 0.9); color: rgba(208, 236, 255, 0.9);
background-size: 100% 100%; background-size: 100% 100%;
.icon {
width: vw(18);
height: vw(18);
}
} }
} }
.nav-right { .nav-right {

2
src/views/home/components/box-3.vue
View File

@@ -97,7 +97,7 @@
<countup class="value" :end-val="500" /> <countup class="value" :end-val="500" />
</div> </div>
<div> <div>
<div class="label">车库总数</div> <div class="label">总车位数</div>
<countup class="value" :end-val="500" /> <countup class="value" :end-val="500" />
</div> </div>
<div> <div>

4
src/views/scenic/components/box-2.vue
View File

@@ -344,7 +344,7 @@
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: vw(20); right: vw(20);
bottom: vh(20); bottom: vw(20);
width: vw(50); width: vw(50);
z-index: 999; z-index: 999;
} }
@@ -375,7 +375,7 @@
} }
.icon { .icon {
width: vw(26); width: vw(26);
height: vh(28); height: vw(28);
margin-right: vw(4); margin-right: vw(4);
} }
.text { .text {

545
src/views/traffic/components/box-1.vue
View File

@@ -1,287 +1,282 @@
<template> <template>
<div class="traffic-box-1"> <div class="traffic-box-1">
<div class="title-num"> <div class="title-num">
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<img src="@/assets/images/t-icon-1.png" alt="">总路段 <div class="item-num"
</div> ><span><countup endVal="88895" /> </span>
<div class="item-num"><span><countup endVal="88895" /></span> </div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<img src="@/assets/images/t-icon-1.png" alt="">总路段 <div class="item-num"
</div> ><span><countup endVal="88895" /> </span>
<div class="item-num"><span><countup endVal="88895" /></span></div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<img src="@/assets/images/t-icon-1.png" alt="">总路段 <div class="item-num"
</div> ><span><countup endVal="88895" /></span>
<div class="item-num"><span><countup endVal="88895" /></span></div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="item-t flex"> <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<img src="@/assets/images/t-icon-1.png" alt="">总路段 <div class="item-num"
</div> ><span><countup endVal="88895" /></span>
<div class="item-num"><span><countup endVal="88895" /></span></div> </div>
</div> </div>
</div> </div>
<div class="list-item"> <div class="list-item">
<div class="item-li" v-for="item in 4"> <div class="item-li" v-for="item in 4">
<div class="title-3"><span>拥堵频次占比</span></div> <div class="title-3"><span>拥堵频次占比</span></div>
<div class="chart-box"> <div class="chart-box">
<v-chart class="chart" :option="option1" autoresize /> <v-chart class="chart" :option="option1" autoresize />
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil' import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue' import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts'; import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'; import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark'); provide(THEME_KEY, 'dark')
const option1 = ref({ const option1 = ref({
backgroundColor:'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
type: 'scroll', type: 'scroll',
orient: 'vertical', orient: 'vertical',
right: fitChartSize(10), right: fitChartSize(10),
top: fitChartSize(70), top: fitChartSize(70),
bottom: fitChartSize(20), bottom: fitChartSize(20),
itemWidth:5, itemWidth: 5,
itemHeight:5, itemHeight: 5,
padding: [20,10,20,10], padding: [20, 10, 20, 10],
// itemGap:15, // itemGap:15,
show:true, show: true,
lineStyle:{ lineStyle: {
borderColor:'#fff', borderColor: '#fff',
width:5, width: 5
}, },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize:fitChartSize(16), fontSize: fitChartSize(16),
lineHeight: 16, lineHeight: 16,
rich: { rich: {
d: { d: {
width: '100%', width: '100%',
borderWidth: 0.5, borderWidth: 0.5,
height:5, height: 5,
backgroundColor: '1', backgroundColor: '1'
}, },
a: { a: {
width: fitChartSize(75), width: fitChartSize(75),
align: 'left', align: 'left',
fontSize:fitChartSize(16), fontSize: fitChartSize(16)
// backgroundColor:'1' // backgroundColor:'1'
// color:'1', // color:'1',
// borderColor:'#eee', // borderColor:'#eee',
// borderWidth:2 // borderWidth:2
}, }
} }
}, },
formatter: (e) => { formatter: (e) => {
let ratio = 0 let ratio = 0
let value = 0 let value = 0
if (option1.value.series[0].data.length > 0) { if (option1.value.series[0].data.length > 0) {
option1.value.series[0].data.forEach(item => { option1.value.series[0].data.forEach((item) => {
if (e == item.name) { if (e == item.name) {
ratio = (item.value*100/3799).toFixed(0) ratio = ((item.value * 100) / 3799).toFixed(0)
value = item.value value = item.value
} }
}); })
} }
// return `${e} ${ratio}% // return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}'] let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
return arr.join('') return arr.join('')
}, },
itemStyle:{ itemStyle: {
// color:'#fff' // color:'#fff'
},
backgroundColor: 'rgba(0,77,136,0.6)'
},
series: [
{
name: 'Access From',
type: 'pie',
left: fitChartSize(-50),
top: fitChartSize(40),
width: fitChartSize(350),
height: fitChartSize(350),
// width:200,
// height:200,
radius: ['40%', '50%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 2
},
label: {
show: false,
position: 'center',
fontWeight: 'bold'
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
// },
// rich: {
}, // value: {
backgroundColor:'rgba(0,77,136,0.6)' // color: '#fff',
}, // fontSize: fitChartSize(24),
series: [ // fontWeight: 'bold',
{ // padding: [0, 0, 5, 0]
name: 'Access From', // },
type: 'pie', // name: {
left:fitChartSize(-50), // color: '#7894A8',
top:fitChartSize(40), // fontSize: fitChartSize(12)
width:fitChartSize(350), // }
height:fitChartSize(350), // }
// width:200, },
// height:200, emphasis: {
radius: ['40%', '50%'], label: {
avoidLabelOverlap: false, show: true,
padAngle: 5, fontSize: fitChartSize(16),
itemStyle: { fontWeight: 'bold',
borderRadius: 2 color: '#fff',
}, fontWeight: 'bold',
label: { formatter: function (o) {
show: false, let data = o.data.value
position: 'center', return `{value|${data}}` + '\n' + `{name|整改率}`
fontWeight: 'bold', },
// formatter: function (o) { rich: {
// let data = o.data.value value: {
// return `{value|${data}}` + '\n' + `{name|整改率}` color: '#fff',
// }, fontSize: fitChartSize(24),
// rich: { fontWeight: 'bold',
padding: [0, 0, 5, 0]
// value: { },
// color: '#fff', name: {
// fontSize: fitChartSize(24), color: '#7894A8',
// fontWeight: 'bold', fontSize: fitChartSize(12)
// padding: [0, 0, 5, 0] }
// }, }
// name: { }
// color: '#7894A8', },
// fontSize: fitChartSize(12) labelLine: {
// } show: true
// } },
}, data: [
emphasis: { { value: 200, name: '异常状况1' },
label: { { value: 500, name: '异常状况2' },
show: true, { value: 234, name: '异常状况3' },
fontSize: fitChartSize(16), { value: 135, name: '异常状况4' },
fontWeight: 'bold', { value: 100, name: '异常状况5' },
color:'#fff', { value: 777, name: '异常状况6' },
fontWeight: 'bold', { value: 888, name: '其他' }
formatter: function (o) { ]
let data = o.data.value }
return `{value|${data}}` + '\n' + `{name|整改率}` ]
}, })
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#7894A8',
fontSize: fitChartSize(12)
}
}
}
},
labelLine: {
show: true
},
data: [
{ value: 200, name: '异常状况1' },
{ value: 500, name: '异常状况2' },
{ value: 234, name: '异常状况3' },
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
]
},
],
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.traffic-box-1{ .traffic-box-1 {
width:vw(815); width: vw(815);
height:vh(975); height: vh(975);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%); background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
margin-top:vh(100); margin-top: vh(100);
position: relative; position: relative;
z-index: 9; z-index: 9;
.list-item{ .list-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding:0 vw(10); padding: 0 vw(10);
.item-li{ .item-li {
width: vw(388); width: vw(388);
height: vh(420); height: vh(420);
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%); background-image: url('@/assets/images/bg-3.png');
border-radius: 0px 0px 0px 0px; background-size: 100% 100%;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.title-3{
margin-left:vw(10);
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span { .title-3 {
position: absolute; margin-left: vw(10);
bottom: vh(4); position: relative;
left: vw(20); width: vw(344);
font-size: vw(15); height: vh(12);
font-weight: bold; margin-top: vh(20);
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%); background-image: url('@/assets/images/title-6.png');
-webkit-background-clip: text; background-size: 100% 100%;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
.chart-box{
width:100%;
height:vh(370);
}
}
}
.title-num{
display: flex;
justify-content: flex-start;
padding:vw(40);
.item-box{
flex: 1;
.item-t{
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255,255,255,0.8);
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom:vh(20);
img{
margin-right:vw(5);
width:vw(8);
height:vh(8);
}
} & > span {
.item-num{ position: absolute;
width:vw(134); bottom: vh(4);
height:vh(30); left: vw(20);
background-image: url('@/assets/images/t-box-title-bg-1.png'); font-size: vw(15);
background-size: 100% 100%; font-weight: bold;
font-weight: bold; background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
font-size: vw(24); -webkit-background-clip: text;
color: #02F9FA; background-clip: text;
text-align: left; -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
font-style: normal; color: transparent; /* 兼容其他浏览器 */
text-transform: none; }
padding-left:vw(15); }
position: relative; .chart-box {
left:vw(-8); width: 100%;
span{ height: vh(370);
position: relative; }
top:vh(-5); }
} }
} .title-num {
} display: flex;
} justify-content: flex-start;
} padding: vw(40);
.item-box {
flex: 1;
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: vh(20);
img {
margin-right: vw(5);
width: vw(8);
height: vh(8);
}
}
.item-num {
width: vw(134);
height: vh(30);
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: vw(15);
position: relative;
left: vw(-8);
span {
position: relative;
top: vh(-5);
}
}
}
}
}
</style> </style>

1519
src/views/workOrder/components/box-2.vue
View File

File diff suppressed because it is too large Load Diff

807
src/views/workOrder/components/box-3.vue
View File

@@ -1,413 +1,412 @@
<template> <template>
<div class="work-box-3"> <div class="work-box-3">
<!-- 1 --> <!-- 1 -->
<div class="work-2-flex"> <div class="work-2-flex">
<div class="header"> <div class="header">
<div class="title"> <span>消息情况</span> </div> <div class="title"> <span>消息情况</span> </div>
</div> </div>
<div class="hd-list"> <div class="hd-list">
<div class="item item1"> <div class="item item1">
工单完成数 <span class="color1"><countup endVal="45678" /></span> 工单完成数 <span class="color1"><countup endVal="45678" /></span>
</div> </div>
<div class="item item3"> <div class="item item3">
紧急工单数 <span class=""><countup endVal="45678" /></span> 紧急工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
<div class="item item2"> <div class="item item2">
重要工单数 <span class=""><countup endVal="45678" /></span> 重要工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
<div class="item item1"> <div class="item item1">
普通工单数 <span class=""><countup endVal="45678" /></span> 普通工单数 <span class=""><countup endVal="45678" /></span>
</div> </div>
</div> </div>
<div class="chart-box flex"> <div class="chart-box flex">
<div class="box-item"> <div class="box-item">
<v-chart class="line-chart" :option="option" autoresize /> <v-chart class="line-chart" :option="option" autoresize />
</div> </div>
<div class="box-item"> <div class="box-item">
<v-chart class="line-chart" :option="option" autoresize /> <v-chart class="line-chart" :option="option" autoresize />
</div> </div>
<div class="box-item"> <div class="box-item">
<v-chart class="line-chart" :option="option" autoresize /> <v-chart class="line-chart" :option="option" autoresize />
</div> </div>
</div> </div>
</div> </div>
<!-- 2 --> <!-- 2 -->
<div class="work-box-1"> <div class="work-box-1">
<!-- 最新工单 --> <!-- 最新工单 -->
<div class="header"> <div class="header">
<div class="title"> <span>最新工单</span> </div> <div class="title"> <span>消息情况</span> </div>
</div> </div>
<!-- 列表 --> <!-- 列表 -->
<div class="list"> <div class="list">
<div class="li" v-for="item in 40"> <div class="li" v-for="item in 40">
<span class="label label1">普通</span> <span class="label label1">普通</span>
<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p> <p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
<span class="time">2024-12.16 23:58</span> <span class="time">2024-12.16 23:58</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil' import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue' import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts'; import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'; import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark'); provide(THEME_KEY, 'dark')
const option = ref({ const option = ref({
backgroundColor:'transparent', backgroundColor: 'transparent',
title: [ title: [
{ {
text: '45.5%', text: '45.5%',
x: 'center', x: 'center',
top: '34%', top: '34%',
textStyle: { textStyle: {
color: '#00D0FF', color: '#00D0FF',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
}, },
{ {
text: '完成率', text: '完成率',
x: 'center', x: 'center',
top: '56%', top: '56%',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
} }
], ],
series: [ series: [
// 内侧环 // 内侧环
{ {
type: 'gauge', type: 'gauge',
radius: '100%', radius: '100%',
center: ['50%', '50%'], center: ['50%', '50%'],
min: 0, min: 0,
max: 100, max: 100,
startAngle: 360, startAngle: 360,
endAngle: 0, endAngle: 0,
itemStyle: { itemStyle: {
color: '#00D0FF' color: '#00D0FF'
}, },
axisLine: { axisLine: {
show: true, show: true,
roundCap: false, roundCap: false,
lineStyle: { lineStyle: {
color: [ color: [
[0, '#075199'], [0, '#075199'],
[1, '#075199'] [1, '#075199']
], ],
width: fitChartSize(6) width: fitChartSize(6)
} }
}, },
progress: { progress: {
show: true, show: true,
roundCap: false, roundCap: false,
width: fitChartSize(6) width: fitChartSize(6)
}, },
pointer: { pointer: {
// 指针 // 指针
show: false show: false
}, },
axisTick: { axisTick: {
// 刻度 // 刻度
show: false show: false
}, },
splitLine: { splitLine: {
// 分割线 // 分割线
show: false show: false
}, },
axisLabel: { axisLabel: {
// 刻度标签 // 刻度标签
show: false show: false
}, },
detail: { detail: {
// 仪表盘详情 // 仪表盘详情
show: false show: false
}, },
data: [ data: [
{ {
value: 50 value: 50
} }
] ]
}, },
{ {
type: 'gauge', type: 'gauge',
radius: '95%', radius: '95%',
center: ['50%', '50%'], center: ['50%', '50%'],
min: 0, min: 0,
max: 100, max: 100,
startAngle: 360, startAngle: 360,
endAngle: 0, endAngle: 0,
itemStyle: { itemStyle: {
color: '#057EB9' color: '#057EB9'
}, },
axisLine: { axisLine: {
roundCap: false, roundCap: false,
lineStyle: { lineStyle: {
color: [ color: [
[0, '#075199'], [0, '#075199'],
[1, '#075199'] [1, '#075199']
], ],
width: fitChartSize(10) width: fitChartSize(10)
} }
}, },
progress: { progress: {
show: true, show: true,
roundCap: false, roundCap: false,
width: fitChartSize(10) width: fitChartSize(10)
}, },
pointer: { pointer: {
// 指针 // 指针
show: false show: false
}, },
axisTick: { axisTick: {
// 刻度 // 刻度
show: false show: false
}, },
splitLine: { splitLine: {
// 分割线 // 分割线
show: false show: false
}, },
axisLabel: { axisLabel: {
// 刻度标签 // 刻度标签
show: false show: false
}, },
detail: { detail: {
// 仪表盘详情 // 仪表盘详情
show: false show: false
}, },
data: [ data: [
{ {
value: 50 value: 50
} }
] ]
} }
] ]
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.work-box-3{ .work-box-3 {
width: vw(813); width: vw(813);
height: vh(380); height: vh(380);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%); background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
margin-top:vh(100); margin-top: vh(100);
margin-left:vw(10); margin-left: vw(10);
position:relative; position: relative;
z-index: 99; z-index: 99;
.work-box-1{ .work-box-1 {
width:vw(815); width: vw(815);
height:vh(588); height: vh(588);
// margin-top:vh(100); // margin-top:vh(100);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%); background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
position:relative; position: relative;
z-index:99; z-index: 99;
padding:0 vw(20); padding: 0 vw(20);
.list{ .list {
/* 滚动条整体样式 */ /* 滚动条整体样式 */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */ width: vw(4); /* 滚动条的宽度 */
} }
/* 滚动条轨道 */ /* 滚动条轨道 */
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */ background: 'transparent'; /* 轨道的背景色 */
} }
/* 滚动条滑块 */ /* 滚动条滑块 */
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */ background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */ border-radius: 5px; /* 滑块的圆角 */
} }
height:vh(510); height: vh(510);
overflow: auto; overflow: auto;
.li:nth-child(odd){ .li:nth-child(odd) {
background: rgba(3,78,153,0.3); background: rgba(3, 78, 153, 0.3);
}
.li:nth-child(even) {
background-color: transparent;
}
.li {
display: flex;
align-items: center;
justify-content: flex-start;
padding: vh(8) vh(10);
.label {
width: vw(60);
height: vh(24);
line-height: vh(24);
color: #fff;
border-radius: 2px 2px 2px 2px;
font-size: vw(14);
text-align: center;
display: inline-block;
margin-right: vw(10);
}
.label1 {
background: #2380fb;
}
.label2 {
background: #feae00;
}
.label3 {
background: #d9011b;
}
.time {
font-weight: 400;
font-size: vw(12);
color: rgba(255, 255, 255, 0.6);
line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: vw(30);
}
p {
font-weight: 400;
font-size: vw(15);
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
flex: 1;
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
}
}
.header {
position: relative;
margin: vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span {
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
}
.work-2-flex {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
height: vh(380);
overflow: hidden;
.chart-box {
display: flex;
justify-content: space-between;
padding: vw(20) vw(15);
height: vh(360);
padding-top: vh(35);
box-sizing: border-box;
.box-item {
flex: 1;
width: vw(140);
height: vh(140);
padding: vw(10);
.line-chart {
// width:100%;
// height:100%;
}
}
}
.header {
position: relative;
margin: vh(20);
} .title {
.li:nth-child(even){ margin: vh(5) auto;
background-color: transparent; width: vw(468);
} height: vh(32);
.li{ font-weight: 800;
display: flex; font-size: vw(16);
align-items: center; color: #fff;
justify-content: flex-start; display: flex;
padding:vh(8) vh(10); align-items: center;
.label{ justify-content: center;
width: vw(60); background-image: url('@/assets/images/title-4.png');
height: vh(24); background-size: 100% 100%;
line-height:vh(24); span {
color:#fff; font-weight: 800;
border-radius: 2px 2px 2px 2px; color: transparent;
font-size: vw(14); -webkit-background-clip: text;
text-align: center; background-clip: text;
display: inline-block; -webkit-text-fill-color: transparent;
margin-right: vw(10); background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
} }
.label1{ }
background: #2380FB; }
} .hd-list {
.label2{ display: flex;
background: #FEAE00; justify-content: center;
} position: relative;
.label3{ padding: 0 vw(20);
background: #D9011B; .h-icon {
} position: absolute;
.time{ left: vw(70);
font-weight: 400; top: 50%;
font-size: vw(12); transform: translateY(-50%);
color: rgba(255,255,255,0.6); width: vw(74);
line-height: 14px; height: vh(74);
text-align: left; }
font-style: normal; .item {
text-transform: none; display: flex;
margin-left:vw(30); width: vw(210);
} height: vh(58);
p{ line-height: vh(58);
font-weight: 400; padding-left: vw(10);
font-size: vw(15); text-align: center;
color: #FFFFFF; margin: 0 vw(15);
text-align: left; font-weight: 400;
font-style: normal; font-size: vw(14);
text-transform: none; color: rgba(255, 255, 255, 0.9);
flex: 1; text-align: left;
/*1. 先强制一行内显示文本*/ font-style: normal;
white-space: nowrap; text-transform: none;
/*2. 超出的部分隐藏*/ span {
overflow: hidden; font-size: vw(24);
/*3. 文字用省略号替代超出的部分*/ position: relative;
text-overflow: ellipsis; top: vh(2);
} margin-left: vw(5);
} }
} .color1 {
.header { color: #02f9fa;
position: relative; }
margin:vh(20); }
.title { .item1 {
margin: vh(5) auto; background-image: url('@/assets/images/work-n-bg-1.png');
width: vw(468); background-size: 100% 100%;
height: vh(32); }
font-weight: 800; .item2 {
font-size: vw(16); background-image: url('@/assets/images/work-n-bg-2.png');
color: #fff; background-size: 100% 100%;
display: flex; }
align-items: center; .item3 {
justify-content: center; background-image: url('@/assets/images/work-n-bg-3.png');
background-image: url('@/assets/images/title-4.png'); background-size: 100% 100%;
background-size: 100% 100%; }
span{ }
font-weight: 800; }
color: transparent; }
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
}
.work-2-flex{
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
height:vh(380);
overflow:hidden;
.chart-box{
display: flex;
justify-content: space-between;
padding:vw(20) vw(15);
height:vh(360);
padding-top:vh(35);
box-sizing: border-box;
.box-item{
flex:1;
width:vw(140);
height:vh(140);
padding:vw(10);
.line-chart{
// width:100%;
// height:100%;
}
}
}
.header {
position: relative;
margin:vh(20);
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span{
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
}
.hd-list{
display: flex;
justify-content: center;
position:relative;
padding: 0 vw(20);
.h-icon{
position:absolute;
left:vw(70);
top:50%;
transform: translateY(-50%);
width:vw(74);
height:vh(74);
}
.item{
display:flex;
width:vw(210);
height:vh(58);
line-height: vh(58);
padding-left:vw(10);
text-align: center;
margin:0 vw(15);
font-weight: 400;
font-size: vw(14);
color: rgba(255,255,255,0.9);
text-align: left;
font-style: normal;
text-transform: none;
span{
font-size: vw(24);
position: relative;
top:vh(2);
margin-left:vw(5);
}
.color1{
color:#02F9FA;
}
}
.item1{
background-image: url('@/assets/images/work-n-bg-1.png');
background-size: 100% 100%;
}
.item2{
background-image: url('@/assets/images/work-n-bg-2.png');
background-size: 100% 100%;
}
.item3{
background-image: url('@/assets/images/work-n-bg-3.png');
background-size: 100% 100%;
}
}
}
}
</style> </style>