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

fix:7车间看板图标数据调整，以及7车间不合格统计去掉合格数

This commit is contained in:
shijing 2024-03-29 09:41:16 +08:00
parent 4d2328540f
commit e6488c51a5
1 changed files with 791 additions and 606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

631
src/views/bigScreen/index_7dept.vue
View File

@ -1,89 +1,154 @@
<template> <template>
<el-container class="dashboard"> <el-container class="dashboard">
<el-header class="header"> <el-header class="header">
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div> <div
<div style="font-size: 14px;margin-top:18px">{{ currentDay }}{{ currentTime }}</div> style="
font-weight: bold;
font-family: 'myfont';
font-size: 32px;
"
>
7车间生产数据大看板
</div>
<div style="font-size: 14px; margin-top: 18px">
{{ currentDay }}{{ currentTime }}
</div>
</el-header> </el-header>
<el-main> <el-main>
<el-row style="height: 60%" :gutter="10"> <el-row style="height: 60%" :gutter="10">
<el-col :xs="24" :md="10" style="height: 100%;"> <el-col :xs="24" :md="10" style="height: 100%">
<div class="box" style="height: 29%"> <div class="box" style="height: 29%">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel">今日任务</div> <div class="boxlabel">今日任务</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px"></div>
<div class="boxmain bigdata border" style="overflow:scroll;padding:5px;">
<div v-for="item in todayMtask" :key="item.id"
style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
<div <div
style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee"> class="boxmain bigdata border"
<span style="font-size:12px">{{ item.material_out_name }}</span> style="overflow: scroll; padding: 5px"
>
<div
v-for="item in todayMtask"
:key="item.id"
style="
width: 50%;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
"
>
<div
style="
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #eeeeee;
"
>
<span style="font-size: 12px">{{
item.material_out_name
}}</span>
<span <span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont"> style="
color: #fef000;
margin-left: 10px;
font-weight: bold;
font-family: electronicFont;
"
>
{{ item.count }} {{ item.count }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="height: 1%;"></div> <div style="height: 1%"></div>
<el-row style="height:70%"> <el-row style="height: 70%">
<el-col style="height: 100%;"> <el-col style="height: 100%">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel">任务进度</div> <div class="boxlabel">任务进度</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px"></div>
<div class="boxmain" id="scrollContainer1"> <div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1" <scScrollTavle
:rowData="processData" :titleData="liData1" :refValue="refValue1"> v-if="table1Visible"
:tableHeight="containerHeight1"
:rowData="processData"
:titleData="liData1"
:refValue="refValue1"
>
</scScrollTavle> </scScrollTavle>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :xs="24" :md="14" style="height: 100%;"> <el-col :xs="24" :md="14" style="height: 100%">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel">生产线</div> <div class="boxlabel">生产线</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px"></div>
<div class="boxmain" id="scrollContainer2"> <div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="lineData" <scScrollTavle
:titleData="liData2" :refValue="refValue2"></scScrollTavle> v-if="table2Visible"
:tableHeight="containerHeight2"
:rowData="lineData"
:titleData="liData2"
:refValue="refValue2"
></scScrollTavle>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div style="height: 1%"></div> <div style="height: 1%"></div>
<el-row style="height:39%" :gutter="10"> <el-row style="height: 39%" :gutter="10">
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">本月生产统计</div> <div
style="
margin-left: 6px;
font-size: 18px;
margin-top: 6px;
"
>
本月生产统计
</div> </div>
<div class="boxmain" id="chart1">
</div> </div>
<div class="boxmain" id="chart1"></div>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div> <div
style="
margin-left: 6px;
font-size: 18px;
margin-top: 6px;
"
>
本月合格率统计
</div> </div>
<div class="boxmain" id="chart2">
</div> </div>
<div class="boxmain" id="chart2"></div>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :md="6"> <el-col :xs="24" :md="6">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div> <div
style="
margin-left: 6px;
font-size: 18px;
margin-top: 6px;
"
>
昨日不合格统计
</div> </div>
<div class="boxmain" id="chart3">
</div> </div>
<div class="boxmain" id="chart3"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -93,7 +158,7 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import scScrollTavle from '@/components/scScrollTable.vue'; import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) { function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
} }
@ -102,183 +167,238 @@ export default {
data() { data() {
return { return {
basicOption: { basicOption: {
backgroundColor: '', backgroundColor: "",
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross', type: "cross",
label: { label: {
backgroundColor: '#6a7985' backgroundColor: "#6a7985",
} },
} },
}, },
legend: { legend: {
icon: "stack", icon: "stack",
right: 0, right: 0,
data: [{ data: [
backgroundColor: 'rgb(1,235,239)', {
name: '生产数', backgroundColor: "rgb(1,235,239)",
name: "生产数",
itemStyle: { itemStyle: {
// color:'rgb(1,235,239)', // color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(250,205,0)' color: "rgb(250,205,0)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(254,129,0)' color: "rgb(254,129,0)",
}]) },
]
),
}, },
textStyle: { textStyle: {
color: '#fff' color: "#fff",
} },
}], },
],
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '2%', right: "2%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: true, boundaryGap: true,
data: ['1号炉', '2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'], data: [
"1号炉",
"2号炉",
"3号炉",
"4号炉",
"5号炉",
"6号炉",
"7号炉",
"8号炉",
],
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: "#ffffff",
}, },
axisLabel: { axisLabel: {
color: '#ffffff' color: "#ffffff",
}, },
}, },
yAxis: [ yAxis: [
{ {
name: "", name: "",
type: 'value', type: "value",
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: "#ffffff",
}, },
axisLabel: { axisLabel: {
color: '#ffffff' color: "#ffffff",
}, },
splitLine: { splitLine: {
show: false, show: false,
}, },
} },
], ],
series: [{ series: [
name: '生产数', {
type: 'bar', name: "生产数",
type: "bar",
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1, color: 'rgb(1,235,239)' width: 1,
color: "rgb(1,235,239)",
}, },
barWidth: 30, barWidth: 30,
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(1,235,239)' color: "rgb(1,235,239)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(5, 158, 163)' color: "rgb(5, 158, 163)",
} },
]) ]
),
}, },
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
label: { label: {
show: true, show: true,
position: 'top', position: "top",
color: '#fff' color: "#fff",
}, },
itemStyle: { itemStyle: {
borderRadius: [2, 2, 0, 0], borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(250,205,0)' color: "rgb(250,205,0)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(254,129,0)' color: "rgb(254,129,0)",
}
])
}, },
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 340, 250] ]
}] ),
},
data: [
140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250,
140, 232, 101, 264, 90, 340, 250, 340, 250,
],
},
],
}, },
chart3Option: { chart3Option: {
backgroundColor: '', backgroundColor: "",
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
legend: { legend: {
top: 'bottom', top: "bottom",
}, },
series: { series: {
name: '完成率', name: "不合格统计",
type: 'pie', type: "pie",
radius: '50%', radius: "50%",
itemStyle: { itemStyle: {
borderRadius: 2 borderRadius: 2,
}, },
center: ['50%', '45%'], center: ["50%", "45%"],
data: [ data: [
{ value: 0, name: '炸纹' }, { value: 0, name: "炸纹" },
{ value: 0, name: '条纹' }, { value: 0, name: "条纹" },
{ value: 0, name: '气泡' }, { value: 0, name: "气泡" },
{ value: 0, name: '弯曲' }, { value: 0, name: "弯曲" },
{ value: 0, name: '其他' }, { value: 0, name: "其他" },
{ value: 0, name: '合格' },
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: "rgba(0, 0, 0, 0.5)",
} },
} },
} },
}, },
containerHeight1: 100, containerHeight1: 100,
containerHeight2: 100, containerHeight2: 100,
table1Visible: false, table1Visible: false,
table2Visible: false, table2Visible: false,
refValue1: 'moocBox1', refValue1: "moocBox1",
refValue2: 'moocBox2', refValue2: "moocBox2",
liData1: ['序号', '规格', '型号', '完成进度', '产量', '任务时间', '状态'], liData1: [
"序号",
"规格",
"型号",
"完成进度",
"产量",
"任务时间",
"状态",
],
processData: [], processData: [],
liData2: ['序号', '炉号', '产品名称', '型号', '规格', '合格数量', '锅数', '设备状态'], liData2: [
"序号",
"炉号",
"产品名称",
"型号",
"规格",
"合格数量",
"锅数",
"设备状态",
],
lineData: [], lineData: [],
todayMtask: [], todayMtask: [],
time: null, time: null,
delay: 20, delay: 20,
dayInterval: null, dayInterval: null,
days: 30, days: 30,
today: '', today: "",
start_date: '', start_date: "",
end_date: '', end_date: "",
currentTime: '', currentTime: "",
currentDay: '', currentDay: "",
yesterday: '', yesterday: "",
chartInterval1: null, chartInterval1: null,
chartInterval2: null, chartInterval2: null,
chartInterval3: null, chartInterval3: null,
} };
}, },
mounted() { mounted() {
//表格table1的显示 //表格table1的显示
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight; this.containerHeight1 =
document.getElementById("scrollContainer1").clientHeight;
this.table1Visible = true; this.table1Visible = true;
//表格table2的显示 //表格table2的显示
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight; this.containerHeight2 =
document.getElementById("scrollContainer2").clientHeight;
this.table2Visible = true; this.table2Visible = true;
let date = new Date(); let date = new Date();
let year = date.getFullYear(); let year = date.getFullYear();
@ -286,43 +406,55 @@ export default {
let day = date.getDate(); let day = date.getDate();
let days = new Date(year, month, 0).getDate(); let days = new Date(year, month, 0).getDate();
this.days = days; this.days = days;
let start_date = year + '-' + month + '-01'; let start_date = year + "-" + month + "-01";
let lastDay = new Date(year, month, 0).getDate(); let lastDay = new Date(year, month, 0).getDate();
let end_date = year + '-' + month + '-' + lastDay; let end_date = year + "-" + month + "-" + lastDay;
this.start_date = start_date; this.start_date = start_date;
this.end_date = end_date; this.end_date = end_date;
this.today = year + '-' + month + '-' + day; this.today = year + "-" + month + "-" + day;
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000); let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(); this.yesterday =
yesterday.getFullYear() +
"-" +
(yesterday.getMonth() + 1) +
"-" +
yesterday.getDate();
this.getProductLine(); this.getProductLine();
this.getUtask(); this.getUtask();
this.getTodayMtask(); this.getTodayMtask();
this.getLineData(); this.getLineData();
//时间 //时间
this.showTime() this.showTime();
this.dayInterval = setInterval(() => { this.dayInterval = setInterval(() => {
this.showTime() this.showTime();
}, 1000) }, 1000);
}, },
methods: { methods: {
showTime() { showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss') this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日') this.currentDay = this.$TOOL.dateFormat(
new Date(),
"yyyy年MM月dd日"
);
}, },
setChart(name, option = null) { setChart(name, option = null) {
// 根据name 渲染数据, option需填写，否则option为模拟数据 // 根据name 渲染数据, option需填写，否则option为模拟数据
var myChart = echarts.getInstanceByDom(document.getElementById(name)); var myChart = echarts.getInstanceByDom(
document.getElementById(name)
);
if (myChart == undefined) { if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' }); myChart = echarts.init(document.getElementById(name), "dark", {
renderer: "svg",
});
} }
if (option == null) { if (option == null) {
option = Object.assign({}, this.basicOption) option = Object.assign({}, this.basicOption);
} }
setTimeout(() => { setTimeout(() => {
try { try {
myChart.setOption(option); myChart.setOption(option);
} catch (error) { } } catch (error) {}
}, 500) }, 500);
}, },
//任务进度 //任务进度
getUtask() { getUtask() {
@ -330,25 +462,33 @@ export default {
let obj = {}; let obj = {};
obj.start_date__gte = this.start_date; obj.start_date__gte = this.start_date;
obj.end_date__lte = this.end_date; obj.end_date__lte = this.end_date;
obj.belong_dept__name = '7车间'; obj.belong_dept__name = "7车间";
obj.page = 0; obj.page = 0;
that.$API.pm.utask.list.req(obj).then((res) => { that.$API.pm.utask.list.req(obj).then((res) => {
console.log('任务进度:', res); console.log("任务进度:", res);
let processData = []; let processData = [];
res.forEach(item => { res.forEach((item) => {
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}; let arr = [],
obj1.elType = 'primary'; obj1 = {},
obj2 = {},
obj3 = {},
obj4 = {},
obj5 = {},
obj6 = {};
obj1.elType = "primary";
obj1.value = item.material_.model; obj1.value = item.material_.model;
obj2.elType = 'primary'; obj2.elType = "primary";
obj2.value = item.material_.specification; obj2.value = item.material_.specification;
obj3.elType = 'progress'; obj3.elType = "progress";
let process = Math.round((item.count_ok / item.count) * 100) let process = Math.round(
(item.count_ok / item.count) * 100
);
obj3.value = process; obj3.value = process;
obj4.elType = 'primary'; obj4.elType = "primary";
obj4.value = item.count_ok; obj4.value = item.count_ok;
obj5.elType = 'primary'; obj5.elType = "primary";
obj5.value = item.start_date + '-' + item.end_date; obj5.value = item.start_date + "-" + item.end_date;
obj6.elType = 'tag'; obj6.elType = "tag";
obj6.value = item.state; obj6.value = item.state;
arr.push(obj1); arr.push(obj1);
arr.push(obj2); arr.push(obj2);
@ -364,28 +504,35 @@ export default {
//7车间生产按炉进度 //7车间生产按炉进度
getLineData() { getLineData() {
let that = this; let that = this;
that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => { that.$API.bi.dataset.exec.req("linedept7", {}).then((res) => {
console.log('7车间生产线:', res); console.log("7车间生产线:", res);
let list = res.data2.ds0; let list = res.data2.ds0;
if (list.length > 0) { if (list.length > 0) {
let lineData = []; let lineData = [];
list.forEach(item => { list.forEach((item) => {
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}; let arr = [],
obj1.elType = 'primary'; obj1 = {},
obj1.value = item.equip_number;//炉号 obj2 = {},
obj2.elType = 'primary'; obj3 = {},
obj4 = {},
obj5 = {},
obj6 = {},
obj7 = {};
obj1.elType = "primary";
obj1.value = item.equip_number; //炉号
obj2.elType = "primary";
obj2.value = item.material_name; obj2.value = item.material_name;
obj3.elType = 'primary'; obj3.elType = "primary";
obj3.value = item.material_model; obj3.value = item.material_model;
obj4.elType = 'primary'; obj4.elType = "primary";
obj4.value = item.material_specification; obj4.value = item.material_specification;
obj5.elType = 'primary'; obj5.elType = "primary";
let process = item.count_ok let process = item.count_ok;
obj5.value = process; obj5.value = process;
obj6.elType = 'primary'; obj6.elType = "primary";
obj6.value = item.index; obj6.value = item.index;
obj7.elType = 'tag'; obj7.elType = "tag";
obj7.value = 'q' + item.equip_state; obj7.value = "q" + item.equip_state;
arr.push(obj1); arr.push(obj1);
arr.push(obj2); arr.push(obj2);
arr.push(obj3); arr.push(obj3);
@ -406,138 +553,172 @@ export default {
let obj1 = { let obj1 = {
query: { start_date: that.start_date, end_date: that.end_date }, query: { start_date: that.start_date, end_date: that.end_date },
}; };
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => { that.$API.bi.dataset.exec.req("stoveStatics", obj1).then((res1) => {
console.log('本月生产统计:', res1); console.log("本月生产统计:", res1);
let list1 = res1.data2.ds0; let list1 = res1.data2.ds0;
let seriesData1 = [], xAxisData1 = []; let seriesData1 = [],
xAxisData1 = [];
if (list1.length > 0) { if (list1.length > 0) {
list1.forEach(item1 => { list1.forEach((item1) => {
xAxisData1.push(item1.equip_number); xAxisData1.push(item1.equip_name);
seriesData1.push(item1.count_real); seriesData1.push(item1.count_real);
}) });
} }
let chart1Option = deepCopy(this.basicOption) let chart1Option = deepCopy(this.basicOption);
chart1Option.xAxis.data = xAxisData1; chart1Option.xAxis.data = xAxisData1;
chart1Option.series[0].data = seriesData1; chart1Option.series[0].data = seriesData1;
let chart1 = that.setChart("chart1", chart1Option); let chart1 = that.setChart("chart1", chart1Option);
}); });
//本月合格率统计 //本月合格率统计
let obj2 = { let obj2 = {
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" }, query: {
start_date: that.start_date,
end_date: that.end_date,
dept_name: "7车间",
},
}; };
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => { that.$API.bi.dataset.exec.req("lineDay", obj2).then((res2) => {
console.log('本月合格率统计:', res2); console.log("本月合格率统计:", res2);
let list2 = res2.data2.ds0; let list2 = res2.data2.ds0;
let seriesData2 = [], xAxisData2 = []; let seriesData2 = [],
xAxisData2 = [];
for (let i = 0; i < that.days; i++) { for (let i = 0; i < that.days; i++) {
let day = i + 1; let day = i + 1;
let text = day + '日'; let text = day + "日";
xAxisData2[i] = text; xAxisData2[i] = text;
seriesData2[i] = 0; seriesData2[i] = 0;
} }
if (list2.length > 0) { if (list2.length > 0) {
list2.forEach(item2 => { list2.forEach((item2) => {
let index2 = item2.日 - 1; let index2 = item2.日 - 1;
seriesData2[index2] = Math.round(item2.合格率); seriesData2[index2] = Math.round(item2.合格率);
}) });
} }
let chart2Option = deepCopy(this.basicOption); let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = xAxisData2; chart2Option.xAxis.data = xAxisData2;
chart2Option.yAxis.name = '合格率'; chart2Option.yAxis.name = "合格率";
chart2Option.legend = { chart2Option.legend = {
icon: "stack", icon: "stack",
right: 0, right: 0,
data: [{ data: [
backgroundColor: 'rgb(250,205,0)', {
name: '合格率', backgroundColor: "rgb(250,205,0)",
name: "合格率",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(1,235,239)' color: "rgb(1,235,239)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(5, 158, 163)' color: "rgb(5, 158, 163)",
} },
]) ]
),
}, },
textStyle: { textStyle: {
color: '#fff' color: "#fff",
} },
}], },
],
}; };
let series2 = [{ let series2 = [
name: '合格率', {
type: 'line', name: "合格率",
type: "line",
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1, color: 'rgb(1,235,239)' width: 1,
color: "rgb(1,235,239)",
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(1,235,239)' color: "rgb(1,235,239)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(5, 158, 163)' color: "rgb(5, 158, 163)",
} },
]) ]
),
}, },
emphasis: { emphasis: {
focus: 'series' focus: "series",
}, },
label: { label: {
show: true, show: true,
position: 'top', position: "top",
color: '#fff' color: "#fff",
}, },
itemStyle: { itemStyle: {
borderRadius: [2, 2, 0, 0], borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: 'rgb(250,205,0)' color: "rgb(250,205,0)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(254,129,0)' color: "rgb(254,129,0)",
}
])
}, },
data: seriesData2 ]
}]; ),
},
data: seriesData2,
},
];
chart2Option.series = series2; chart2Option.series = series2;
let chart2 = that.setChart("chart2", chart2Option); let chart2 = that.setChart("chart2", chart2Option);
}); });
//车间生产昨日统计 12月1号 //车间生产昨日统计 12月1号
let obj3 = { let obj3 = {
query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "7车间" }, query: {
start_date: that.yesterday,
end_date: that.yesterday,
dept_name: "7车间",
},
}; };
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => { that.$API.bi.dataset.exec.req("lineDay", obj3).then((res3) => {
console.log('车间生产昨日统计:', res3); console.log("车间生产昨日统计:", res3);
let seriesData3 = [ let seriesData3 = [
{ value: 0, name: '炸纹' }, { value: 0, name: "炸纹" },
{ value: 0, name: '条纹' }, { value: 0, name: "条纹" },
{ value: 0, name: '气泡' }, { value: 0, name: "气泡" },
{ value: 0, name: '弯曲' }, { value: 0, name: "弯曲" },
{ value: 0, name: '其他' }, { value: 0, name: "其他" },
{ value: 0, name: '合格' }, ];
] if (res3.data2.ds0) {
if (res3.data2.ds0.length > 0) { let list3 = res3.data2.ds0;
let item3 = res3.data2.ds0[0]; if (list3.length > 0) {
that.yesterdayObjet = item3; list3.forEach((item3) => {
seriesData3[0].value = item3.炸纹; seriesData3[0].value += item3.炸纹;
seriesData3[1].value = item3.条纹; seriesData3[1].value += item3.条纹;
seriesData3[2].value = item3.气泡; seriesData3[2].value += item3.气泡;
seriesData3[3].value = item3.弯曲; seriesData3[3].value += item3.弯曲;
seriesData3[4].value = item3.其他; seriesData3[4].value += item3.其他;
seriesData3[5].value = item3.合格数; });
}
} }
that.chart3Option.series.data = seriesData3; that.chart3Option.series.data = seriesData3;
let chart3 = that.setChart("chart3", that.chart3Option); let chart3 = that.setChart("chart3", that.chart3Option);
@ -549,22 +730,21 @@ export default {
let obj = {}; let obj = {};
obj.start_date = this.today; obj.start_date = this.today;
obj.end_date = this.today; obj.end_date = this.today;
obj.mgroup__belong_dept__name = '7车间'; obj.mgroup__belong_dept__name = "7车间";
obj.page = 0; obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => { that.$API.pm.mtask.list.req(obj).then((res) => {
that.todayMtask = res; that.todayMtask = res;
console.log('今日任务:', res); console.log("今日任务:", res);
}); });
}, },
}, },
};
}
</script> </script>
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'myfont'; font-family: "myfont";
/* 字体名称 */ /* 字体名称 */
src: url('../../utils/youShe.ttf'); src: url("../../utils/youShe.ttf");
/* 字体文件相对路径 */ /* 字体文件相对路径 */
} }
@ -583,7 +763,7 @@ export default {
display: block; display: block;
height: 80px; height: 80px;
color: rgb(149, 255, 255); color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei'; font-family: "Microsoft Yahei";
text-align: center; text-align: center;
padding: 12px 0px; padding: 12px 0px;
} }
@ -598,11 +778,16 @@ export default {
font-size: 16px; font-size: 16px;
display: flex; display: flex;
height: 36px; height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451)); background: linear-gradient(
40deg,
rgba(11, 101, 140, 0.451),
rgba(0, 34, 48, 0.335),
rgba(11, 101, 140, 0.451)
);
} }
.bgimg { .bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png'); background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png");
background-size: 140% 100%; background-size: 140% 100%;
} }
@ -619,7 +804,7 @@ export default {
.flex_center { .flex_center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center justify-content: center;
} }
.border { .border {
@ -634,7 +819,7 @@ export default {
.boxlabel { .boxlabel {
margin-left: 6px; margin-left: 6px;
font-size: 18px; font-size: 18px;
margin-top: 6px margin-top: 6px;
} }
.wrapper { .wrapper {
@ -667,7 +852,7 @@ export default {
background-color: rgb(10, 39, 50); background-color: rgb(10, 39, 50);
} }
.rollData:nth-of-type(2n+1) { .rollData:nth-of-type(2n + 1) {
background-color: rgb(0, 59, 81); background-color: rgb(0, 59, 81);
} }
</style> </style>