williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

更新修改

Browse Source
This commit is contained in:
熊丽君
2022-01-22 16:33:17 +08:00
parent 0007b23b1e
commit 24501b0ac0
5 changed files with 262 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -43,6 +43,7 @@
"core-js": "3.8.1",
"echarts": "4.9.0",
"echarts-liquidfill": "^2.0.2",
"echarts5": "npm:echarts@^5.2.2",
"element-ui": "2.15.6",
"file-saver": "2.0.5",
"flv.js": "^1.6.2",

8
src/views/bigScreen/management/index.vue
View File

@ -3,19 +3,19 @@
<div class="left1">
<left1></left1>
</div>
<!-- <div class="left2">
<div class="left2">
<left2></left2>
</div> -->
</div>
<!-- <div class="bg1"></div> -->
<div class="center1">
<!-- <center1></center1> -->
<center1></center1>
</div>
<!-- <div class="center2">
<center2></center2>
</div> -->
<div class="right1">
<!-- <right1></right1> -->
<right1></right1>
</div>
<div class="right2">

1
src/views/bigScreen/management/left1.vue
View File

@ -644,6 +644,7 @@ export default {
<style lang="scss" scoped>
::v-deep.el-pagination button {
display: none;
color: #fff !important;
background-color: unset !important;
}

304
src/views/bigScreen/management/right2.vue
View File

@ -96,6 +96,7 @@ import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from "@/utils/colorPalette";
import echarts from "echarts";
import * as echarts5 from "echarts5";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
@ -305,6 +306,15 @@ export default {
}
});
},
setXdata(list, item, i) {
// ["", "", "2021", ""];
let arr = [];
for (let i = 0; i < list.length; i++) {
arr.push("");
}
arr[i] = item;
return arr;
},
initChart2() {
this.request({
url: "/hx/operating/getCivilIndustryPic",
@ -318,7 +328,6 @@ export default {
// console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
// console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
this.initChart3(categoryTotal);
var app = {};
var posList = [
"left",
@ -407,7 +416,7 @@ export default {
};
var labelOption = {
show: true,
show: false,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
@ -421,8 +430,66 @@ export default {
},
},
};
let newData = [];
for (let i = 0; i < list.length; i++) {
const item = list[i];
const itemLength = item.length;
const listLength = list.length;
if (itemLength > listLength) listLength = itemLength;
for (let j = 0; j < itemLength; j++) {
let arr = Array.apply(null, Array(listLength)).map(() => "");
const item2 = item[j];
if (item2.realQuantity != 0 && item2.realQuantity != null) {
arr[i] = item2.realQuantity;
this.chart2 = echarts.init(this.$refs.chart2);
newData.push({
barMaxWidth: 30,
name: item2.category,
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: i,
data: arr.splice(0, i + 1),
});
}
}
}
let newRate = [[], [], []];
for (let i = 0; i < list.length; i++) {
const item = list[i];
for (let j = 0; j < item.length; j++) {
const item2 = item[j];
if (item2.category == "隔热") {
if (item2.quantityRate) {
newRate[0].push(item2.quantityRate);
} else {
newRate[0].push(0);
}
}
if (item2.category == "稀土") {
if (item2.quantityRate) {
newRate[1].push(item2.quantityRate);
} else {
newRate[1].push(0);
}
}
if (item2.category == "其他") {
if (item2.quantityRate) {
newRate[2].push(item2.quantityRate);
} else {
newRate[2].push(0);
}
}
// if (item2.realQuantity != 0 && item.planQuantity != 0) {
// const rate = (item2.realQuantity / item2.planQuantity) * 100;
// newRate[i].push(rate > 100 ? 100 : rate);
// } else {
// newRate[i].push(0);
// }
}
}
console.log(newRate);
this.chart2 = echarts5.init(this.$refs.chart2);
this.chart2.setOption({
color: colorList,
tooltip: {
@ -457,94 +524,58 @@ export default {
textStyle: {
color: "#fff",
},
data: ["Forest", "Steppe", "Desert"],
},
toolbox: {
show: true,
orient: "vertical",
left: "right",
top: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ["line", "bar", "stack", "tiled"],
},
restore: { show: true },
saveAsImage: { show: true },
},
data: [
"隔热",
"稀土",
"其他",
"隔热完成率",
"稀土完成率",
"其他完成率",
],
},
// echars 转折线和 echars下载
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// magicType: {
// show: true,
// type: ["line", "bar", "stack", "tiled"],
// },
// restore: { show: true },
// saveAsImage: { show: true },
// },
// },
dataZoom: {
type: "slider",
start: 0,
end: 50,
end: 100,
textStyle: {
color: "#fff",
},
},
xAxis: [
{
...monthList.map((e, i) => {
return {
type: "category",
axisTick: { show: false },
position: "bottom",
data: ["2012", "", "", "", ""],
data: this.setXdata(monthList, e, i),
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
{
type: "category",
axisTick: { show: false },
position: "bottom",
data: ["", "2013", "", "", ""],
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
{
type: "category",
axisTick: { show: false },
position: "bottom",
data: ["", "", "2014", "", ""],
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
{
type: "category",
axisTick: { show: false },
position: "bottom",
data: ["", "", "", "2015", ""],
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
{
type: "category",
axisTick: { show: false },
position: "bottom",
data: ["", "", "", "", "2016"],
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
};
}),
],
yAxis: [
{
min: 0,
max: 100,
interval: 20,
splitLine: {
show: true,
// 改变轴线颜色
@ -562,96 +593,67 @@ export default {
},
},
},
{
type: "value",
min: 0,
max: 100,
// interval: 5,
axisLabel: {
formatter: "{value} %",
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: "rgb(255, 255, 255)",
},
},
},
],
series: [
...newData,
{
name: "Forest",
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: 0,
data: [320],
name: "隔热完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: newRate[0],
itemStyle: {
normal: {
color: colorList[0],
},
},
symbol: "none",
},
{
name: "Steppe",
type: "bar",
label: labelOption,
xAxisIndex: 0,
data: [220],
name: "稀土完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: newRate[1],
itemStyle: {
normal: {
color: colorList[1],
},
},
symbol: "none",
},
{
name: "Desert",
type: "bar",
label: labelOption,
xAxisIndex: 0,
data: [332],
name: "其他完成率",
type: "line",
yAxisIndex: 1,
smooth: false,
data: newRate[2],
itemStyle: {
normal: {
color: colorList[2],
},
{
name: "Forest",
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: 1,
data: ["", 320],
},
{
name: "Steppe",
type: "bar",
label: labelOption,
xAxisIndex: 1,
data: ["", 220],
},
{
name: "Desert",
type: "bar",
label: labelOption,
xAxisIndex: 1,
data: ["", 232],
},
{
name: "Forest",
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: 2,
data: ["", "", 320],
},
{
name: "Steppe",
type: "bar",
label: labelOption,
xAxisIndex: 2,
data: ["", "", 420],
},
{
name: "Desert",
type: "bar",
label: labelOption,
xAxisIndex: 2,
data: ["", "", 232],
},
{
name: "Forest",
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: 3,
data: ["", "", "", 320],
},
{
name: "Forest",
type: "bar",
barGap: 0,
label: labelOption,
xAxisIndex: 4,
data: ["", "", "", "", 620],
},
{
name: "Steppe",
type: "bar",
label: labelOption,
xAxisIndex: 4,
data: ["", "", "", "", 290],
symbol: "none",
},
],
});

6
src/views/bigScreen/qualityManage/center.vue
View File

@ -51,8 +51,8 @@
<div><span style="font-weight: bold">产品错、漏检率</span></div>
<div class="box">
<span
>{{ dataInfo.errorCheckRate.toFixed(2) }}%/{{
dataInfo.leakCheckRate.toFixed(2)
>{{ dataInfo.realErrorCheckRate }}%/{{
dataInfo.targetErrorCheckRate
}}%</span
>
</div>
@ -72,7 +72,7 @@
<div class="data-item">
<div><span style="font-weight: bold">质量检查完成率</span></div>
<div class="box">
<span>{{ dataInfo.checkCompleteRate }}</span
<span>{{ dataInfo.checkCompleteRate.toFixed(2) }}</span
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
dataInfo.qualityNotificationCompleteTotal
}}</span>