You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1230 lines
28 KiB
Vue
1230 lines
28 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">仓储物流中心</div>
|
|
<div class="exit" @click="exitFun"></div>
|
|
|
|
<div class="time" id="time">{{ time }}</div>
|
|
<div class="date" id="date">{{ date }}</div>
|
|
<div class="logo"></div>
|
|
<div class="title1" v-for="(i,k) in title"
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
{{ i }}
|
|
</div>
|
|
<div class="centerTitle1">商品品类</div>
|
|
<div class="centerSpan1">22</div>
|
|
<div class="centerTitle2">商品数量</div>
|
|
<div class="centerSpan2">227921</div>
|
|
<div class="centerTitle3">当日入库量</div>
|
|
<div class="centerSpan3">670</div>
|
|
<div class="centerTitle4">当日出库量</div>
|
|
<div class="centerSpan4">728</div>
|
|
|
|
<div class="chart1">
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<div class="title">
|
|
<div class="titleSpan1">排行</div>
|
|
<div class="titleSpan2">产品型号</div>
|
|
<div class="titleSpan3">库存量</div>
|
|
</div>
|
|
<div class="chart4Info">
|
|
<div class="info" v-for="(i,k) in list">
|
|
<div class="infoSpan1">
|
|
<div class="num">{{ k + 1 }}</div>
|
|
</div>
|
|
<div class="infoSpan2">{{ i.name }}</div>
|
|
<div class="infoSpan3">{{ i.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart5">
|
|
<Chart ref="chart5"></Chart>
|
|
</div>
|
|
<div class="chart6">
|
|
<Chart ref="chart6"></Chart>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import Chart from "@/components/board/Chart";
|
|
import {getData} from "@/api/board/getData";
|
|
import * as echarts from 'echarts'
|
|
import chinaMap from "@/views/model/china2.json";
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
let getDateIntervalFun = null
|
|
export default {
|
|
name: "Liner",
|
|
components: {
|
|
Chart,
|
|
vueSeamlessScroll,
|
|
},
|
|
props: {
|
|
exit: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
time: '',
|
|
date: '',
|
|
title: [
|
|
'库存总量统计',
|
|
'库存总量统计TOP10',
|
|
'月内库存',
|
|
'库龄分析',
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 11.5,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 39.2,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 62.8,
|
|
left: 30.5
|
|
},
|
|
{
|
|
top: 62.9,
|
|
left: 75
|
|
},
|
|
],
|
|
list: [
|
|
{
|
|
name: 'BC/BD-307HNE,皓月白,ZS/N/1级,A',
|
|
value: 55939,
|
|
},
|
|
{
|
|
name: 'BCD-211CNE,皓月白,A',
|
|
value: 47246,
|
|
},
|
|
{
|
|
name: 'BC/BD-310NF,银河灰,A',
|
|
value: 46842,
|
|
},
|
|
{
|
|
name: 'BCD-212CFT,炫金色,1级,A',
|
|
value: 56723,
|
|
},
|
|
{
|
|
name: 'BCD-210CNE,银河灰,A',
|
|
value: 51357,
|
|
},
|
|
{
|
|
name: 'BC/BD-232WD,银河灰,A',
|
|
value: 45725,
|
|
},
|
|
{
|
|
name: 'BC/BD-300AYYS,银河灰,A',
|
|
value: 46731,
|
|
},
|
|
{
|
|
name: 'BCD-211CGN,星际灰,A',
|
|
value: 53943,
|
|
},
|
|
{
|
|
name: 'BC/BD-308HNE,皓月白,ZS/1级,A',
|
|
value: 56736,
|
|
},
|
|
{
|
|
name: 'BC/BD-307HNE,皓月白,ZS/N/1级,A',
|
|
value: 47170,
|
|
},
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
const getDate = () => {
|
|
let date = new Date()
|
|
let YYYY = date.getFullYear()
|
|
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
|
|
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
|
|
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
|
|
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
|
}
|
|
getDate()
|
|
getDateIntervalFun = setInterval(getDate, 1000)
|
|
},
|
|
mounted() {
|
|
echarts.registerMap('china', chinaMap);
|
|
let points = [
|
|
{value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
|
|
{value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
|
|
{value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
|
|
{value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
|
|
{value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
|
|
{value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
|
|
{value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
|
|
{value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
|
|
{value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
|
|
{value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
|
|
{value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
|
|
{value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
|
|
{value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
|
|
{value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
|
|
{value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
|
|
{value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
|
|
{value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
|
|
{value: [115.179594, 34.647758]},
|
|
];
|
|
this.$refs.chart1.setData({
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b} : {c} ({d}%)",
|
|
},
|
|
polar: {},
|
|
angleAxis: {
|
|
interval: 1,
|
|
type: "category",
|
|
data: [],
|
|
z: 10,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0B4A6B",
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
show: true,
|
|
color: "#0B4A6B00",
|
|
margin: 8,
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
radiusAxis: {
|
|
min: 40,
|
|
max: 120,
|
|
interval: 20,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0B3E5E",
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value} %",
|
|
show: false,
|
|
padding: [0, 0, 20, 0],
|
|
color: "#0B3E5E",
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#0B3E5E00",
|
|
width: 2,
|
|
type: "solid",
|
|
},
|
|
},
|
|
},
|
|
calculable: true,
|
|
series: [
|
|
{
|
|
stack: "a",
|
|
type: "pie",
|
|
radius: ["0%", "80%"],
|
|
roseType: "area",
|
|
zlevel: 10,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: "{b}\n{c}({d}%)",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff'
|
|
},
|
|
position: "outside",
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 20,
|
|
length2: 55,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 511,
|
|
name: "BCD-162CST",
|
|
},
|
|
{
|
|
value: 632,
|
|
name: "BCD-212CHG",
|
|
},
|
|
{
|
|
value: 724,
|
|
name: "BCD-211CGN",
|
|
},
|
|
{
|
|
value: 671,
|
|
name: "BC/BD-310NF",
|
|
},
|
|
{
|
|
value: 572,
|
|
name: "BC/BD-232WD",
|
|
},
|
|
{
|
|
value: 673,
|
|
name: "BC/BD-145NF",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart3 && this.$refs.chart3.setData(this.chart1Option());
|
|
this.$refs.chart2.setData({
|
|
|
|
geo: {
|
|
map: "china",
|
|
aspectScale: 0.75, //长宽比
|
|
zoom: 1.1,
|
|
roam: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: {
|
|
type: "radial",
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#09132c", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#274d68", // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: true, // 缺省为 false
|
|
},
|
|
shadowColor: "rgb(58,115,192)",
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2.3,
|
|
},
|
|
emphasis: {
|
|
areaColor: "#2AB8FF",
|
|
borderWidth: 0,
|
|
color: "green",
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
areaColor: "rgba(0, 10, 52, 1)",
|
|
|
|
borderColor: "rgba(0, 10, 52, 1)",
|
|
normal: {
|
|
opacity: 0,
|
|
label: {
|
|
show: false,
|
|
color: "#009cc9",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
series: [
|
|
{
|
|
type: "map",
|
|
roam: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: "rgb(147, 235, 248)",
|
|
borderWidth: 1,
|
|
areaColor: {
|
|
type: "radial",
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#09132c", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#274d68", // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: true, // 缺省为 false
|
|
},
|
|
},
|
|
emphasis: {
|
|
areaColor: "rgb(46,229,206)",
|
|
// shadowColor: 'rgb(12,25,50)',
|
|
borderWidth: 0.1,
|
|
},
|
|
},
|
|
zoom: 1.1,
|
|
// roam: false,
|
|
map: "china", //使用
|
|
// data: this.difficultData //热力图数据 不同区域 不同的底色
|
|
},
|
|
{
|
|
type: "effectScatter",
|
|
coordinateSystem: "geo",
|
|
showEffectOn: "render",
|
|
zlevel: 1,
|
|
rippleEffect: {
|
|
period: 15,
|
|
scale: 4,
|
|
brushType: "fill",
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}",
|
|
position: "right",
|
|
offset: [15, 0],
|
|
color: "#1DE9B6",
|
|
show: true,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#1DE9B6",
|
|
shadowBlur: 10,
|
|
shadowColor: "#333",
|
|
},
|
|
},
|
|
symbolSize: 2,
|
|
data: points,
|
|
},
|
|
{
|
|
type: "lines",
|
|
zlevel: 2,
|
|
effect: {
|
|
show: true,
|
|
period: 2, //箭头指向速度，值越小速度越快
|
|
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
symbol: "arrow", //箭头图标
|
|
symbolSize: 5, //图标大小
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#1DE9B6",
|
|
width: 1, //线条宽度
|
|
opacity: 0.1, //尾迹线条透明度
|
|
curveness: 0.3, //尾迹线条曲直度
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[118.8062, 31.9208],
|
|
],
|
|
lineStyle: {color: "#4ab2e5"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[127.9688, 45.368],
|
|
],
|
|
lineStyle: {color: "#4fb6d2"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[110.3467, 41.4899],
|
|
],
|
|
lineStyle: {color: "#52b9c7"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[125.8154, 44.2584],
|
|
],
|
|
lineStyle: {color: "#5abead"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[116.4551, 40.2539],
|
|
],
|
|
lineStyle: {color: "#f34e2b"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[123.1238, 42.1216],
|
|
],
|
|
lineStyle: {color: "#f56321"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[114.4995, 38.1006],
|
|
],
|
|
lineStyle: {color: "#f56f1c"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[117.4219, 39.4189],
|
|
],
|
|
lineStyle: {color: "#f58414"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[112.3352, 37.9413],
|
|
],
|
|
lineStyle: {color: "#f58f0e"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[109.1162, 34.2004],
|
|
],
|
|
lineStyle: {color: "#f5a305"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[103.5901, 36.3043],
|
|
],
|
|
lineStyle: {color: "#e7ab0b"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[106.3586, 38.1775],
|
|
],
|
|
lineStyle: {color: "#dfae10"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[101.4038, 36.8207],
|
|
],
|
|
lineStyle: {color: "#d5b314"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[103.9526, 30.7617],
|
|
],
|
|
lineStyle: {color: "#c1bb1f"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[108.384366, 30.439702],
|
|
],
|
|
lineStyle: {color: "#b9be23"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[113.0823, 28.2568],
|
|
],
|
|
lineStyle: {color: "#a6c62c"},
|
|
},
|
|
{
|
|
coords: [
|
|
[115.179594, 34.647758],
|
|
[102.9199, 25.46639],
|
|
],
|
|
lineStyle: {color: "#96cc34"},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart5.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 2 * vw,
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
x: "center",
|
|
top: "0",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
data: ['BCD-162CST', 'BCD-212CHG', 'BCD-211CGN', 'BC/BD-310NF', 'BC/BD-232WD', 'BC/BD-145NF', 'BC/BD-150HY', 'BC/BD-147NEM', 'BC/BD-150HY', 'BC/BD-208HNEV'],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '库存数',
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "库存数",
|
|
type: "bar",
|
|
borderWidth: '15%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
fontSize: 0.5 * vw,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#62aafe",
|
|
},
|
|
},
|
|
data: [
|
|
709, 1917, 2455, 2610, 1719, 1433, 357, 457, 1583, 1583
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart6.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 2 * vw,
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
x: "center",
|
|
top: "0",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
data: ['BCD-162CST', 'BCD-212CHG', 'BCD-211CGN', 'BC/BD-310NF', 'BC/BD-232WD', 'BC/BD-145NF'],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '库存数',
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "周转率",
|
|
nameTextStyle: {
|
|
color: "#ffffff66",
|
|
},
|
|
position: "right",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ffffff66",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "库存数",
|
|
type: "bar",
|
|
borderWidth: '15%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#62aafe",
|
|
},
|
|
},
|
|
data: [
|
|
709, 1917, 2455, 2610, 1719, 1433
|
|
],
|
|
},
|
|
{
|
|
name: "周转率",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "bottom",
|
|
textStyle: {
|
|
color: "#a8aab0",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 0.75 * vw,
|
|
},
|
|
},
|
|
},
|
|
showAllSymbol: true, //显示所有图形。
|
|
symbol: "circle", //标记的图形为实心圆
|
|
symbolSize: 5, //标记的大小
|
|
itemStyle: {
|
|
//折线拐点标志的样式
|
|
color: "#ffffff",
|
|
},
|
|
lineStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
data: [94.7, 93.2, 94.7, 93.4, 94.4, 99.4],
|
|
},
|
|
],
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
exitFun() {
|
|
this.exit()
|
|
},
|
|
chart1Option(data, id) {
|
|
if (!data) {
|
|
data = {
|
|
yNameOne: ["11244726", "11244725", "11244695", "11244639", "11244635", "11244634", "11244633", "11244632", "11244311", "11244310"],
|
|
yData: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
|
xDataName: "达成率",
|
|
status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
}
|
|
}
|
|
let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
|
|
let bgBar = []
|
|
data.yData.forEach(() => {
|
|
bgBar.push(100)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
// left: "-10%",
|
|
left: "0%",
|
|
right: "15%",
|
|
bottom: "0%",
|
|
top: "0%",
|
|
containLabel: true,
|
|
},
|
|
dataZoom: [],
|
|
xAxis: {
|
|
show: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
show: true,
|
|
data: data.yNameOne,
|
|
inverse: true,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
// margin:150,
|
|
fontSize: 0.75 * vw,
|
|
textStyle: {
|
|
textAlign: 'center'
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "条",
|
|
type: "bar",
|
|
yAxisIndex: 0,
|
|
data: data.yData,
|
|
barWidth: '80%',
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 30,
|
|
color: function (params) {
|
|
return 'green'
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "框",
|
|
type: "bar",
|
|
yAxisIndex: 0,
|
|
barGap: "-100%",
|
|
data: bgBar,
|
|
barWidth: '80%',
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
formatter: function (val, index, e) {
|
|
return data.yData[val.dataIndex] + '%'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "none",
|
|
borderColor: "#00c1de",
|
|
borderWidth: 1,
|
|
barBorderRadius: 15,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return option
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.app-container {
|
|
background-image: url("~@/assets/model/equipment/bg.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-color: #021e31;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.exit {
|
|
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 1%;
|
|
right: 1%;
|
|
font-weight: bold;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
color: #e7b219;
|
|
}
|
|
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 14.5%;
|
|
left: 3.5%;
|
|
width: 23.5%;
|
|
height: 20%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 9%;
|
|
left: 39%;
|
|
width: 32.5%;
|
|
height: 48.5%;
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 14.5%;
|
|
left: 73%;
|
|
width: 23.5%;
|
|
height: 43%;
|
|
}
|
|
|
|
.chart4 {
|
|
position: absolute;
|
|
top: 42.5%;
|
|
left: 3.5%;
|
|
width: 23.5%;
|
|
height: 52%;
|
|
}
|
|
|
|
.chart5 {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 28.5%;
|
|
width: 43%;
|
|
height: 29%;
|
|
}
|
|
|
|
.chart6 {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 73%;
|
|
width: 23.5%;
|
|
height: 29%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 2.5%;
|
|
width: 95%;
|
|
height: 2vw;
|
|
border-bottom: 3px solid #efd108;
|
|
|
|
.titleSpan1 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 2.5vw;
|
|
white-space: nowrap;
|
|
left: 0;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
text-align: center;
|
|
color: #efd108;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.titleSpan2 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100% - 2.5vw - 5vw);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
left: 2.5vw;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
color: #efd108;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.titleSpan3 {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 0;
|
|
width: 5vw;
|
|
white-space: nowrap;
|
|
right: 0;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
color: #efd108;
|
|
font-size: 1vw;
|
|
}
|
|
}
|
|
|
|
.chart4Info {
|
|
position: absolute;
|
|
top: calc(2vw + 3px);
|
|
left: 2.5%;
|
|
width: 95%;
|
|
height: calc(100% - 2vw - 3px);
|
|
overflow: hidden;
|
|
|
|
.info {
|
|
width: 100%;
|
|
height: 2vw;
|
|
border-bottom: 1px solid #ffffff7F;
|
|
margin-bottom: 2px;
|
|
position: relative;
|
|
|
|
.infoSpan1 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 2.5vw;
|
|
white-space: nowrap;
|
|
left: 0;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
text-align: center;
|
|
color: #FFFFFFDD;
|
|
font-size: 1vw;
|
|
|
|
}
|
|
|
|
.infoSpan2 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100% - 2.5vw - 5vw);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
left: 2.5vw;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
color: #FFFFFFDD;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.infoSpan3 {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 0;
|
|
width: 5vw;
|
|
white-space: nowrap;
|
|
right: 0;
|
|
height: 2vw;
|
|
line-height: 2vw;
|
|
color: #FFFFFFDD;
|
|
font-size: 1vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title1 {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.centerTitle1 {
|
|
position: absolute;
|
|
top: 10.5%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerSpan1 {
|
|
position: absolute;
|
|
top: 16%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerTitle2 {
|
|
position: absolute;
|
|
top: 23.5%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerSpan2 {
|
|
position: absolute;
|
|
top: 29%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerTitle3 {
|
|
position: absolute;
|
|
top: 36.3%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerSpan3 {
|
|
position: absolute;
|
|
top: 42%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerTitle4 {
|
|
position: absolute;
|
|
top: 49.1%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.centerSpan4 {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 33%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1vw;
|
|
color: #fff
|
|
}
|
|
|
|
.logo {
|
|
background-image: url("../../assets/board/logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 6vw;
|
|
height: 2.3vw;
|
|
position: absolute;
|
|
top: 1%;
|
|
left: 1%;
|
|
}
|
|
|
|
.time, .date {
|
|
position: absolute;
|
|
font-size: 0.8vw;
|
|
color: #fcfcfc;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time {
|
|
top: 3.2%;
|
|
left: 85.8%;
|
|
}
|
|
|
|
.date {
|
|
top: 3.2%;
|
|
left: 94.1%;
|
|
}
|
|
</style>
|