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 qs from 'qs'
import { useRouter } from 'vue-router'
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>
.box-4-content {
position: relative;
margin-top: vh(10);
margin-left: vw(10);
margin: vh(10);
width: vw(300);
height: vh(1060);
background-image: url('@/assets/images/bg-1.png');

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

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

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

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

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

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

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

@@ -2,28 +2,28 @@
<div class="traffic-box-1">
<div class="title-num">
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="">总路段
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
</div>
<div class="item-num"><span><countup endVal="88895" /></span> </div>
</div>
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="">总路段
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
</div>
<div class="item-num"><span><countup endVal="88895" /></span></div>
</div>
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="">总路段
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
</div>
<div class="item-num"><span><countup endVal="88895" /></span></div>
</div>
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="">总路段
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
</div>
<div class="item-num"><span><countup endVal="88895" /></span></div>
</div>
</div>
<div class="list-item">
@@ -33,7 +33,6 @@
<v-chart class="chart" :option="option1" autoresize />
</div>
</div>
</div>
</div>
</template>
@@ -43,10 +42,10 @@
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark');
provide(THEME_KEY, 'dark')
const option1 = ref({
backgroundColor: 'transparent',
tooltip: {
@@ -65,7 +64,7 @@
show: true,
lineStyle: {
borderColor: '#fff',
width:5,
width: 5
},
textStyle: {
color: '#fff',
@@ -76,29 +75,29 @@
width: '100%',
borderWidth: 0.5,
height: 5,
backgroundColor: '1',
backgroundColor: '1'
},
a: {
width: fitChartSize(75),
align: 'left',
fontSize:fitChartSize(16),
fontSize: fitChartSize(16)
// backgroundColor:'1'
// color:'1',
// borderColor:'#eee',
// borderWidth:2
},
}
}
},
formatter: (e) => {
let ratio = 0
let value = 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) {
ratio = (item.value*100/3799).toFixed(0)
ratio = ((item.value * 100) / 3799).toFixed(0)
value = item.value
}
});
})
}
// return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
@@ -106,7 +105,6 @@
},
itemStyle: {
// color:'#fff'
},
backgroundColor: 'rgba(0,77,136,0.6)'
},
@@ -129,7 +127,7 @@
label: {
show: false,
position: 'center',
fontWeight: 'bold',
fontWeight: 'bold'
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
@@ -183,19 +181,18 @@
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
{ value: 888, name: '其他' }
]
},
],
});
}
]
})
</script>
<style lang="scss" scoped>
.traffic-box-1 {
width: vw(815);
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;
margin-top: vh(100);
position: relative;
@@ -208,10 +205,9 @@
.item-li {
width: vw(388);
height: vh(420);
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.title-3 {
margin-left: vw(10);
position: relative;
@@ -260,7 +256,6 @@
width: vw(8);
height: vh(8);
}
}
.item-num {
width: vw(134);
@@ -269,7 +264,7 @@
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02F9FA;
color: #02f9fa;
text-align: left;
font-style: normal;
text-transform: none;

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

@@ -3,7 +3,7 @@
<!-- 1 -->
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>最新工单</span> </div>
<div class="title"> <span>今日工单</span> </div>
</div>
<div class="hd-list">
<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
@@ -30,7 +30,6 @@
<div class="check-label">
<span class="active">全部</span>
<span>已完成总数</span>
</div>
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
@@ -43,25 +42,34 @@
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
<el-progress
:percentage="50"
stroke-linecap="square"
:stroke-width="fitChartSize(15)" color="#2380FB"></el-progress>
:stroke-width="fitChartSize(15)"
color="#2380FB"
></el-progress>
</div>
</div>
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
<el-progress
:percentage="50"
stroke-linecap="square"
:stroke-width="fitChartSize(15)" color="#D9011B"></el-progress>
:stroke-width="fitChartSize(15)"
color="#D9011B"
></el-progress>
</div>
</div>
<div class="p-item">
<span>普通</span>
<div class="box-1">
<el-progress :percentage="50"
<el-progress
:percentage="50"
stroke-linecap="square"
:stroke-width="fitChartSize(15)" color="#FEAE00"></el-progress>
:stroke-width="fitChartSize(15)"
color="#FEAE00"
></el-progress>
</div>
</div>
</div>
@@ -70,7 +78,7 @@
</div>
<div class="work-2-flex">
<div class="header">
<div class="title"> <span>最新工单</span> </div>
<div class="title"> <span>不同景区工单占比</span> </div>
</div>
<div class="chart-box flex">
<div class="lt-chart">
@@ -109,11 +117,11 @@
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark');
const customColor = ref('#2380FB');
provide(THEME_KEY, 'dark')
const customColor = ref('#2380FB')
const option1 = ref({
backgroundColor: 'transparent',
tooltip: {
@@ -132,7 +140,7 @@
show: true,
lineStyle: {
borderColor: '#fff',
width:5,
width: 5
},
textStyle: {
color: '#fff',
@@ -143,29 +151,29 @@
width: '100%',
borderWidth: 0.5,
height: 5,
backgroundColor: '1',
backgroundColor: '1'
},
a: {
width: fitChartSize(200),
align: 'left',
fontSize:fitChartSize(16),
fontSize: fitChartSize(16)
// backgroundColor:'1'
// color:'1',
// borderColor:'#eee',
// borderWidth:2
},
}
}
},
formatter: (e) => {
let ratio = 0
let value = 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) {
ratio = (item.value*100/3799).toFixed(0)
ratio = ((item.value * 100) / 3799).toFixed(0)
value = item.value
}
});
})
}
// return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
@@ -173,7 +181,6 @@
},
itemStyle: {
// color:'#fff'
},
backgroundColor: 'rgba(0,77,136,0.6)'
},
@@ -196,7 +203,7 @@
label: {
show: false,
position: 'center',
fontWeight: 'bold',
fontWeight: 'bold'
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
@@ -250,11 +257,10 @@
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
{ value: 888, name: '其他' }
]
}
]
},
],
})
const option2 = ref({
backgroundColor: 'transparent',
@@ -274,7 +280,7 @@
show: true,
lineStyle: {
borderColor: '#fff',
width:5,
width: 5
},
textStyle: {
color: '#fff',
@@ -285,29 +291,29 @@
width: '100%',
borderWidth: 0.5,
height: 5,
backgroundColor: '1',
backgroundColor: '1'
},
a: {
width: fitChartSize(100),
align: 'left',
fontSize:fitChartSize(16),
fontSize: fitChartSize(16)
// backgroundColor:'1'
// color:'1',
// borderColor:'#eee',
// borderWidth:2
},
}
}
},
formatter: (e) => {
let ratio = 0
let value = 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) {
ratio = (item.value*100/3799).toFixed(0)
ratio = ((item.value * 100) / 3799).toFixed(0)
value = item.value
}
});
})
}
// return `${e} ${ratio}%
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
@@ -315,7 +321,6 @@
},
itemStyle: {
// color:'#fff'
},
backgroundColor: 'rgba(0,77,136,0.6)'
},
@@ -338,7 +343,7 @@
label: {
show: false,
position: 'center',
fontWeight: 'bold',
fontWeight: 'bold'
// formatter: function (o) {
// let data = o.data.value
// return `{value|${data}}` + '\n' + `{name|整改率}`
@@ -392,11 +397,10 @@
{ value: 135, name: '异常状况4' },
{ value: 100, name: '异常状况5' },
{ value: 777, name: '异常状况6' },
{ value: 888, name: '其他' },
{ value: 888, name: '其他' }
]
}
]
},
],
})
const optionLine = ref({
backgroundColor: 'transparent',
@@ -405,7 +409,7 @@
top: '20',
bottom: '0',
left: '4%',
containLabel: true,
containLabel: true
},
xAxis: {
nameLocation: 'middle',
@@ -414,16 +418,27 @@
axisLabel: {
fontSize: 10,
interval: 0, // 显示所有标签
rotate: 0, // 旋转标签45度
rotate: 0 // 旋转标签45度
},
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
data: [
'10:00',
'10:00',
'10:00',
'10:00',
'10:00',
'10:00',
'10:00',
'10:00',
'10:00',
'10:00'
],
axisTisk: {
show: true,
// 设置刻度长度
length: 1,
lineStyle: {
type: 'dashed', // 设置为虚线
width:0,
width: 0
}
},
axisLine: {
@@ -439,7 +454,7 @@
interval: 1000,
axisLabel: {
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
color: '#eee',
color: '#eee'
},
splitLine: {
show: true,
@@ -456,7 +471,7 @@
type: 'line',
smooth: true,
label: {
show:false,//隐藏坐标点
show: false //隐藏坐标点
},
itemStyle: {
color: 'transparent'
@@ -491,13 +506,12 @@
{
offset: 1,
color: '#009DFF'
},
}
]),
width:2,
width: 2
}
}
]
})
</script>
@@ -525,20 +539,20 @@
span {
min-width: vw(55);
padding: vw(5);
background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
border-radius: vw(50);
// border: 1px solid rgba(0,114,220,0.3);
margin-left: vw(5);
display: inline-block;
font-weight: 400;
font-size: vw(13);
color: #0084FF;
color: #0084ff;
text-align: center;
font-style: normal;
text-transform: none;
}
.active {
background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
background: linear-gradient(270deg, #37d8fc 0%, #0084ff 100%);
border-radius: vw(50);
border: 1px solid rgba(0, 114, 220, 0.3);
color: #fff;
@@ -553,7 +567,7 @@
position: relative;
z-index: 99;
.work-2-flex {
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
height: vh(490);
overflow: hidden;
@@ -566,10 +580,8 @@
width: vw(740);
min-height: vw(336);
padding: vw(20);
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.box-press {
padding: vw(30);
padding-top: vh(40);
@@ -581,7 +593,7 @@
span {
font-weight: bold;
font-size: vw(14);
color: #FFFFFF;
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
@@ -603,10 +615,9 @@
.chart-des {
width: vw(224);
height: vh(312);
background:#0A4190;
background: #0a4190;
.t-item:nth-child(odd) {
background: rgba(0, 150, 255, 0.3);
}
.t-item:nth-child(even) {
background-color: transparent;
@@ -626,7 +637,7 @@
p {
font-weight: 400;
font-size: vw(15);
color: #FFFFFF;
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
@@ -639,16 +650,16 @@
text-overflow: ellipsis;
}
.bgColor1 {
background:#D9011B;
background: #d9011b;
}
.bgColor2 {
background:#FEAE00;
background: #feae00;
}
.bgColor3 {
background:#2380FB;
background: #2380fb;
}
.bgColor4 {
background:#495C77;
background: #495c77;
}
}
.t-des {
@@ -656,7 +667,7 @@
padding: vw(10);
font-weight: 400;
font-size: vw(13);
color: #02F9FA;
color: #02f9fa;
display: flex;
text-align: left;
font-style: normal;
@@ -702,7 +713,7 @@
top: 50%;
transform: translateY(-50%);
width: vw(74);
height:vh(74);
height: auto;
}
.item {
display: flex;
@@ -725,7 +736,7 @@
margin-left: vw(5);
}
.color1 {
color:#02F9FA;
color: #02f9fa;
}
}
.item1 {

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

@@ -35,7 +35,7 @@
<div class="work-box-1">
<!-- 最新工单 -->
<div class="header">
<div class="title"> <span>最新工单</span> </div>
<div class="title"> <span>消息情况</span> </div>
</div>
<!-- 列表 -->
<div class="list">
@@ -54,9 +54,9 @@
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
provide(THEME_KEY, 'dark');
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide } from 'vue'
provide(THEME_KEY, 'dark')
const option = ref({
backgroundColor: 'transparent',
title: [
@@ -194,7 +194,7 @@
.work-box-3 {
width: vw(813);
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;
margin-top: vh(100);
margin-left: vw(10);
@@ -204,7 +204,7 @@
width: vw(815);
height: vh(588);
// 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;
position: relative;
z-index: 99;
@@ -227,7 +227,6 @@
overflow: auto;
.li:nth-child(odd) {
background: rgba(3, 78, 153, 0.3);
}
.li:nth-child(even) {
background-color: transparent;
@@ -249,13 +248,13 @@
margin-right: vw(10);
}
.label1 {
background: #2380FB;
background: #2380fb;
}
.label2 {
background: #FEAE00;
background: #feae00;
}
.label3 {
background: #D9011B;
background: #d9011b;
}
.time {
font-weight: 400;
@@ -270,7 +269,7 @@
p {
font-weight: 400;
font-size: vw(15);
color: #FFFFFF;
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
@@ -311,7 +310,7 @@
}
}
.work-2-flex {
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
height: vh(380);
overflow: hidden;
.chart-box {
@@ -392,7 +391,7 @@
margin-left: vw(5);
}
.color1 {
color:#02F9FA;
color: #02f9fa;
}
}
.item1 {