bigScreenAdjustandContractNumber
This commit is contained in:
parent
8272368813
commit
8643475e68
|
|
@ -73,7 +73,7 @@
|
||||||
}
|
}
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
line-height: 50px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: skewX(-45deg);
|
transform: skewX(-45deg);
|
||||||
|
|
||||||
|
|
@ -81,8 +81,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -25px;
|
right: -25px;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
width: 50px;
|
width: 40px;
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg);
|
||||||
}
|
}
|
||||||
|
|
@ -100,8 +100,8 @@
|
||||||
}
|
}
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
line-height: 50px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg);
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
|
|
@ -123,13 +123,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.body-box {
|
.body-box {
|
||||||
margin-top: 16px;
|
margin-top: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
//下方区域的布局
|
//下方区域的布局
|
||||||
.content-box {
|
.content-box {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
margin-bottom: 15px;
|
||||||
grid-template-columns: 35% 15% 15% 15% 20%;
|
grid-template-columns: 35% 15% 15% 15% 20%;
|
||||||
div{
|
div{
|
||||||
box-sizing: border-box!important;
|
box-sizing: border-box!important;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<el-icon class="el-icon-s-data"></el-icon>
|
<el-icon class="el-icon-s-data"></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="fs-xl text mx-2">数据统计图</span>
|
<span class="fs-xl text mx-2">任务完成进度</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -32,41 +32,30 @@
|
||||||
options: {},
|
options: {},
|
||||||
cdata: {
|
cdata: {
|
||||||
category: [
|
category: [
|
||||||
"市区",
|
"JH5jhx463-1",
|
||||||
"万州",
|
"JH5jhx463-2",
|
||||||
"江北",
|
"JH5jhx463-3",
|
||||||
"南岸",
|
"JH5jhx463-4",
|
||||||
"北碚",
|
"JH5jhx463-5",
|
||||||
"綦南",
|
"JH5jhx463-6",
|
||||||
"长寿",
|
"JH5jhx463-7",
|
||||||
"永川",
|
"JH5jhx463-8",
|
||||||
"璧山",
|
"JH5jhx463-9",
|
||||||
"江津",
|
"JH5jhx463-10",
|
||||||
"城口",
|
"JH5jhx463-11",
|
||||||
"大足",
|
"JH5jhx463-12",
|
||||||
"垫江",
|
"JH5jhx463-13",
|
||||||
"丰都",
|
"JH5jhx463-14",
|
||||||
"奉节",
|
"JH5jhx463-15"
|
||||||
"合川",
|
|
||||||
"江津区",
|
|
||||||
"开州",
|
|
||||||
"南川",
|
|
||||||
"彭水",
|
|
||||||
"黔江",
|
|
||||||
"石柱",
|
|
||||||
"铜梁",
|
|
||||||
"潼南",
|
|
||||||
"巫山",
|
|
||||||
"巫溪",
|
|
||||||
"武隆",
|
|
||||||
"秀山",
|
|
||||||
"酉阳",
|
|
||||||
"云阳",
|
|
||||||
"忠县",
|
|
||||||
"川东",
|
|
||||||
"检修"
|
|
||||||
],
|
],
|
||||||
lineData: [
|
planData: [
|
||||||
|
18092,
|
||||||
|
20728,
|
||||||
|
24045,
|
||||||
|
28348,
|
||||||
|
32808,
|
||||||
|
36097,
|
||||||
|
39867,
|
||||||
18092,
|
18092,
|
||||||
20728,
|
20728,
|
||||||
24045,
|
24045,
|
||||||
|
|
@ -75,40 +64,15 @@
|
||||||
36097,
|
36097,
|
||||||
39867,
|
39867,
|
||||||
44715,
|
44715,
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
56061,
|
|
||||||
62677,
|
|
||||||
59521,
|
|
||||||
67560,
|
|
||||||
18092,
|
|
||||||
20728,
|
|
||||||
24045,
|
|
||||||
28348,
|
|
||||||
32808,
|
|
||||||
36097,
|
|
||||||
39867,
|
|
||||||
44715,
|
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
36097,
|
|
||||||
39867,
|
|
||||||
44715,
|
|
||||||
48444,
|
|
||||||
50415,
|
|
||||||
50061,
|
|
||||||
32677,
|
|
||||||
49521,
|
|
||||||
32808
|
|
||||||
],
|
],
|
||||||
barData: [
|
barData: [
|
||||||
4600,
|
9600,
|
||||||
5000,
|
19000,
|
||||||
5500,
|
19500,
|
||||||
6500,
|
20500,
|
||||||
7500,
|
19500,
|
||||||
8500,
|
28500,
|
||||||
9900,
|
31900,
|
||||||
12500,
|
12500,
|
||||||
14000,
|
14000,
|
||||||
21500,
|
21500,
|
||||||
|
|
@ -116,25 +80,7 @@
|
||||||
24450,
|
24450,
|
||||||
25250,
|
25250,
|
||||||
33300,
|
33300,
|
||||||
4600,
|
40715
|
||||||
5000,
|
|
||||||
5500,
|
|
||||||
6500,
|
|
||||||
7500,
|
|
||||||
8500,
|
|
||||||
9900,
|
|
||||||
22500,
|
|
||||||
14000,
|
|
||||||
21500,
|
|
||||||
8500,
|
|
||||||
9900,
|
|
||||||
12500,
|
|
||||||
14000,
|
|
||||||
21500,
|
|
||||||
23200,
|
|
||||||
24450,
|
|
||||||
25250,
|
|
||||||
7500
|
|
||||||
],
|
],
|
||||||
rateData: []
|
rateData: []
|
||||||
}
|
}
|
||||||
|
|
@ -147,10 +93,7 @@
|
||||||
cdata: {
|
cdata: {
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
title: {
|
/*tooltip: {
|
||||||
text: "",
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
backgroundColor: "rgba(255,255,255,0.1)",
|
backgroundColor: "rgba(255,255,255,0.1)",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
|
|
@ -160,9 +103,47 @@
|
||||||
backgroundColor: "#7B7DDC"
|
backgroundColor: "#7B7DDC"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},*/
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
|
||||||
|
axisPointer: { //坐标轴指示器，坐标轴触发有效，
|
||||||
|
type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
|
||||||
|
crossStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
/*tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function (params) {
|
||||||
|
debugger;
|
||||||
|
console.log(params);
|
||||||
|
let color = params.color;//图例颜色
|
||||||
|
let htmlStr = '<div>';
|
||||||
|
htmlStr += params.name + '<br/>';
|
||||||
|
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||||
|
htmlStr += params.seriesName + '：' + params.value + '%';
|
||||||
|
htmlStr += '</div>';
|
||||||
|
return htmlStr;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//shared: true,
|
||||||
|
crosshairs: true,
|
||||||
|
valueSuffix: yAxisSuffix,
|
||||||
|
useHTML: true,
|
||||||
|
formatter: function() {
|
||||||
|
return "<div style='width:300px;word-wrap:break-word;white-space:normal;'>"
|
||||||
|
+"<b>录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"</b><br/>"
|
||||||
|
+tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||||
|
+tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||||
|
+tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||||
|
+tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"<br/>"
|
||||||
|
+"</div>";
|
||||||
|
}
|
||||||
|
},*/
|
||||||
legend: {
|
legend: {
|
||||||
data: ["已贯通", "计划贯通", "贯通率"],
|
data: ["已完成", "计划完成"],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#B4B4B4"
|
color: "#B4B4B4"
|
||||||
},
|
},
|
||||||
|
|
@ -184,49 +165,22 @@
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis:{
|
||||||
{
|
splitLine: {
|
||||||
splitLine: {show: false},
|
show: false
|
||||||
axisLine: {
|
},
|
||||||
lineStyle: {
|
axisLine: {
|
||||||
color: "#B4B4B4"
|
lineStyle: {
|
||||||
}
|
color: "#B4B4B4"
|
||||||
},
|
|
||||||
|
|
||||||
axisLabel: {
|
|
||||||
formatter: "{value} "
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
axisLabel: {
|
||||||
splitLine: {show: false},
|
formatter: "{value} "
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#B4B4B4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
formatter: "{value} "
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "贯通率",
|
name: "已完成",
|
||||||
type: "line",
|
|
||||||
smooth: true,
|
|
||||||
showAllSymbol: true,
|
|
||||||
symbol: "emptyCircle",
|
|
||||||
symbolSize: 8,
|
|
||||||
yAxisIndex: 1,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#F02FC2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: newData.rateData
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "已贯通",
|
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|
@ -241,7 +195,7 @@
|
||||||
data: newData.barData
|
data: newData.barData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "计划贯通",
|
name: "计划完成",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barGap: "-100%",
|
barGap: "-100%",
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
|
|
@ -256,7 +210,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
z: -12,
|
z: -12,
|
||||||
data: newData.lineData
|
data: newData.planData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -269,7 +223,7 @@
|
||||||
// 根据自己的业务情况修改
|
// 根据自己的业务情况修改
|
||||||
setData() {
|
setData() {
|
||||||
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
|
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
|
||||||
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
let rate = this.cdata.barData[i] / this.cdata.planData[i];
|
||||||
this.cdata.rateData.push(rate.toFixed(2));
|
this.cdata.rateData.push(rate.toFixed(2));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -6,367 +6,81 @@
|
||||||
<el-icon class="el-icon-s-marketing"></el-icon>
|
<el-icon class="el-icon-s-marketing"></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
<span class="fs-xl text mx-2">企业咨询</span>
|
||||||
<div class="decoration2">
|
<div class="decoration2">
|
||||||
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<div class="d-flex jc-center body-box">
|
||||||
:options="options"
|
<dv-scroll-board class="dv-scr-board" :config="config" />
|
||||||
id="centreLeft1Chart"
|
</div>
|
||||||
height="480px"
|
|
||||||
width="100%"
|
|
||||||
></Echart>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/components/echart'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
drawTiming: null,
|
cdata:{},
|
||||||
cdata: {
|
config: {
|
||||||
year: null,
|
header: ['消息', '发布时间'],
|
||||||
weekCategory: [],
|
data: [
|
||||||
radarData: [],
|
['张思', '2022-03-05'],
|
||||||
radarDataAvg: [],
|
['李森', '2022-03-05'],
|
||||||
maxData: 12000,
|
['王师', '2022-03-05'],
|
||||||
weekMaxData: [],
|
['赵迪', '2022-03-05'],
|
||||||
weekLineData: []
|
['孟津', '2022-03-05'],
|
||||||
},
|
['张思', '2022-03-05'],
|
||||||
options: {},
|
['李森', '2022-03-05'],
|
||||||
// 定义颜色
|
['王师', '2022-03-05'],
|
||||||
colorList: {
|
['赵迪', '2022-03-05'],
|
||||||
linearYtoG: {
|
['孟津', '2022-03-05'],
|
||||||
type: "linear",
|
['孙东课', '2022-03-05'],
|
||||||
x: 0,
|
['周神秘', '2022-03-05'],
|
||||||
y: 0,
|
['吴老弟', '2022-03-05'],
|
||||||
x2: 1,
|
['郑成功', '2022-03-05'],
|
||||||
y2: 1,
|
['冯宝宝', '2022-03-05']
|
||||||
colorStops: [
|
],
|
||||||
{
|
rowNum: 15, //表格行数
|
||||||
offset: 0,
|
headerHeight: 40,
|
||||||
color: "#f5b44d"
|
headerBGC: '#0f1325', //表头
|
||||||
},
|
oddRowBGC: '#0f1325', //奇数行
|
||||||
{
|
evenRowBGC: '#171c33', //偶数行
|
||||||
offset: 1,
|
index: false,
|
||||||
color: "#28f8de"
|
// columnWidth: [50],
|
||||||
}
|
align: ['center']
|
||||||
]
|
|
||||||
},
|
|
||||||
linearGtoB: {
|
|
||||||
type: "linear",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 1,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "#43dfa2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#28f8de"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
linearBtoG: {
|
|
||||||
type: "linear",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 1,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "#1c98e8"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#28f8de"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
areaBtoG: {
|
|
||||||
type: "linear",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(35,184,210,.2)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(35,184,210,0)"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Echart
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler () {
|
||||||
this.options = {
|
this.config = {
|
||||||
title: {
|
header: ['消息', '发布时间'],
|
||||||
text: "",
|
data: [
|
||||||
textStyle: {
|
['张思', '2022-03-05'],
|
||||||
color: "#D3D6DD",
|
['李森', '2022-03-05'],
|
||||||
fontSize: 24,
|
['王师', '2022-03-05'],
|
||||||
fontWeight: "normal"
|
['赵迪', '2022-03-05'],
|
||||||
},
|
['孟津', '2022-03-05'],
|
||||||
subtext: newData.year + "/" + newData.weekCategory[6],
|
['孙东课', '2022-03-05'],
|
||||||
subtextStyle: {
|
['周神秘', '2022-03-05'],
|
||||||
color: "#fff",
|
['吴老弟', '2022-03-05'],
|
||||||
fontSize: 16
|
['郑成功', '2022-03-05'],
|
||||||
},
|
['冯宝宝', '2022-03-05']
|
||||||
top: 50,
|
],
|
||||||
left: 80
|
rowNum: 15, //表格行数
|
||||||
},
|
headerHeight: 40,
|
||||||
legend: {
|
headerBGC: '#0f1325', //表头
|
||||||
top: 120,
|
oddRowBGC: '#0f1325', //奇数行
|
||||||
left: 80,
|
evenRowBGC: '#171c33', //偶数行
|
||||||
orient: "vertical",
|
index: false,
|
||||||
itemGap: 15,
|
// columnWidth: [50],
|
||||||
itemWidth: 12,
|
align: ['center']
|
||||||
itemHeight: 12,
|
|
||||||
data: ["平均指标", "我的指标"],
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item"
|
|
||||||
},
|
|
||||||
radar: {
|
|
||||||
center: ["68%", "27%"],
|
|
||||||
radius: "40%",
|
|
||||||
name: {
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
splitNumber: 8,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: this.colorList.linearYtoG,
|
|
||||||
opacity: 0.6
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: this.colorList.linearYtoG,
|
|
||||||
opacity: 0.6
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
areaStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
opacity: 0.1,
|
|
||||||
shadowBlur: 25,
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowOffsetY: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
indicator: [
|
|
||||||
{
|
|
||||||
name: "服务态度",
|
|
||||||
max: newData.maxData
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "产品质量",
|
|
||||||
max: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "任务效率",
|
|
||||||
max: 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "售后保障",
|
|
||||||
max: 3.5
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 90,
|
|
||||||
right: 80,
|
|
||||||
bottom: 40,
|
|
||||||
top: "60%"
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
position: "bottom",
|
|
||||||
axisLine: true,
|
|
||||||
axisLabel: {
|
|
||||||
color: "rgba(255,255,255,.8)",
|
|
||||||
fontSize: 12
|
|
||||||
},
|
|
||||||
data: newData.weekCategory
|
|
||||||
},
|
|
||||||
// 下方Y轴
|
|
||||||
yAxis: {
|
|
||||||
name: "工单",
|
|
||||||
nameLocation: "end",
|
|
||||||
nameGap: 24,
|
|
||||||
nameTextStyle: {
|
|
||||||
color: "rgba(255,255,255,.5)",
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
max: newData.maxData,
|
|
||||||
splitNumber: 4,
|
|
||||||
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
opacity: 0.1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: "rgba(255,255,255,.8)",
|
|
||||||
fontSize: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "radar",
|
|
||||||
symbolSize: 0,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: newData.radarDataAvg[6],
|
|
||||||
name: "平均指标",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#f8d351"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#f8d351",
|
|
||||||
shadowBlur: 25,
|
|
||||||
shadowColor: "rgba(248,211,81,.3)",
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowOffsetY: -10,
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: newData.radarData[6],
|
|
||||||
name: "我的指标",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#43dfa2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: this.colorList.linearGtoB,
|
|
||||||
shadowBlur: 15,
|
|
||||||
shadowColor: "rgba(0,0,0,.2)",
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowOffsetY: 5,
|
|
||||||
opacity: 0.8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "line",
|
|
||||||
smooth: true,
|
|
||||||
symbol: "emptyCircle",
|
|
||||||
symbolSize: 8,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#fff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: this.colorList.linearBtoG,
|
|
||||||
width: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: this.colorList.areaBtoG
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: newData.weekLineData,
|
|
||||||
lineSmooth: true,
|
|
||||||
markLine: {
|
|
||||||
silent: true,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
type: "average",
|
|
||||||
name: "平均值"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
precision: 0,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: "平均值: \n {c}"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(248,211,81,.7)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
position: "top",
|
|
||||||
formatter: "{c} m",
|
|
||||||
backgroundColor: "rgba(28,152,232,.2)",
|
|
||||||
padding: 6
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "占位背景",
|
|
||||||
type: "bar",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
color: "#000",
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
silent: true,
|
|
||||||
barWidth: "50%",
|
|
||||||
data: newData.weekMaxData,
|
|
||||||
animation: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|
@ -384,51 +98,42 @@ export default {
|
||||||
this.setData();
|
this.setData();
|
||||||
this.drawTiming = setInterval(() => {
|
this.drawTiming = setInterval(() => {
|
||||||
this.setData();
|
this.setData();
|
||||||
}, 6000);
|
}, 3600000);
|
||||||
},
|
},
|
||||||
setData () {
|
setData () {
|
||||||
// 清空轮询数据
|
this.config = {
|
||||||
this.cdata.weekCategory = [];
|
header: ['消息', '发布时间'],
|
||||||
this.cdata.weekMaxData = [];
|
data: [
|
||||||
this.cdata.weekLineData = [];
|
['张思', '2022-03-05'],
|
||||||
this.cdata.radarData = [];
|
['李森', '2022-03-05'],
|
||||||
this.cdata.radarDataAvg = [];
|
['王师', '2022-03-05'],
|
||||||
|
['赵迪', '2022-03-05'],
|
||||||
let dateBase = new Date();
|
['孟津', '2022-03-05'],
|
||||||
this.cdata.year = dateBase.getFullYear();
|
['张思', '2022-03-05'],
|
||||||
// 周数据
|
['李森', '2022-03-05'],
|
||||||
for (let i = 0; i < 7; i++) {
|
['王师', '2022-03-05'],
|
||||||
// 日期
|
['赵迪', '2022-03-05'],
|
||||||
let date = new Date();
|
['孟津', '2022-03-05'],
|
||||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
['孙东课', '2022-03-05'],
|
||||||
|
['周神秘', '2022-03-05'],
|
||||||
// 折线图数据
|
['吴老弟', '2022-03-05'],
|
||||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
['郑成功', '2022-03-05'],
|
||||||
let distance = Math.round(Math.random() * 11000 + 500);
|
['冯宝宝', '2022-03-05'],
|
||||||
this.cdata.weekLineData.push(distance);
|
['孙东课', '2022-03-05'],
|
||||||
|
['周神秘', '2022-03-05'],
|
||||||
// 雷达图数据
|
['吴老弟', '2022-03-05'],
|
||||||
// 我的指标
|
['郑成功', '2022-03-05'],
|
||||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
['冯宝宝', '2022-03-05']
|
||||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
],
|
||||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
rowNum: 15, //表格行数
|
||||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
headerHeight: 35,
|
||||||
this.cdata.radarData.unshift(radarDayData);
|
headerBGC: '#0f1325', //表头
|
||||||
|
oddRowBGC: '#0f1325', //奇数行
|
||||||
// 平均指标
|
evenRowBGC: '#171c33', //偶数行
|
||||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
index: false,
|
||||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
// columnWidth: [50],
|
||||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
align: ['center']
|
||||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
|
||||||
let radarDayDataAvg = [
|
|
||||||
distanceAvg,
|
|
||||||
averageSpeedAvg,
|
|
||||||
maxSpeedAvg,
|
|
||||||
hourAvg
|
|
||||||
];
|
|
||||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -438,17 +143,29 @@ export default {
|
||||||
$box-height: 520px;
|
$box-height: 520px;
|
||||||
$box-width: 100%;
|
$box-width: 100%;
|
||||||
#bottomRight {
|
#bottomRight {
|
||||||
padding: 14px 16px;
|
padding: 25px;
|
||||||
height: $box-height;
|
height: $box-height;
|
||||||
width: $box-width;
|
width: $box-width;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
.bg-color-black {
|
.bg-color-black {
|
||||||
height: $box-height - 30px;
|
height: $box-height - 50px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
color: #c3cbde;
|
color: #c3cbde;
|
||||||
}
|
}
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.dv-scr-board {
|
||||||
|
width: 100%;
|
||||||
|
height: 440px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//下滑线动态
|
//下滑线动态
|
||||||
.decoration2 {
|
.decoration2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -456,8 +173,12 @@ $box-width: 100%;
|
||||||
}
|
}
|
||||||
.chart-box {
|
.chart-box {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
width: 170px;
|
/*width: 170px;*/
|
||||||
height: 170px;
|
/*height: 170px;*/
|
||||||
|
.dv-scr-board {
|
||||||
|
width: 100%;
|
||||||
|
height: 340px;
|
||||||
|
}
|
||||||
.active-ring-name {
|
.active-ring-name {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,12 +20,12 @@
|
||||||
<span>
|
<span>
|
||||||
<el-icon class="el-icon-pie-chart"></el-icon>
|
<el-icon class="el-icon-pie-chart"></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
<span class="fs-xl text mx-2 mb-1 pl-3">任务完成进度</span>
|
||||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||||
</div>
|
</div>
|
||||||
<div class="percent">
|
<div class="percent">
|
||||||
<div class="item bg-color-black">
|
<div class="item bg-color-black">
|
||||||
<span>今日任务通过率</span>
|
<span>本月产品合格率</span>
|
||||||
<CenterChart
|
<CenterChart
|
||||||
:id="rate[0].id"
|
:id="rate[0].id"
|
||||||
:tips="rate[0].tips"
|
:tips="rate[0].tips"
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="item bg-color-black">
|
<div class="item bg-color-black">
|
||||||
<span>今日任务达标率</span>
|
<span>本月任务完成率</span>
|
||||||
<CenterChart
|
<CenterChart
|
||||||
:id="rate[1].id"
|
:id="rate[1].id"
|
||||||
:tips="rate[1].tips"
|
:tips="rate[1].tips"
|
||||||
|
|
@ -56,7 +56,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
titleItem: [
|
titleItem: [
|
||||||
{
|
{
|
||||||
title: '今年累计合同数',
|
title: '本月合同数',
|
||||||
number: {
|
number: {
|
||||||
number: [12],//数字数值
|
number: [12],//数字数值
|
||||||
toFixed: 0,//小数位数
|
toFixed: 0,//小数位数
|
||||||
|
|
@ -68,7 +68,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '本月累计订单数',
|
title: '本月生产订单数',
|
||||||
number: {
|
number: {
|
||||||
number: [12],
|
number: [12],
|
||||||
toFixed: 0,
|
toFixed: 0,
|
||||||
|
|
@ -80,7 +80,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今日在制任务数',
|
title: '本月在制任务数',
|
||||||
number: {
|
number: {
|
||||||
number: [2],
|
number: [2],
|
||||||
toFixed: 0,
|
toFixed: 0,
|
||||||
|
|
@ -92,10 +92,10 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '本月累计交付产品数',
|
title: '本月交付产品数',
|
||||||
number: {
|
number: {
|
||||||
number: [8],
|
number: [8],
|
||||||
toFixed: 1,
|
toFixed: 0,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
style: {
|
style: {
|
||||||
|
|
@ -104,9 +104,21 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今年成品合格率',
|
title: '本月不合格产品数',
|
||||||
number: {
|
number: {
|
||||||
number: [96],
|
number: [2],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '本月军检合格率',
|
||||||
|
number: {
|
||||||
|
number: [99],
|
||||||
toFixed: 1,
|
toFixed: 1,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}%',
|
content: '{nt}%',
|
||||||
|
|
@ -115,18 +127,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: '今年累计不合格产品数',
|
|
||||||
number: {
|
|
||||||
number: [2],
|
|
||||||
toFixed: 0,
|
|
||||||
textAlign: 'left',
|
|
||||||
content: '{nt}',
|
|
||||||
style: {
|
|
||||||
fontSize: 26
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
ranking: {
|
ranking: {
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -172,7 +172,7 @@ export default {
|
||||||
rate: [
|
rate: [
|
||||||
{
|
{
|
||||||
id: 'centerRate1',
|
id: 'centerRate1',
|
||||||
tips: 60,
|
tips: 98,
|
||||||
colorData: {
|
colorData: {
|
||||||
textStyle: '#3fc0fb',
|
textStyle: '#3fc0fb',
|
||||||
series: {
|
series: {
|
||||||
|
|
@ -186,7 +186,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'centerRate2',
|
id: 'centerRate2',
|
||||||
tips: 40,
|
tips: 99,
|
||||||
colorData: {
|
colorData: {
|
||||||
textStyle: '#67e0e3',
|
textStyle: '#67e0e3',
|
||||||
series: {
|
series: {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<el-icon class="el-icon-s-help"></el-icon>
|
<el-icon class="el-icon-s-help"></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="fs-xl text mx-2">任务通过率</span>
|
<span class="fs-xl text mx-2">一车间</span>
|
||||||
<dv-decoration-3 class="dv-dec-3"/>
|
<dv-decoration-3 class="dv-dec-3"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
fontSize: 24
|
fontSize: 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: '今日构建总量'
|
text: '今日产量'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
number: {
|
number: {
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
fontSize: 24
|
fontSize: 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: '总共完成数量'
|
text: '年累计完成量'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
number: {
|
number: {
|
||||||
|
|
@ -80,11 +80,11 @@
|
||||||
fontSize: 24
|
fontSize: 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: '正在编译数量'
|
text: '在制品数量'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
number: {
|
number: {
|
||||||
number: [157],
|
number: [361],
|
||||||
toFixed: 1,
|
toFixed: 1,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
content: '{nt}',
|
content: '{nt}',
|
||||||
|
|
@ -92,18 +92,16 @@
|
||||||
fontSize: 24
|
fontSize: 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: '未通过数量'
|
text: '不合格数量'
|
||||||
}
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
xData: ["冷加工", "热弯", "化学钢化"],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{value: 10, name: "data1"},
|
{value: 25, name: "冷加工"},
|
||||||
{value: 5, name: "data2"},
|
{value: 20, name: "热弯"},
|
||||||
{value: 15, name: "data3"},
|
{value: 35, name: "化学钢化"}
|
||||||
{value: 25, name: "data4"},
|
|
||||||
{value: 20, name: "data5"},
|
|
||||||
{value: 35, name: "data6"}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -119,12 +117,11 @@
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
|
||||||
"#32c5e9",
|
|
||||||
"#9fe6b8",
|
|
||||||
"#ffdb5c",
|
|
||||||
"#ff9f7f",
|
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
|
"#ffdb5c",
|
||||||
|
"#9fe6b8",
|
||||||
|
"#ff9f7f",
|
||||||
|
"#32c5e9",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-s-help"></el-icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">二车间</span>
|
||||||
|
<dv-decoration-3 class="dv-dec-3"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
id="centreLeft1Chart"
|
||||||
|
height="220px"
|
||||||
|
width="260px"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
<!-- 4个主要的数据 -->
|
||||||
|
<div class="bottom-data">
|
||||||
|
<div
|
||||||
|
class="item-box mt-2"
|
||||||
|
v-for="(item, index) in numberData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="d-flex">
|
||||||
|
<!--<span class="coin">￥</span>-->
|
||||||
|
<dv-digital-flop class="dv-digital-flop" :config="item.number"/>
|
||||||
|
</div>
|
||||||
|
<p class="text" style="text-align: center;">
|
||||||
|
{{ item.text }}
|
||||||
|
<span class="colorYellow">(件)</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/components/echart'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
numberData: [
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [15],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '今日产量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [1144],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '年累计完成量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [361],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '在制品数量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [361],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '不合格数量'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
cdata: {
|
||||||
|
xData: ["镀膜", "夹层", "包边", "装框"],
|
||||||
|
seriesData: [
|
||||||
|
{value: 10, name: "镀膜"},
|
||||||
|
{value: 5, name: "夹层"},
|
||||||
|
{value: 15, name: "包边"},
|
||||||
|
{value: 25, name: "装框"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.changeTiming()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler(newData) {
|
||||||
|
this.options = {
|
||||||
|
color: [
|
||||||
|
"#fb7293",
|
||||||
|
"#ffdb5c",
|
||||||
|
"#9fe6b8",
|
||||||
|
"#ff9f7f",
|
||||||
|
"#32c5e9",
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
icon: "circle",
|
||||||
|
bottom: 0,
|
||||||
|
x: "center",
|
||||||
|
data: newData.xData,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "通过率统计",
|
||||||
|
type: "pie",
|
||||||
|
radius: [10, 50],
|
||||||
|
roseType: "area",
|
||||||
|
center: ["50%", "40%"],
|
||||||
|
data: newData.seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTiming() {
|
||||||
|
setInterval(() => {
|
||||||
|
this.changeNumber()
|
||||||
|
}, 3000)
|
||||||
|
},
|
||||||
|
changeNumber() {
|
||||||
|
this.numberData.forEach((item, index) => {
|
||||||
|
item.number.number[0] += ++index
|
||||||
|
item.number = {...item.number}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-width: 300px;
|
||||||
|
$box-height: 410px;
|
||||||
|
|
||||||
|
#centerLeft1 {
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-dec-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-data {
|
||||||
|
.item-box {
|
||||||
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 金币
|
||||||
|
.coin {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -20,26 +20,26 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
header: ['姓名', '部门', '到岗'],
|
header: ['姓名', '部门', '到岗情况'],
|
||||||
data: [
|
data: [
|
||||||
['组件1', 'dev-1', "<span class='colorGrass'>已到岗</span>"],
|
['张思', '一车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件2', 'dev-2', "<span class='colorRed'>未到岗</span>"],
|
['李森', '一车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件3', 'dev-3', "<span class='colorGrass'>已到岗</span>"],
|
['王师', '一车间', "<span class='colorRed'>未到岗</span>"],
|
||||||
['组件4', 'rea-1', "<span class='colorGrass'>已到岗</span>"],
|
['赵迪', '一车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件5', 'rea-2', "<span class='colorGrass'>已到岗</span>"],
|
['孟津', '一车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件6', 'fix-2', "<span class='colorGrass'>已到岗</span>"],
|
['孙东课', '一车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件7', 'fix-4', "<span class='colorGrass'>已到岗</span>"],
|
['周神秘', '二车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件8', 'fix-7', "<span class='colorRed'>未到岗</span>"],
|
['吴老弟', '二车间', "<span class='colorRed'>未到岗</span>"],
|
||||||
['组件9', 'dev-2', "<span class='colorRed'>未到岗</span>"],
|
['郑成功', '二车间', "<span class='colorGrass'>已到岗</span>"],
|
||||||
['组件10', 'dev-9', "<span class='colorGrass'>已到岗</span>"]
|
['冯宝宝', '二车间', "<span class='colorGrass'>已到岗</span>"]
|
||||||
],
|
],
|
||||||
rowNum: 7, //表格行数
|
rowNum: 7, //表格行数
|
||||||
headerHeight: 35,
|
headerHeight: 35,
|
||||||
headerBGC: '#0f1325', //表头
|
headerBGC: '#0f1325', //表头
|
||||||
oddRowBGC: '#0f1325', //奇数行
|
oddRowBGC: '#0f1325', //奇数行
|
||||||
evenRowBGC: '#171c33', //偶数行
|
evenRowBGC: '#171c33', //偶数行
|
||||||
index: true,
|
index: false,
|
||||||
columnWidth: [50],
|
// columnWidth: [50],
|
||||||
align: ['center']
|
align: ['center']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<span>
|
<span>
|
||||||
<el-icon class="el-icon-menu"></el-icon>
|
<el-icon class="el-icon-menu"></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
<span class="fs-xl text mx-2">工序成品率</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex ai-center flex-column body-box heightCover">
|
<div class="d-flex ai-center flex-column body-box heightCover">
|
||||||
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||||
|
|
|
||||||
|
|
@ -30,44 +30,43 @@
|
||||||
<div class="d-flex aside-width">
|
<div class="d-flex aside-width">
|
||||||
<div class="react-left ml-4 react-l-s">
|
<div class="react-left ml-4 react-l-s">
|
||||||
<span class="react-before"></span>
|
<span class="react-before"></span>
|
||||||
<span class="text">数据分析1</span>
|
<span class="text">数据统计</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-right ml-3">
|
<div class="react-right ml-3">
|
||||||
<span class="text">数据分析2</span>
|
<!--<span class="text">数据分析2</span>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex aside-width">
|
<div class="d-flex aside-width">
|
||||||
<div class="react-right bg-color-blue mr-3">
|
<div class="react-right bg-color-blue mr-3">
|
||||||
<span class="text fw-b">车间详情展示</span>
|
<span class="text fw-b">车间详情</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-right mr-4 react-l-s">
|
<div class="react-right mr-4 react-l-s">
|
||||||
<span class="react-after"></span>
|
<span class="react-after"></span>
|
||||||
<span class="text"
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
||||||
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body-box">
|
<div class="body-box">
|
||||||
<!-- 第三行数据 -->
|
<!-- 第三行数据 -->
|
||||||
<div id="centerWrap" class="content-box">
|
<div id="centerWrap" class="content-box">
|
||||||
<!-- 中间 -->
|
<!-- 数据统计 -->
|
||||||
<div>
|
<div>
|
||||||
<center />
|
<center />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<dv-border-box-1>
|
|
||||||
<centerLeft1 />
|
|
||||||
</dv-border-box-1>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dv-border-box-1>
|
|
||||||
<centerLeft1 />
|
|
||||||
</dv-border-box-1>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<centerRight2 />
|
<centerRight2 />
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-1>
|
||||||
|
<centerLeft1 />
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-1>
|
||||||
|
<centerLeft2 />
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-13>
|
<dv-border-box-13>
|
||||||
<centerRight1 />
|
<centerRight1 />
|
||||||
|
|
@ -93,6 +92,7 @@
|
||||||
import drawMixin from "../../utils/drawMixin";
|
import drawMixin from "../../utils/drawMixin";
|
||||||
import { formatTimeBigScreen } from '../../utils/index.js'
|
import { formatTimeBigScreen } from '../../utils/index.js'
|
||||||
import centerLeft1 from './centerLeft1'
|
import centerLeft1 from './centerLeft1'
|
||||||
|
import centerLeft2 from './centerLeft2'
|
||||||
import centerRight1 from './centerRight1'
|
import centerRight1 from './centerRight1'
|
||||||
import centerRight2 from './centerRight2'
|
import centerRight2 from './centerRight2'
|
||||||
import center from './center'
|
import center from './center'
|
||||||
|
|
@ -115,6 +115,7 @@
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
centerLeft1,
|
centerLeft1,
|
||||||
|
centerLeft2,
|
||||||
centerRight1,
|
centerRight1,
|
||||||
centerRight2,
|
centerRight2,
|
||||||
center,
|
center,
|
||||||
|
|
@ -122,8 +123,8 @@
|
||||||
bottomRight
|
bottomRight
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
window.open('http://49.232.14.174:2222/#/index');
|
// window.open('http://49.232.14.174:2222/#/index');
|
||||||
this.$router.go(-1)
|
// this.$router.go(-1)
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.timeFn();
|
this.timeFn();
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="合同编号" width="110">
|
<el-table-column label="合同编号" width="110">
|
||||||
<template slot-scope="scope" v-if="scope.row.order_">
|
<template slot-scope="scope" v-if="scope.row.order_">
|
||||||
{{scope.row.order_.contract_.number}}
|
<span v-if="scope.row.order_.contract_">{{scope.row.order_.contract_.number}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="产品名称" width="250">
|
<el-table-column label="产品名称" width="250">
|
||||||
|
|
@ -248,6 +248,7 @@
|
||||||
this.productionplanList = response.data;
|
this.productionplanList = response.data;
|
||||||
let list = response.data.results;
|
let list = response.data.results;
|
||||||
let arr = [];
|
let arr = [];
|
||||||
|
debugger;
|
||||||
list.forEach((item) => {
|
list.forEach((item) => {
|
||||||
// if (!item.children || item.children.length < 1) {
|
// if (!item.children || item.children.length < 1) {
|
||||||
let startTime = new Date(item.start_date).getTime();
|
let startTime = new Date(item.start_date).getTime();
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,8 @@
|
||||||
<template slot-scope="scope">{{ scope.row.order_.number }}</template>
|
<template slot-scope="scope">{{ scope.row.order_.number }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="合同编号" width="110">
|
<el-table-column label="合同编号" width="110">
|
||||||
<template slot-scope="scope" v-if="scope.row.contract">
|
<template slot-scope="scope" v-if="scope.row.order_.contract_">
|
||||||
{{scope.row.order_.contract_.number }}
|
<span v-if="scope.row.order_.contract_">{{scope.row.order_.contract_.number }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="产品名称" width="150" show-overflow-tooltip>
|
<el-table-column label="产品名称" width="150" show-overflow-tooltip>
|
||||||
|
|
|
||||||
|
|
@ -170,6 +170,7 @@
|
||||||
<template slot-scope="scope">{{ scope.row.subproduction_plan_.number }}</template>
|
<template slot-scope="scope">{{ scope.row.subproduction_plan_.number }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
label="所在子工序"
|
||||||
:filters="filtersList"
|
:filters="filtersList"
|
||||||
:filter-method="filterTag"
|
:filter-method="filterTag"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue