main
parent
ff2ae358d9
commit
6e38acdbd6
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
Binary file not shown.
|
After Width: | Height: | Size: 905 B |
Binary file not shown.
|
After Width: | Height: | Size: 913 B |
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
File diff suppressed because one or more lines are too long
|
|
@ -123,7 +123,7 @@ aside {
|
||||||
|
|
||||||
//main-container全局样式
|
//main-container全局样式
|
||||||
.app-container {
|
.app-container {
|
||||||
height: 80px;
|
// height: 80px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<div class="bar-div" id="bar">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getCharts();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const getCharts = () => {
|
||||||
|
var dom = document.getElementById("bar");
|
||||||
|
if (dom) {
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '1%',
|
||||||
|
right: '8%',
|
||||||
|
bottom: '8%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
position: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
position: 'left',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '2023资产',
|
||||||
|
type: 'bar',
|
||||||
|
// xAxisIndex:1,
|
||||||
|
data: [182, 234, 290, 104, 131, 100],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#5470c6",
|
||||||
|
},
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2022资产',
|
||||||
|
type: 'bar',
|
||||||
|
// xAxisIndex:1,
|
||||||
|
data: [193, 234, 310, 121, 134, 681],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#91cc75",
|
||||||
|
},
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div class="device-div">
|
||||||
|
<div v-for="(item, index) of deviceList" :key="index">
|
||||||
|
<img :src="item.imgUrl" alt="" width="60">
|
||||||
|
<font class="num" :style="{'color': item.color}">{{ item.num }}</font>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import IconBy from '@/assets/images/icon-by.png';
|
||||||
|
import IconWx from '@/assets/images/icon-wx.png';
|
||||||
|
import IconXj from '@/assets/images/icon-xj.png';
|
||||||
|
import IconPd from '@/assets/images/icon-pd.png';
|
||||||
|
const deviceList = [
|
||||||
|
{
|
||||||
|
name: '资产总数',
|
||||||
|
num: '8909',
|
||||||
|
color: '#0f40f5',
|
||||||
|
imgUrl: IconPd
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '维修未完成总数',
|
||||||
|
num: '89',
|
||||||
|
color: '#e99f81',
|
||||||
|
imgUrl: IconWx
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待巡检执行总数',
|
||||||
|
num: '58',
|
||||||
|
color: '#81b337',
|
||||||
|
imgUrl: IconXj
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待保养执行总数',
|
||||||
|
num: '46',
|
||||||
|
color: '#347caf',
|
||||||
|
imgUrl: IconBy
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
>div {
|
||||||
|
width: 24%;
|
||||||
|
height:80%;
|
||||||
|
// border: 1px solid red;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
.num {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
<template>
|
||||||
|
<div class="line-div" id="line">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getCharts();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const getCharts = () => {
|
||||||
|
var dom = document.getElementById("line");
|
||||||
|
if (dom) {
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '5%',
|
||||||
|
right: '8%',
|
||||||
|
// bottom: '2%',
|
||||||
|
height: '80%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||||||
|
}
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
position: 'bottom',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '生产数据',
|
||||||
|
type: 'bar',
|
||||||
|
// xAxisIndex:1,
|
||||||
|
data: [182, 234, 290, 104, 131, 100,182, 234, 290, 104, 131, 100],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#5470c6",
|
||||||
|
},
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '销售数据',
|
||||||
|
type: 'line',
|
||||||
|
// xAxisIndex:1,
|
||||||
|
data: [193, 234, 310, 121, 134, 181,193, 234, 310, 121, 134, 181],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#91cc75",
|
||||||
|
},
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
<template>
|
||||||
|
<div id="map" class="map-div"></div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import chinaMap from '@/assets/json/china.json'
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
echarts.registerMap('china', { geoJSON: chinaMap })
|
||||||
|
getCharts();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const getCharts = () => {
|
||||||
|
var dom = document.getElementById("map");
|
||||||
|
if (dom) {
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var outname = ['南海诸岛', '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门']
|
||||||
|
var outvalue = [80, 524, 113, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 94, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 6398, 41, 210, 484, 404, 22, 43, 25, 225]
|
||||||
|
var outdata = []
|
||||||
|
var scatter = [[110.81, 33.40, 99], [116.55, 40.01, 77], [113.11, 28.40, 34], [106.44, 29.50, 112], [112.85, 38.95, 6], [82.78, 43.27, 50]]
|
||||||
|
var lineToLf = [
|
||||||
|
{
|
||||||
|
name: '11',
|
||||||
|
coords: [[110.81, 33.40], [116.55, 40.01]],
|
||||||
|
lineStyle: { color: '#c1bb1f' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '22',
|
||||||
|
coords: [[113.11, 28.40], [116.55, 40.01]],
|
||||||
|
lineStyle: { color: '#f9b207' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '33',
|
||||||
|
coords: [[106.44, 29.50], [116.55, 40.01]],
|
||||||
|
lineStyle: { color: '#3eef1d' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '44',
|
||||||
|
coords: [[112.85, 38.95], [116.55, 40.01]],
|
||||||
|
lineStyle: { color: '#3eef1d' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '55',
|
||||||
|
coords: [[82.78, 43.27], [116.55, 40.01]],
|
||||||
|
lineStyle: { color: '#3eef1d' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
|
||||||
|
for (var i = 0; i < outname.length; i++) {
|
||||||
|
outdata.push({
|
||||||
|
name: outname[i],
|
||||||
|
value: outvalue[i]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (params) {
|
||||||
|
return ' ' + params.name + ' ' + params.value + '人 '
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
visualMap: {
|
||||||
|
type: 'continuous',
|
||||||
|
text: ['', ''],
|
||||||
|
showLabel: true,
|
||||||
|
left: '50',
|
||||||
|
min: 0,
|
||||||
|
max: 50,
|
||||||
|
seriesIndex: [0],
|
||||||
|
inRange: {
|
||||||
|
color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096']
|
||||||
|
},
|
||||||
|
|
||||||
|
outOfRange: {
|
||||||
|
color: ['#999999']
|
||||||
|
},
|
||||||
|
splitNumber: 0
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: 'china',
|
||||||
|
show: true,
|
||||||
|
roam: false,
|
||||||
|
label: {
|
||||||
|
emphasis: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// borderColor: 'rgba(0,63,140,0.2)',
|
||||||
|
// shadowColor: 'rgba(0,63,140,0.2)',
|
||||||
|
// shadowOffsetY: 20,
|
||||||
|
// shadowBlur: 30
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
aspectScale: 0.75,
|
||||||
|
zoom:1.2,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: '#B2CAE0',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#FFAE00'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: null,
|
||||||
|
borderWidth: 3,
|
||||||
|
shadowColor: 'rgba(0,0,0,.2)',
|
||||||
|
shadowOffsetX: 5,
|
||||||
|
shadowOffsetY: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
data: outdata
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '散点',
|
||||||
|
type: 'effectScatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
showEffectOn: 'render', // 加载完毕显示特效
|
||||||
|
top: 10,
|
||||||
|
bottom: 10,
|
||||||
|
zlevel: 2,
|
||||||
|
|
||||||
|
rippleEffect: {
|
||||||
|
number: 5, // 波纹数量
|
||||||
|
period: 4, // 动画周期 数值越大，波动越慢
|
||||||
|
scale: 3.5, // 动画中波纹的最大缩放比例
|
||||||
|
brushType: 'stroke'
|
||||||
|
},
|
||||||
|
data: scatter.map((it) => {
|
||||||
|
return {
|
||||||
|
name: 'cccccccc', value: it,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#f9b207', // 如果想颜色不一样 就换成这个，并且 在上面color数组中修改，添加想要的颜色，--colorF()
|
||||||
|
areaColor: '#f9b207'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
symbolSize: function (val) {
|
||||||
|
return val[2] / 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 地图线的动画效果
|
||||||
|
{
|
||||||
|
type: 'lines',
|
||||||
|
zlevel: 2,
|
||||||
|
symbol: ['none', 'arrow'],
|
||||||
|
// 自定义图标
|
||||||
|
effect: {
|
||||||
|
show: true,
|
||||||
|
period: 6,
|
||||||
|
trailLength: 0,
|
||||||
|
symbol: planePath,
|
||||||
|
symbolSize: 15
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'a6c84c',
|
||||||
|
width: 1,
|
||||||
|
opacity: 0.6,
|
||||||
|
curveness: 0.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 默认图标
|
||||||
|
// effect: {
|
||||||
|
// show: true,
|
||||||
|
// period: 4, // 箭头指向速度，值越小速度越快
|
||||||
|
// trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
|
||||||
|
// symbol: 'arrow', // 箭头图标
|
||||||
|
// symbolSize: 3, // 图标大小
|
||||||
|
// },
|
||||||
|
// lineStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: '#f9b207',
|
||||||
|
// width: 0.1, // 尾迹线条宽度
|
||||||
|
// opacity: 0.5, // 尾迹线条透明度
|
||||||
|
// curveness: 0.3 // 尾迹线条曲直度
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
data: lineToLf,
|
||||||
|
|
||||||
|
z: 3
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<div class="pie-div" id="pie">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getCharts();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const getCharts = () => {
|
||||||
|
var dom = document.getElementById("pie");
|
||||||
|
if (dom) {
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
let option = {
|
||||||
|
// backgroundColor: 'white',
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'item',
|
||||||
|
//{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
|
||||||
|
formatter: "{a} <br/>{b} : {c}",
|
||||||
|
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||||
|
borderWidth: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgba(212, 232, 254, 1)",
|
||||||
|
// fontSize: fontChart(0.24),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
// orient: 'vertical',
|
||||||
|
left: 'center',
|
||||||
|
top: '5%',
|
||||||
|
itemWidth: 15,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 25,
|
||||||
|
borderRadius: 4,
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
fontFamily: "Alibaba PuHuiTi",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '数据一' },
|
||||||
|
{ value: 735, name: '数据二' },
|
||||||
|
{ value: 580, name: '数据三' },
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: ["{b|{b}}", "{c|{c}}"].join("\n"),
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "inherit",
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: "bold",
|
||||||
|
lineHeight: 5,
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 15,
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -9,10 +9,22 @@
|
||||||
{{ item.meta && item.meta.title }}
|
{{ item.meta && item.meta.title }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="home-page">
|
||||||
|
<Map></Map>
|
||||||
|
<Pie></Pie>
|
||||||
|
<Bar></Bar>
|
||||||
|
<Device></Device>
|
||||||
|
<Line></Line>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="Index">
|
<script setup name="Index">
|
||||||
|
import Map from './components/Map.vue';
|
||||||
|
import Pie from './components/Pie.vue';
|
||||||
|
import Bar from './components/Bar.vue';
|
||||||
|
import Line from './components/Line.vue';
|
||||||
|
import Device from './components/Device.vue';
|
||||||
import useTagsViewStore from "@/store/modules/tagsView";
|
import useTagsViewStore from "@/store/modules/tagsView";
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
import usePermissionStore from "@/store/modules/permission";
|
import usePermissionStore from "@/store/modules/permission";
|
||||||
|
|
@ -35,11 +47,12 @@ const gotoPage = (item) => {
|
||||||
.home {
|
.home {
|
||||||
.topMenu {
|
.topMenu {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 80px;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(0, 225, 255, 0.445);
|
background: #b2cae0;
|
||||||
|
// color: #fff;
|
||||||
> div {
|
> div {
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -51,6 +64,48 @@ const gotoPage = (item) => {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.home-page {
|
||||||
|
width:100%;
|
||||||
|
height: calc(100vh - 130px);
|
||||||
|
position: relative;
|
||||||
|
.map-div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.pie-div {
|
||||||
|
position: absolute;
|
||||||
|
width: 400px;
|
||||||
|
height: 360px;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
background: #b2cae0;
|
||||||
|
}
|
||||||
|
.bar-div {
|
||||||
|
position: absolute;
|
||||||
|
width: 400px;
|
||||||
|
height: 460px;
|
||||||
|
background: #b2cae0;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.device-div {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
width: 930px;
|
||||||
|
height: 200px;
|
||||||
|
background: #b2cae0;
|
||||||
|
}
|
||||||
|
.line-div {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 930px;
|
||||||
|
height: 200px;
|
||||||
|
background: #b2cae0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue