大屏图表和表格样式修改
This commit is contained in:
parent
e804ef38f4
commit
c6c2844a5b
|
|
@ -55,4 +55,36 @@ export const getPublishNum = (query?: any): AxiosPromise<any> => {
|
|||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getConclusion = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/grade/conclusion',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getMonthEvaluation = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/month/evaluation',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getPublish = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/publish',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getHalfMonth = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/month/intervene-warn',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
|
@ -46,14 +46,14 @@
|
|||
</div>
|
||||
|
||||
<div class="item-center-2 boxall">
|
||||
<div class="alltitle">标题名称</div>
|
||||
<div class="alltitle">风险统计</div>
|
||||
<div class="boxnav">
|
||||
<v-chart :option="centerBar1Option" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-center-2 boxall">
|
||||
<div class="alltitle">标题名称</div>
|
||||
<div class="alltitle">近12月测评数统计</div>
|
||||
<div class="boxnav">
|
||||
<v-chart :option="centerLine2Option" autoresize />
|
||||
</div>
|
||||
|
|
@ -62,18 +62,18 @@
|
|||
|
||||
<div class="item-right">
|
||||
<div class="item-right-2 boxall">
|
||||
<div class="alltitle">标题名称</div>
|
||||
<div class="alltitle">最新测评数据</div>
|
||||
<div class="boxnav">
|
||||
<div class="item-th">
|
||||
<span>字段1</span>
|
||||
<span>字段2</span>
|
||||
<span>字段3</span>
|
||||
<span>场次名称</span>
|
||||
<span>完成数量</span>
|
||||
<span>时间</span>
|
||||
</div>
|
||||
<vue3-seamless-scroll :list="list" class="scroll">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.date }}</span>
|
||||
<span>{{ item.date }}</span>
|
||||
<span>{{ item.sessionName }}</span>
|
||||
<span>{{ item.value }} / {{ item.total }}</span>
|
||||
<span>{{ item.expireTime }}</span>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
<!-- <table border="0" cellspacing="0">
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
</div>
|
||||
|
||||
<div class="item-right-1 boxall">
|
||||
<div class="alltitle">标题名称</div>
|
||||
<div class="alltitle">预警干预统计</div>
|
||||
<div class="boxnav">
|
||||
<v-chart :option="rightBar1Option" autoresize />
|
||||
</div>
|
||||
|
|
@ -154,7 +154,7 @@ import { PieChart, BarChart } from "echarts/charts";
|
|||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
|
||||
import VChart from 'vue-echarts'
|
||||
|
||||
import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade } from '@/api/index'
|
||||
import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade, getConclusion, getMonthEvaluation, getPublish, getHalfMonth } from '@/api/index'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
|
|
@ -180,44 +180,11 @@ function time() {
|
|||
showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
|
||||
}
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
title: "展示数据第1条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第2条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第3条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第4条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第5条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第6条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第7条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第8条",
|
||||
date: Date.now(),
|
||||
},
|
||||
{
|
||||
title: "展示数据第9条",
|
||||
date: Date.now(),
|
||||
},
|
||||
]);
|
||||
const list = ref([])
|
||||
async function getPublishData() {
|
||||
const res = await getPublish()
|
||||
list.value = res.data
|
||||
}
|
||||
|
||||
const userNum = ref(0)
|
||||
async function getUserNumData() {
|
||||
|
|
@ -256,6 +223,10 @@ onMounted(() => {
|
|||
getPublishNumData()
|
||||
getGradeData()
|
||||
getWarn4AllData()
|
||||
getConclusionData()
|
||||
getMonthEvaluationData()
|
||||
getPublishData()
|
||||
getHalfMonthData()
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -423,36 +394,37 @@ const centerBar1Option = ref({
|
|||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
}, "grid": {
|
||||
"top": "20%",
|
||||
"right": "50",
|
||||
"bottom": "20",
|
||||
"left": "30",
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right: "50",
|
||||
bottom: "20",
|
||||
left: "30",
|
||||
},
|
||||
legend: {
|
||||
data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6'],
|
||||
right: 'center', width: '100%',
|
||||
data: [],
|
||||
right: 'center',
|
||||
width: '100%',
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
},
|
||||
"xAxis": [
|
||||
xAxis: [
|
||||
{
|
||||
"type": "category",
|
||||
data: ['2016', '2017', '2018', '2019'],
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
||||
axisLabel: {
|
||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||||
},
|
||||
|
||||
},
|
||||
],
|
||||
"yAxis": [
|
||||
{
|
||||
"type": "value",
|
||||
"name": "单位万",
|
||||
"name": "",
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
|
@ -466,19 +438,17 @@ const centerBar1Option = ref({
|
|||
},
|
||||
axisLine: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
lineStyle: { color: 'rgba(255,255,255,.1)' }
|
||||
},//左线色
|
||||
|
||||
},
|
||||
{
|
||||
"type": "value",
|
||||
"name": "增速",
|
||||
"name": "",
|
||||
"show": true,
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
fontSize: 14,
|
||||
formatter: "{value} %",
|
||||
color: "rgba(255,255,255,.6)"
|
||||
},
|
||||
axisTick: { show: false },
|
||||
|
|
@ -488,9 +458,9 @@ const centerBar1Option = ref({
|
|||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "字段1",
|
||||
"name": "未见异常",
|
||||
"type": "bar",
|
||||
"data": [36.6, 38.80, 40.84, 41.60],
|
||||
"data": [],
|
||||
"barWidth": "15%",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
|
|
@ -507,9 +477,9 @@ const centerBar1Option = ref({
|
|||
"barGap": "0.2"
|
||||
},
|
||||
{
|
||||
"name": "字段2",
|
||||
"name": "低风险",
|
||||
"type": "bar",
|
||||
"data": [14.8, 14.1, 15, 16.30],
|
||||
"data": [],
|
||||
"barWidth": "15%",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
|
|
@ -526,9 +496,9 @@ const centerBar1Option = ref({
|
|||
"barGap": "0.2"
|
||||
},
|
||||
{
|
||||
"name": "字段3",
|
||||
"name": "中风险",
|
||||
"type": "bar",
|
||||
"data": [9.2, 9.1, 9.85, 8.9],
|
||||
"data": [],
|
||||
"barWidth": "15%",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
|
|
@ -545,11 +515,11 @@ const centerBar1Option = ref({
|
|||
"barGap": "0.2"
|
||||
},
|
||||
{
|
||||
"name": "字段4",
|
||||
"name": "高风险",
|
||||
"type": "line",
|
||||
smooth: true,
|
||||
"yAxisIndex": 1,
|
||||
"data": [0, 6.01, 5.26, 1.48],
|
||||
"data": [],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2
|
||||
|
|
@ -565,11 +535,11 @@ const centerBar1Option = ref({
|
|||
}
|
||||
,
|
||||
{
|
||||
"name": "字段5",
|
||||
"name": "重大风险",
|
||||
"type": "line",
|
||||
"yAxisIndex": 1,
|
||||
|
||||
"data": [0, -4.73, 6.38, 8.67],
|
||||
"data": [],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2
|
||||
|
|
@ -582,29 +552,40 @@ const centerBar1Option = ref({
|
|||
}
|
||||
},
|
||||
"smooth": true
|
||||
},
|
||||
{
|
||||
"name": "字段6",
|
||||
"type": "line",
|
||||
"yAxisIndex": 1,
|
||||
|
||||
"data": [0, -1.09, 8.24, -9.64],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2
|
||||
},
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#fbc30d",
|
||||
|
||||
}
|
||||
},
|
||||
"smooth": true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
async function getConclusionData() {
|
||||
const res = await getConclusion()
|
||||
let noneNum: any[] = []
|
||||
let lowNum: any[] = []
|
||||
let middleNum: any[] = []
|
||||
let highNum: any[] = []
|
||||
let majorNum: any[] = []
|
||||
let xAxisData: any[] = []
|
||||
|
||||
res.data.forEach(v => {
|
||||
xAxisData.push(v.name)
|
||||
|
||||
noneNum.push(v.noneNum)
|
||||
lowNum.push(v.lowNum)
|
||||
middleNum.push(v.middleNum)
|
||||
highNum.push(v.highNum)
|
||||
majorNum.push(v.majorNum)
|
||||
})
|
||||
|
||||
let categoryData = ['未见异常', '低风险', '中风险', '高风险', '重大风险']
|
||||
|
||||
centerBar1Option.value.legend.data = categoryData
|
||||
centerBar1Option.value.xAxis[0].data = xAxisData
|
||||
centerBar1Option.value.series[0].data = noneNum
|
||||
centerBar1Option.value.series[1].data = lowNum
|
||||
centerBar1Option.value.series[2].data = middleNum
|
||||
centerBar1Option.value.series[3].data = highNum
|
||||
centerBar1Option.value.series[4].data = majorNum
|
||||
}
|
||||
|
||||
const centerLine2Option = ref({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -615,20 +596,20 @@ const centerLine2Option = ref({
|
|||
left: '0',
|
||||
top: '30',
|
||||
right: '10',
|
||||
bottom: '-20',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['字段1', '字段2'],
|
||||
right: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
// itemGap: 35
|
||||
},
|
||||
// legend: {
|
||||
// data: ['字段1', '字段2'],
|
||||
// right: 'center',
|
||||
// top: 0,
|
||||
// textStyle: {
|
||||
// color: "#fff"
|
||||
// },
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 10,
|
||||
// // itemGap: 35
|
||||
// },
|
||||
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
|
|
@ -648,17 +629,13 @@ const centerLine2Option = ref({
|
|||
|
||||
},
|
||||
|
||||
data: ['17年3月', '17年6月', '17年9月', '17年12月', '18年3月', '18年6月', '18年9月', '18年12月', '19年3月', '19年6月', '19年9月', '19年12月']
|
||||
data: []
|
||||
|
||||
}, {
|
||||
|
||||
axisPointer: { show: false },
|
||||
axisLine: { show: false },
|
||||
position: 'bottom',
|
||||
offset: 20,
|
||||
|
||||
|
||||
|
||||
}],
|
||||
|
||||
yAxis: [{
|
||||
|
|
@ -671,7 +648,7 @@ const centerLine2Option = ref({
|
|||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 14,
|
||||
|
|
@ -686,7 +663,7 @@ const centerLine2Option = ref({
|
|||
}],
|
||||
series: [
|
||||
{
|
||||
name: '字段1',
|
||||
name: '时间',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
|
|
@ -717,46 +694,26 @@ const centerLine2Option = ref({
|
|||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10]
|
||||
data: []
|
||||
|
||||
}, {
|
||||
name: '字段2',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
|
||||
normal: {
|
||||
color: 'rgba(255, 128, 128, 1)',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 128, 128,.2)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255, 128, 128, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 128, 128, 1)',
|
||||
borderColor: 'rgba(255, 128, 128, .1)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
async function getMonthEvaluationData() {
|
||||
const res = await getMonthEvaluation()
|
||||
|
||||
let xAxisData = []
|
||||
let seriesData = []
|
||||
res.data.forEach(v => {
|
||||
xAxisData.push(v.name)
|
||||
seriesData.push(v.value)
|
||||
});
|
||||
|
||||
centerLine2Option.value.xAxis[0].data = xAxisData
|
||||
centerLine2Option.value.series[0].data = seriesData
|
||||
}
|
||||
|
||||
const rightBar1Option = ref({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -768,7 +725,7 @@ const rightBar1Option = ref({
|
|||
"left": "10%",
|
||||
},
|
||||
legend: {
|
||||
data: ['字段1', '字段2'],
|
||||
data: ['预警数', '干预数'],
|
||||
right: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
|
|
@ -781,7 +738,7 @@ const rightBar1Option = ref({
|
|||
{
|
||||
"type": "category",
|
||||
|
||||
data: ['2016', '2017', '2018', '2019'],
|
||||
data: [],
|
||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
||||
axisLabel: {
|
||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||||
|
|
@ -792,7 +749,7 @@ const rightBar1Option = ref({
|
|||
"yAxis": [
|
||||
{
|
||||
"type": "value",
|
||||
"name": "单位1",
|
||||
"name": "",
|
||||
splitLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
"axisLabel": {
|
||||
|
|
@ -805,12 +762,12 @@ const rightBar1Option = ref({
|
|||
},
|
||||
{
|
||||
"type": "value",
|
||||
"name": "单位2",
|
||||
"name": "",
|
||||
"show": true,
|
||||
axisTick: { show: false },
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
formatter: "{value} %",
|
||||
formatter: "{value}",
|
||||
color: "rgba(255,255,255,.6)"
|
||||
},
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
||||
|
|
@ -818,13 +775,10 @@ const rightBar1Option = ref({
|
|||
},
|
||||
],
|
||||
"series": [
|
||||
|
||||
{
|
||||
"name": "字段1",
|
||||
"name": "预警数",
|
||||
"type": "bar",
|
||||
"data": [
|
||||
18453.35, 20572.22, 24274.22, 30500.00
|
||||
],
|
||||
"data": [],
|
||||
"barWidth": "20%",
|
||||
|
||||
"itemStyle": {
|
||||
|
|
@ -842,11 +796,11 @@ const rightBar1Option = ref({
|
|||
"barGap": "0"
|
||||
},
|
||||
{
|
||||
"name": "字段2",
|
||||
"name": "干预数",
|
||||
"type": "line",
|
||||
"yAxisIndex": 1,
|
||||
|
||||
"data": [0, 11.48, 18.00, 25.65],
|
||||
"data": [],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2
|
||||
|
|
@ -863,6 +817,24 @@ const rightBar1Option = ref({
|
|||
]
|
||||
})
|
||||
|
||||
async function getHalfMonthData() {
|
||||
const res = await getHalfMonth()
|
||||
let xAxisData = []
|
||||
let warnData = []
|
||||
let interveneData = []
|
||||
|
||||
res.data.forEach(v => {
|
||||
xAxisData.push(v.name)
|
||||
warnData.push(v.value)
|
||||
interveneData.push(v.spareValue)
|
||||
});
|
||||
|
||||
rightBar1Option.value.xAxis[0].data = xAxisData
|
||||
|
||||
rightBar1Option.value.series[0].data = warnData
|
||||
rightBar1Option.value.series[1].data = interveneData
|
||||
}
|
||||
|
||||
const rightPie2Option = ref({
|
||||
title: {
|
||||
text: '',
|
||||
|
|
@ -1194,8 +1166,16 @@ li {
|
|||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
span {
|
||||
flex: 0 1 33.33%;
|
||||
span:nth-child(1) {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
flex: 0 1 20%;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
flex: 0 1 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1214,8 +1194,16 @@ li {
|
|||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
span {
|
||||
flex: 0 1 33.33%;
|
||||
span:nth-child(1) {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
flex: 0 1 20%;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
flex: 0 1 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue