zcdsj
/
hberp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bigScreenAdjustandContractNumber

This commit is contained in:
shijing 2022-03-09 15:09:47 +08:00
parent 8272368813
commit 8643475e68
12 changed files with 517 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
hb_client/src/assets/scss/index.scss
View File

@ -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;

206
hb_client/src/views/bigScreen/bottomLeft.vue
View File

@ -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,21 +165,10 @@
show: false show: false
} }
}, },
yAxis: [ yAxis:{
{ splitLine: {
splitLine: {show: false}, show: false
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
}, },
axisLabel: {
formatter: "{value} "
}
},
{
splitLine: {show: false},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#B4B4B4" color: "#B4B4B4"
@ -207,26 +177,10 @@
axisLabel: { axisLabel: {
formatter: "{value} " 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));
} }
}, },

491
hb_client/src/views/bigScreen/bottomRight.vue
View File

@ -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: "",
textStyle: {
color: "#D3D6DD",
fontSize: 24,
fontWeight: "normal"
},
subtext: newData.year + "/" + newData.weekCategory[6],
subtextStyle: {
color: "#fff",
fontSize: 16
},
top: 50,
left: 80
},
legend: {
top: 120,
left: 80,
orient: "vertical",
itemGap: 15,
itemWidth: 12,
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: [ data: [
{ ['张思', '2022-03-05'],
value: newData.radarDataAvg[6], ['李森', '2022-03-05'],
name: "平均指标", ['王师', '2022-03-05'],
itemStyle: { ['赵迪', '2022-03-05'],
normal: { ['孟津', '2022-03-05'],
color: "#f8d351" ['孙东课', '2022-03-05'],
} ['周神秘', '2022-03-05'],
}, ['吴老弟', '2022-03-05'],
lineStyle: { ['郑成功', '2022-03-05'],
normal: { ['冯宝宝', '2022-03-05']
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, rowNum: 15, //表格行数
label: { headerHeight: 40,
normal: { headerBGC: '#0f1325', //表头
formatter: "平均值: \n {c}" oddRowBGC: '#0f1325', //奇数行
} evenRowBGC: '#171c33', //偶数行
}, index: false,
lineStyle: { // columnWidth: [50],
normal: { align: ['center']
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;
} }

48
hb_client/src/views/bigScreen/center.vue
View File

@ -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: {

35
hb_client/src/views/bigScreen/centerLeft1.vue
View File

@ -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"
], ],

237
hb_client/src/views/bigScreen/centerLeft2.vue Normal file
View File

@ -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>

26
hb_client/src/views/bigScreen/centerRight1.vue
View File

@ -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']
} }
} }

2
hb_client/src/views/bigScreen/centerRight2.vue
View File

@ -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" />

39
hb_client/src/views/bigScreen/index.vue
View File

@ -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();

3
hb_client/src/views/pm/management.vue
View File

@ -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();

4
hb_client/src/views/pm/plan.vue
View File

@ -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>

1
hb_client/src/views/wpm/need.vue
View File

@ -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"
> >