feat：首页研发
This commit is contained in:
parent
e11525c66e
commit
783fb3de2b
@ -144,8 +144,8 @@ export default {
|
|||||||
document.title = '机器视觉平台应用与推广项目'
|
document.title = '机器视觉平台应用与推广项目'
|
||||||
break;
|
break;
|
||||||
case '9406':
|
case '9406':
|
||||||
this.title = '企业作业综合可视化监管平台'
|
this.title = '车间产线出入库管理系统'
|
||||||
document.title = '企业作业综合可视化监管平台'
|
document.title = '车间产线出入库管理系统'
|
||||||
break;
|
break;
|
||||||
case '9407':
|
case '9407':
|
||||||
// 重庆市工程管理有限公司数字化提升
|
// 重庆市工程管理有限公司数字化提升
|
||||||
|
|||||||
@ -24,6 +24,7 @@
|
|||||||
<interface-home v-else-if="port === '9406'" />
|
<interface-home v-else-if="port === '9406'" />
|
||||||
<machine v-else-if="port === '9407'" />
|
<machine v-else-if="port === '9407'" />
|
||||||
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
||||||
|
<workshop v-else-if="port === '9408'"></workshop>
|
||||||
<home-page v-else></home-page>
|
<home-page v-else></home-page>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -50,6 +51,7 @@ import information from './informationManagement/home/index'
|
|||||||
import machine from './machineVision/home/index.vue'
|
import machine from './machineVision/home/index.vue'
|
||||||
import qcfgquality from './qcfgjIndustrialVision/qcfgquality/index'
|
import qcfgquality from './qcfgjIndustrialVision/qcfgquality/index'
|
||||||
import cdapChart from './cdap/chart/index'
|
import cdapChart from './cdap/chart/index'
|
||||||
|
import workshop from './workshop/index'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
HomePage,
|
HomePage,
|
||||||
@ -73,7 +75,8 @@ export default {
|
|||||||
information,
|
information,
|
||||||
machine,
|
machine,
|
||||||
qcfgquality,
|
qcfgquality,
|
||||||
cdapChart
|
cdapChart,
|
||||||
|
workshop
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
9
god-ui/src/views/workshop/aip.js
Normal file
9
god-ui/src/views/workshop/aip.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
//销售订单
|
||||||
|
export const selectTotalOrderAmount=(query)=> {
|
||||||
|
return request({
|
||||||
|
url: '/wmsSaleOrder/wmsSaleOrder/selectTotalOrderAmount',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
805
god-ui/src/views/workshop/index.vue
Normal file
805
god-ui/src/views/workshop/index.vue
Normal file
@ -0,0 +1,805 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="topList">
|
||||||
|
<div v-for="(item, index) in topList" :key="index" class="topList-item">
|
||||||
|
<div
|
||||||
|
style="margin-bottom: 10px; font-size: 20px; font-family: 'TitleFont'"
|
||||||
|
>
|
||||||
|
{{ item.value }} {{ item.unit }}
|
||||||
|
</div>
|
||||||
|
<div>{{ item.title }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="barPie">
|
||||||
|
<div
|
||||||
|
style="width: 32%; height: 100%; background-color: #fff"
|
||||||
|
id="chartBar"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 33%; height: 100%; background-color: #fff"
|
||||||
|
id="chartPie1"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 32%; height: 100%; background-color: #fff"
|
||||||
|
id="chartPie2"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="barPie">
|
||||||
|
<div
|
||||||
|
style="width: 32%; height: 100%; background-color: #fff"
|
||||||
|
id="chartLine"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 33%; height: 100%; background-color: #fff"
|
||||||
|
id="chartPie3"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 32%; height: 100%; background-color: #fff"
|
||||||
|
id="chartLine2"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div
|
||||||
|
style="width: 45%; height: 300px; background-color: #fff"
|
||||||
|
id="chartBar2"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
style="width: 53%; height: 300px; background-color: #fff; display: flex"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px;
|
||||||
|
width: 18%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-direction: column;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div>在线设备</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-align: center;
|
||||||
|
color: green;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 15px;
|
||||||
|
font-family: 'TitleFont';
|
||||||
|
"
|
||||||
|
>
|
||||||
|
24
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-direction: column;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div>离线设备</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
color: red;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'TitleFont';
|
||||||
|
"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="chartPie4" style="width: 81%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { listPurchaseOrder } from "@/api/wms/purchase/purchaseOrder";
|
||||||
|
import { listWmsSaleOrder } from "@/api/wmsSaleOrder/wmsSaleOrder";
|
||||||
|
import { listWmsDeviceInterface } from "@/api/deviceInterface/wmsDeviceInterface";
|
||||||
|
import { listManage } from "@/api/wmsProduct/manage";
|
||||||
|
import {
|
||||||
|
generateBaseOptions,
|
||||||
|
generatePieOptions,
|
||||||
|
initChartStatic,
|
||||||
|
} from "@/utils/bigscreenTool/index.js";
|
||||||
|
const sourceSys = "WMS";
|
||||||
|
const interfaceType = "WmsSaleOrder";
|
||||||
|
import { selectTotalOrderAmount } from "./aip";
|
||||||
|
import { time } from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
orderCode: null,
|
||||||
|
orderDate: null,
|
||||||
|
productType: null,
|
||||||
|
handledOrg: null,
|
||||||
|
handledBy: null,
|
||||||
|
orderStatus: null,
|
||||||
|
customerNum: null,
|
||||||
|
customerName: null,
|
||||||
|
creditCode: null,
|
||||||
|
registAddr: null,
|
||||||
|
contactPerson: null,
|
||||||
|
contactPhone: null,
|
||||||
|
accountName: null,
|
||||||
|
accountBank: null,
|
||||||
|
accountNumber: null,
|
||||||
|
taxPriceVal: null,
|
||||||
|
totalPriceVal: null,
|
||||||
|
taxVal: null,
|
||||||
|
sourceSys: sourceSys,
|
||||||
|
interfaceType: interfaceType,
|
||||||
|
},
|
||||||
|
topList: [
|
||||||
|
{
|
||||||
|
title: "采购订单",
|
||||||
|
value: "1310.9",
|
||||||
|
unit: "万",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销售订单",
|
||||||
|
value: 0,
|
||||||
|
unit: "万",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "退货单",
|
||||||
|
value: "0",
|
||||||
|
unit: "单",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "残次比例",
|
||||||
|
value: "18.3",
|
||||||
|
unit: "%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车间设备",
|
||||||
|
value: "",
|
||||||
|
unit: "台",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getselectTotalOrderAmount();
|
||||||
|
this.getlistWmsDeviceInterface();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChrt1();
|
||||||
|
this.initChrt2();
|
||||||
|
this.initChrt3();
|
||||||
|
this.initChrt4();
|
||||||
|
this.initChrt5();
|
||||||
|
this.initChrt6();
|
||||||
|
this.initChrt7();
|
||||||
|
this.initChrt8();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//销售订单
|
||||||
|
getselectTotalOrderAmount() {
|
||||||
|
selectTotalOrderAmount().then((res) => {
|
||||||
|
console.log(res, "xiaoshoudingdan");
|
||||||
|
this.topList[1].value = (res.data.sum / 10000).toFixed(2);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//车间设备 退货单
|
||||||
|
getlistWmsDeviceInterface() {
|
||||||
|
listWmsDeviceInterface({ pageNum: 1, pageSize: 10 }).then((res) => {
|
||||||
|
this.topList[4].value = res.total;
|
||||||
|
});
|
||||||
|
listManage({ pageNum: 1, pageSize: 10 }).then((res) => {
|
||||||
|
console.log(res, "rrr");
|
||||||
|
this.topList[2].value = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initChrt1() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartBar",
|
||||||
|
generateBaseOptions({
|
||||||
|
title: {
|
||||||
|
text: "出入库分析",
|
||||||
|
top: "5%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ["建筑水泥", "建筑橡胶", "户内门"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: true, top: "bottom", left: "center" },
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "kg",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
//网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: {
|
||||||
|
//网格线样式
|
||||||
|
color: "#0735a2", //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: "dashed", //网格线类型
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
//网格区域
|
||||||
|
show: true, //是否显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "出库",
|
||||||
|
data: [45000, 23750, 12000],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 30,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "入库",
|
||||||
|
data: [36600, 4910, 9203],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 30,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: "10%",
|
||||||
|
bottom: "15%",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt2() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartPie1",
|
||||||
|
generatePieOptions({
|
||||||
|
title: {
|
||||||
|
text: "退货分类",
|
||||||
|
top: "2%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
top: "center",
|
||||||
|
left: "right",
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#a5a5a5", "#ffc000"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "数据详情",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["36%", "60%"],
|
||||||
|
center: ["37%", "50%"],
|
||||||
|
data: [
|
||||||
|
{ name: "建筑白灰", value: "1" },
|
||||||
|
{ name: "建筑钢筋", value: "1" },
|
||||||
|
{ name: "建筑水泥", value: "3" },
|
||||||
|
{ name: "建筑橡胶", value: "2" },
|
||||||
|
{ name: "入户门", value: "3" },
|
||||||
|
{ name: "室内玻璃", value: "4" },
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{c|{c}},{d}% ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
per: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt3() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartPie2",
|
||||||
|
generatePieOptions({
|
||||||
|
title: {
|
||||||
|
text: "退货原因分析",
|
||||||
|
top: "2%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
top: "center",
|
||||||
|
left: "right",
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#bdbdbd", "#ffc000 "],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "数据详情",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["36%", "60%"],
|
||||||
|
center: ["37%", "50%"],
|
||||||
|
data: [
|
||||||
|
{ name: "无理由退还", value: "7" },
|
||||||
|
{ name: "尺寸不合适", value: "1" },
|
||||||
|
{ name: "运输问题", value: "6" },
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{c|{c}},{d}% ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
per: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt4() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartLine",
|
||||||
|
generateBaseOptions({
|
||||||
|
title: {
|
||||||
|
text: "残次趋势分析",
|
||||||
|
top: "5%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ["5月", "6月", "7月"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: true, top: "bottom", left: "center" },
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
//网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: {
|
||||||
|
//网格线样式
|
||||||
|
color: "#0735a2", //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: "dashed", //网格线类型
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
//网格区域
|
||||||
|
show: true, //是否显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "数据详情",
|
||||||
|
data: [2, 2, 1],
|
||||||
|
type: "line",
|
||||||
|
barWidth: 30,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: "5%",
|
||||||
|
bottom: "15%",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt5() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartPie3",
|
||||||
|
generatePieOptions({
|
||||||
|
title: {
|
||||||
|
text: "销售分布分析(万)",
|
||||||
|
top: "2%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
top: "center",
|
||||||
|
left: "right",
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#a5a5a5"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "数据详情",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["36%", "60%"],
|
||||||
|
center: ["37%", "50%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "桐盛建材",
|
||||||
|
value: (309394 / 10000).toFixed(2),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "青鹏水泥",
|
||||||
|
value: (388440 / 10000).toFixed(2),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "安达橡胶",
|
||||||
|
value: (37440 / 10000).toFixed(2),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{c|{c}},{d}% ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
per: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt6() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartLine2",
|
||||||
|
generateBaseOptions({
|
||||||
|
title: {
|
||||||
|
text: "残次趋势分析",
|
||||||
|
top: "5%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ["5月", "6月", "7月"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: true, top: "bottom", left: "center" },
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
//网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: {
|
||||||
|
//网格线样式
|
||||||
|
color: "#0735a2", //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: "dashed", //网格线类型
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
//网格区域
|
||||||
|
show: true, //是否显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#aeaeae"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "A级",
|
||||||
|
data: [2, 1, 1],
|
||||||
|
type: "line",
|
||||||
|
barWidth: 30,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "B级",
|
||||||
|
data: [5, 2, 0],
|
||||||
|
type: "line",
|
||||||
|
barWidth: 30,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "C级",
|
||||||
|
data: [2, 1, 1],
|
||||||
|
type: "line",
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: "10%",
|
||||||
|
bottom: "15%",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChrt7() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartBar2",
|
||||||
|
generateBaseOptions({
|
||||||
|
title: {
|
||||||
|
text: "残次趋势分析",
|
||||||
|
top: "5%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ["5月", "6月", "7月"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: true, top: "bottom", left: "center" },
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: '1',
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
//网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: {
|
||||||
|
//网格线样式
|
||||||
|
color: "#0735a2", //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: "dashed", //网格线类型
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
//网格区域
|
||||||
|
show: true, //是否显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2",
|
||||||
|
type: "value",
|
||||||
|
max:100,
|
||||||
|
min:0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#25252545",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
//网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: {
|
||||||
|
//网格线样式
|
||||||
|
color: "#0735a2", //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: "dashed", //网格线类型
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
//网格区域
|
||||||
|
show: true, //是否显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#aeaeae"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "生产总量",
|
||||||
|
data: [3200, 3500, 5000],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 30,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "残次品",
|
||||||
|
data: [480, 500, 500],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 30,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "合格率",
|
||||||
|
data: [85.0, 85.71, 90.0],
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
label: {
|
||||||
|
show: true, // 显示标签
|
||||||
|
position: "top", // 标签位置顶部
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: "10%",
|
||||||
|
bottom: "15%",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
initChrt8() {
|
||||||
|
initChartStatic(
|
||||||
|
"chartPie4",
|
||||||
|
generatePieOptions({
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
top: "center",
|
||||||
|
left: "right",
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#5b9bd5", "#ed7d31", "#a5a5a5"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "数据详情",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["36%", "60%"],
|
||||||
|
center: ["37%", "50%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "挖掘机械",
|
||||||
|
value: "6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "搅拌设备",
|
||||||
|
value: "2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "起重机械",
|
||||||
|
value: "8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "输送机械",
|
||||||
|
value: "3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "铲运机械",
|
||||||
|
value: "6",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{c|{c}},{d}% ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
per: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
padding: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
.topList {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
.topList-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 90px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.barPie {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user