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全局样式
|
||||
.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 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-page">
|
||||
<Map></Map>
|
||||
<Pie></Pie>
|
||||
<Bar></Bar>
|
||||
<Device></Device>
|
||||
<Line></Line>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
const router = useRouter();
|
||||
import usePermissionStore from "@/store/modules/permission";
|
||||
|
|
@ -35,11 +47,12 @@ const gotoPage = (item) => {
|
|||
.home {
|
||||
.topMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 80px;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 225, 255, 0.445);
|
||||
background: #b2cae0;
|
||||
// color: #fff;
|
||||
> div {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
|
|
@ -51,6 +64,48 @@ const gotoPage = (item) => {
|
|||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue