feat：首页研发
This commit is contained in:
parent
e11525c66e
commit
783fb3de2b
@ -144,8 +144,8 @@ export default {
|
||||
document.title = '机器视觉平台应用与推广项目'
|
||||
break;
|
||||
case '9406':
|
||||
this.title = '企业作业综合可视化监管平台'
|
||||
document.title = '企业作业综合可视化监管平台'
|
||||
this.title = '车间产线出入库管理系统'
|
||||
document.title = '车间产线出入库管理系统'
|
||||
break;
|
||||
case '9407':
|
||||
// 重庆市工程管理有限公司数字化提升
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<interface-home v-else-if="port === '9406'" />
|
||||
<machine v-else-if="port === '9407'" />
|
||||
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
||||
<workshop v-else-if="port === '9408'"></workshop>
|
||||
<home-page v-else></home-page>
|
||||
</div>
|
||||
</template>
|
||||
@ -50,6 +51,7 @@ import information from './informationManagement/home/index'
|
||||
import machine from './machineVision/home/index.vue'
|
||||
import qcfgquality from './qcfgjIndustrialVision/qcfgquality/index'
|
||||
import cdapChart from './cdap/chart/index'
|
||||
import workshop from './workshop/index'
|
||||
export default {
|
||||
components: {
|
||||
HomePage,
|
||||
@ -73,7 +75,8 @@ export default {
|
||||
information,
|
||||
machine,
|
||||
qcfgquality,
|
||||
cdapChart
|
||||
cdapChart,
|
||||
workshop
|
||||
},
|
||||
data() {
|
||||
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