订单监控图

このコミットが含まれているのは:
朱菊兰 2023-11-22 16:58:32 +08:00
コミット dfc758bfae
24個のファイルの変更422行の追加275行の削除

ファイルの表示

@ -12,14 +12,14 @@ ENV = 'development'
VUE_APP_TITLE = MES系统
# 芋道管理系统/开发环境
VUE_APP_BASE_API = 'http://100.64.0.26:48082'
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
# VUE_APP_BASE_API = 'http://192.168.1.56:48082'
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
# 积木报表指向地址

バイナリ
public/favicon.ico

バイナリファイルは表示されません。

変更前

幅:  |  高さ:  |  サイズ: 2.0 KiB

変更後

幅:  |  高さ:  |  サイズ: 4.2 KiB

ファイルの表示

@ -113,6 +113,15 @@ export function orderMonitor(query) {
})
}
// 获取订单绑定的工单和数量信息可传订单id列表map索引为订单id
export function orderAssignmentList(query) {
return request({
url: '/base/order/orderAssignmentList',
method: 'get',
params: query
})
}
// 获得所有客户列表
export function customerList() {
return request({

20
src/assets/icons/svg/order-monitoring.svg ノーマルファイル
ファイルの表示

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 17</title>
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.695141">
<g id="最新参考" transform="translate(-1780.000000, -57.000000)" fill="#000000" fill-rule="nonzero">
<g id="编组-4" transform="translate(1772.000000, 48.000000)">
<g id="编组-17" transform="translate(8.000000, 9.000000)">
<rect id="矩形备份-2" opacity="0" x="0" y="0" width="16" height="16"></rect>
<g id="文档" transform="translate(2.436519, 1.472460)">
<path d="M9.61879642,0.990942446 C9.83682412,0.990942446 10.0548518,1.18867806 10.0548518,1.38641367 L10.0548518,11.6686655 C10.0548518,11.8664011 9.83682412,12.0641367 9.61879642,12.0641367 L3.60123204,12.0641367 L1.02850524,9.69130935 L1.02850524,1.38641367 C1.02850524,1.18867806 1.24653294,0.990942446 1.46456063,0.990942446 L9.61879642,0.990942446 M9.61879642,0.2 L1.50816617,0.2 C0.810477546,0.2 0.2,0.753659712 0.2,1.38641367 L0.2,10.0076863 L3.25238773,12.8550791 L9.61879642,12.8550791 C10.316485,12.8550791 10.9269626,12.3014194 10.9269626,11.6686655 L10.9269626,1.38641367 C10.9269626,0.753659712 10.316485,0.2 9.61879642,0.2 Z" id="形状"></path>
<path d="M9.61879642,0 C10.4228194,0 11.1269626,0.638607809 11.1269626,1.38641367 L11.1269626,11.6686655 C11.1269626,12.4164713 10.4228194,13.0550791 9.61879642,13.0550791 L3.25238773,13.0550791 L3.11596256,13.0013261 L0.0635748259,10.1539333 L0,10.0076863 L0,1.38641367 C0,0.638607809 0.704143212,0 1.50816617,0 L9.61879642,0 Z M9.61879642,0.4 L1.50816617,0.4 C0.91681188,0.4 0.4,0.868711615 0.4,1.38641367 L0.4,9.921 L3.331,12.6550791 L9.61879642,12.6550791 C10.1707271,12.6550791 10.657723,12.2467792 10.7202028,11.7714283 L10.7269626,11.6686655 L10.7269626,1.38641367 C10.7269626,0.868711615 10.2101507,0.4 9.61879642,0.4 Z M9.61879642,0.790942446 C9.94315845,0.790942446 10.2548518,1.07362615 10.2548518,1.38641367 L10.2548518,11.6686655 C10.2548518,11.981453 9.94315845,12.2641367 9.61879642,12.2641367 L3.60123204,12.2641367 L3.46563766,12.2111542 L0.892910861,9.83832691 L0.828505241,9.69130935 L0.828505241,1.38641367 C0.828505241,1.07362615 1.1401986,0.790942446 1.46456063,0.790942446 L9.61879642,0.790942446 Z M9.69667678,1.08901006 L1.38668992,1.08901006 C1.27286315,1.08901006 1.14612572,1.20395189 1.14612572,1.28821491 L1.14561083,9.66174324 L3.64342649,11.9659298 L9.69667678,11.9660691 C9.79153243,11.9660691 9.8953538,11.8862484 9.92732605,11.8108781 L9.93724098,11.7668642 L9.93724098,1.28821491 C9.93724098,1.20395189 9.81050356,1.08901006 9.69667678,1.08901006 Z" id="形状"></path>
<path d="M4.54092961,3.67913093 L2.25985278,3.67913093 C2.22052387,3.67913093 2.22052387,3.65291165 2.22052387,3.65291165 L2.22052387,2.91877199 C2.22052387,2.89255271 2.22052387,2.89255271 2.25985278,2.89255271 L4.54092961,2.89255271 C4.58025852,2.89255271 4.58025852,2.89255271 4.58025852,2.91877199 L4.58025852,3.65291165 L4.54092961,3.67913093 Z M8.86710981,5.44893192 L2.25985278,5.44893192 C2.22052387,5.44893192 2.22052387,5.44893192 2.22052387,5.40960301 L2.22052387,4.70168261 C2.22052387,4.6623537 2.22052387,4.6623537 2.25985278,4.6623537 L8.86710981,4.6623537 C8.90643872,4.6623537 8.90643872,4.6623537 8.90643872,4.70168261 L8.90643872,5.40960301 L8.86710981,5.44893192 Z M8.86710981,7.41537746 L2.25985278,7.41537746 C2.22052387,7.41537746 2.22052387,7.41537746 2.22052387,7.37604855 L2.22052387,6.66812815 C2.22052387,6.62879924 2.22052387,6.62879924 2.25985278,6.62879924 L8.86710981,6.62879924 C8.90643872,6.62879924 8.90643872,6.62879924 8.90643872,6.66812815 L8.90643872,7.37604855 L8.86710981,7.41537746 Z" id="形状"></path>
<path d="M8.86710981,6.44841431 C9.00606257,6.44841431 9.08682365,6.5291754 9.08682365,6.66812815 L9.08682365,7.37604855 L9.03399013,7.50359996 L8.99466122,7.54292887 L8.86710981,7.59576239 L2.25985278,7.59576239 C2.12090003,7.59576239 2.04013894,7.51500131 2.04013894,7.37604855 L2.04013894,6.66812815 C2.04013894,6.5291754 2.12090003,6.44841431 2.25985278,6.44841431 L8.86710981,6.44841431 Z M8.72520451,6.80870958 L2.40090881,6.80870958 L2.40090881,7.23441802 L8.72520451,7.23441802 L8.72520451,6.80870958 Z M8.86710981,4.48196877 C9.00606257,4.48196877 9.08682365,4.56272985 9.08682365,4.70168261 L9.08682365,5.40960301 L9.03399013,5.53715441 L8.99466122,5.57648333 L8.86710981,5.62931685 L2.25985278,5.62931685 C2.12090003,5.62931685 2.04013894,5.54855576 2.04013894,5.40960301 L2.04013894,4.70168261 C2.04013894,4.56272985 2.12090003,4.48196877 2.25985278,4.48196877 L8.86710981,4.48196877 Z M8.72520451,4.84251382 L2.40090881,4.84251382 L2.40090881,5.26822226 L8.72520451,5.26822226 L8.72520451,4.84251382 Z M4.54092961,2.71216778 C4.66811215,2.71216778 4.76064346,2.77385532 4.76064346,2.91877199 L4.76064346,3.65291165 L4.68031808,3.80300099 L4.64098917,3.82922026 L4.54092961,3.85951586 L2.25985278,3.85951586 C2.18859958,3.85951586 2.12331983,3.83050264 2.08113204,3.77425225 C2.04130723,3.6964836 2.04130723,3.6964836 2.04013894,3.65291165 L2.04013894,2.91877199 C2.04013894,2.77385532 2.13267025,2.71216778 2.25985278,2.71216778 L4.54092961,2.71216778 Z M4.39957385,3.07293764 L2.40090881,3.07293764 L2.40090881,3.49864608 L4.39957385,3.49864608 L4.39957385,3.07293764 Z" id="形状"></path>
<path d="M3.50158987,12.5394187 L3.50158987,9.83587533 L0.88525753,9.83587533 L0.88525753,8.96376455 L3.93764526,8.96376455 C4.19927849,8.96376455 4.37370065,9.1381867 4.37370065,9.39981994 L4.37370065,12.5394187 L3.50158987,12.5394187 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

変更後

幅:  |  高さ:  |  サイズ: 5.8 KiB

ファイルの表示

@ -69,7 +69,7 @@ const tableProps = [
prop: 'createTime',
label: '添加时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'deliveryCarCode',
@ -81,7 +81,7 @@ const tableProps = [
prop: 'loadTime',
label: '装车时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'productName',

ファイルの表示

@ -78,7 +78,7 @@ const tableProps = [
prop: 'deliveryTime',
label: '发货时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'code',

ファイルの表示

@ -122,7 +122,7 @@ const tableProps = [
prop: 'deliveryTime',
label: '发货时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'code',
@ -151,7 +151,7 @@ const tableProps2 = [
prop: 'createTime',
label: '添加时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'deliveryCarCode',
@ -162,7 +162,7 @@ const tableProps2 = [
prop: 'loadTime',
label: '装车时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'productName',

ファイルの表示

@ -39,14 +39,12 @@
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-col :span="12">
<el-form-item label="是否采集" prop="collection">
<el-switch v-model="form.collection"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-col :span="12">
<el-form-item label="描述" prop="description">
<el-input v-model="form.description"></el-input>
</el-form-item>

ファイルの表示

@ -37,6 +37,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width='30%'
>
<energy-plc-connect-add ref="energyPlcConnect" :objList="objList" @successSubmit="successSubmit" />
</base-dialog>

ファイルの表示

@ -9,7 +9,7 @@
width="120">
</el-table-column>
</el-table>
<span v-if='singlePrice'><span class='priceTitle'>单价(): </span>{{ singlePrice }}</span>
<span v-if='singlePrice'><span class='priceTitle'>单价(): </span>{{ singlePrice.toFixed(2) }}</span>
<el-button
slot="reference"
type="text"
@ -32,7 +32,8 @@ const temp1 = [
},
{
prop: 'price',
label: '单价(元)'
label: '单价(元)',
align: 'right'
}
]
const temp2 = [
@ -46,7 +47,8 @@ const temp2 = [
},
{
prop: 'price',
label: '单价(元)'
label: '单价(元)',
align: 'right'
}
]
export default {
@ -78,12 +80,20 @@ export default {
console.log(res)
if (res.data.pricingMethod === 0) {
this.tableProps = this.temp1
this.tableData = res.data.segPriceList
this.singlePrice = ''
let arr1 = res.data.segPriceList
for (let item of arr1) {
item.price = item.price.toFixed(2)
}
this.tableData = arr1
} else if (res.data.pricingMethod === 1) {
this.tableProps = this.temp2
this.tableData = res.data.usedPriceList
this.singlePrice = ''
let arr2 = res.data.usedPriceList
for (let item of arr2) {
item.price = item.price.toFixed(2)
}
this.tableData = arr2
} else {
this.tableProps = []
this.tableData = []

ファイルの表示

@ -1,5 +1,5 @@
<template>
<el-form ref="form" :rules="rules" label-width="80px" :model="form">
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
<el-row>
<el-col :span="12">
<el-form-item label="能源类型" prop="name">

ファイルの表示

@ -26,28 +26,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="监控模式" prop="type">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
<el-option label="合并" :value= "1" ></el-option>
<el-option label="详细" :value= "2" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="指标类型" prop="limitType">
@ -61,10 +39,32 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监控模式" prop="type">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
<el-option label="合并" :value= "1" ></el-option>
<el-option label="详细" :value= "2" ></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="消耗量阈值">
<el-input-number v-model="form.minValue" placeholder="最小值" :max="10000000000000000" style="width: 50%;"></el-input-number>
<el-input-number v-model="form.maxValue" placeholder="最大值" :max="10000000000000000" style="width: 50%;"></el-input-number>
<el-input-number v-model="form.minValue" placeholder="最小值" :max="9999999" style="width: 50%;"></el-input-number>
<el-input-number v-model="form.maxValue" placeholder="最大值" :max="9999999" style="width: 50%;"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>

ファイルの表示

@ -37,7 +37,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width='60%'
width='50%'
>
<energy-limit-add ref="energyLimit" @successSubmit="successSubmit" :energyTypeList="energyTypeList" :objList="objList"/>
</base-dialog>

ファイルの表示

@ -40,13 +40,13 @@ const tableProps = [
prop: 'startTime',
label: '开始时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'endTime',
label: '结束时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'statisticName',

ファイルの表示

@ -70,7 +70,7 @@ export default {
},
{
type: 'datePicker',
label: '时间(必填)',
label: '时间',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: "timestamp",
@ -80,7 +80,8 @@ export default {
param: 'timeVal',
defaultSelect: [],
width: 350,
clearable: false
clearable: false,
required:true
},
{
type: 'button',

ファイルの表示

@ -172,11 +172,11 @@ export default {
this.$modal.msgWarning('工单不能为空')
return false
}
if (!val.objType) {
if (!val.energyTypeId) {
this.$modal.msgWarning('能源类型不能为空')
return false
}
if (!val.energyTypeId) {
if (!val.objType) {
this.$modal.msgWarning('对象维度不能为空')
return false
}

ファイルの表示

@ -58,7 +58,7 @@ const tableProps = [
prop: 'createTime',
label: '创建时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'name',

ファイルの表示

@ -2,14 +2,16 @@
<div>
<el-drawer title="查看详情" :visible.sync="visible" size="70%">
<div class="box">
<el-form :inline="true">
<el-form-item label="工单名称">
<el-input v-model="queryParams.workOrderName" size='small' readonly></el-input>
</el-form-item>
<el-form-item label="班组名称">
<el-input v-model="queryParams.teamName" size='small' readonly></el-input>
</el-form-item>
</el-form>
<el-row class="topBox">
<el-col :span="6">
<p class="boldTitle">工单名称</p>
<p class="lightText">{{ queryParams.workOrderName ? queryParams.workOrderName : '-' }}</p>
</el-col>
<el-col :span="6">
<p class="boldTitle">班组名称</p>
<p class="lightText">{{ queryParams.teamName ? queryParams.teamName : '-' }}</p>
</el-col>
</el-row>
<base-table
:table-props="tableProps"
:table-data="tableData"
@ -27,13 +29,13 @@ const tableProps = [
prop: 'startTime',
label: '开始时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'endTime',
label: '结束时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'num',
@ -49,17 +51,15 @@ export default {
data() {
return {
visible: false,
workOrderName: '',
teamName: '',
tableProps,
tableData: [],
tableH: this.tableHeight(200),
tableH: this.tableHeight(260),
queryParams: {}
}
},
created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(200)
this.tableH = this.tableHeight(260)
})
},
methods: {
@ -79,5 +79,23 @@ export default {
<style lang="scss" scoped>
.box {
padding: 0 32px;
.topBox {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #E9E9E9;
.boldTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0,0,0,0.85);
margin: 0;
margin-bottom: 10px;
}
.lightText {
font-size: 14px;
font-weight: 400;
color: rgba(102,102,102,0.75);
margin: 0;
}
}
}
</style>

ファイルの表示

@ -59,7 +59,8 @@ export default {
label: '工单',
selectOptions: [],
param: 'workOrderId',
clearable: false
clearable: false,
filterable: true
},
{
type: 'button',

ファイルの表示

@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="160"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
@ -42,7 +42,7 @@ const tableProps = [
prop: 'createTime',
label: '排班创建时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'startDay',
@ -53,13 +53,13 @@ const tableProps = [
prop: 'startTime',
label: '上班时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'endTime',
label: '下班时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'classesName',
@ -120,8 +120,8 @@ export default {
tableBtn: [
this.$auth.hasPermi('base:team-production:detail')
? {
type: 'viewDetail',
btnName: '查看生产情况'
type: 'detail',
btnName: '详情'
}
: undefined
].filter((v) => v),

ファイルの表示

@ -65,7 +65,7 @@ const tableProps = [
prop: 'createTime',
label: '添加时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'name',
@ -101,12 +101,12 @@ const tableProps = [
{
prop: 'planQuantity',
label: '计划加工量',
width: 90
width: 100
},
{
prop: 'actualQuantity',
label: '实际加工量',
width: 90
width: 100
},
{
prop: 'productName',
@ -341,6 +341,7 @@ export default {
item.customerId = i.name
}
}
item.price = item.price.toFixed(2)
})
this.list = arr
}

ファイルの表示

@ -5,6 +5,7 @@
<span class="blueTitle"></span>
<span>订单编码: {{orderMsg.code}}</span>
</div>
<el-button type="primary" plain size="small" style="float: right;" @click="returnOrderManage">返回</el-button>
<div style="padding-left: 14px;">
<el-row>
<el-col :span='3'>
@ -133,7 +134,7 @@ const tableProps1 = [
prop: 'issueTime',
label: '下发时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'name',
@ -147,19 +148,19 @@ const tableProps1 = [
minWidth: 150
},
{
prop: 'planQuantity',
prop: 'planAssignmentQuantity',
label: '计划加工量',
width: 90
width: 100
},
{
prop: 'actualQuantity',
label: '实际加工量',
width: 90
width: 100
},
{
prop: 'actualArea',
label: '加工平方数',
width: 90
width: 100
},
{
prop: 'status',
@ -170,13 +171,13 @@ const tableProps1 = [
prop: 'startProduceTime',
label: '开始时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'finishProduceTime',
label: '结束时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'productLineNames',
@ -278,6 +279,10 @@ export default {
}
})
})
},
//
returnOrderManage() {
this.$router.push({path: '/order/base/order-manage'})
}
}
}

ファイルの表示

@ -0,0 +1,168 @@
<template>
<div>
<div class="boxTitle">
<span class="blueTitle"></span>
<span>各订单环形图</span>
</div>
<div class="chartBox" id='orderChartBox' v-show='chartList.length'>
<div class="chartItem" v-for="(item, index) in chartList" :key='index' :style="{width: 388*beilv+'px',height: 286*beilv+'px',padding:14*beilv+'px',marginRight:9*beilv+'px',marginBottom:9*beilv+'px'}">
<div class="topTitle" :style="{fontSize: 14 * beilv + 'px'}">
<svg-icon icon-class="order-monitoring" :style="{fontSize: 16*beilv+'px'}"/>
<span class="orderName" :style="{paddingRight:8*beilv+'px',marginRight:8*beilv+'px'}">{{item.orderName}}</span>
<span>订单计划数量{{item.num}}</span>
</div>
<div
:id="item.id"
:style="{width: 166*beilv+'px',height: 166*beilv+'px',margin: 'auto'}"
></div>
<div class="legend" :style="{height: 54 * beilv + 'px', marginTop: 10*beilv+'px'}">
<div class="legendItem" v-for="(subItem, i) in item.workOrder" :key='i' :style="{paddingRight:9*beilv+'px',marginRight:9*beilv+'px'}">
<span class="itemNum" :style="{fontSize: 18 * beilv + 'px'}">{{subItem.value}}</span>
<div>
<span class="itemName" :style="{fontSize: 14 * beilv + 'px'}">
<span class="smallBlock" :style="{backgroundColor:subItem.color,width:8*beilv+'px',height:8*beilv+'px'}"></span>
{{subItem.name}}
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 空图 -->
<div class="no-data-bg" v-show='!chartList.length'></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils/debounce'
export default {
name: 'MonitoringRingCharts',
props: {
chartList: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
myChart: [],
beilv: 1,
canvasReset: ''
}
},
mounted() {
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
this.canvasReset = debounce(() => {
this.initChart()
}, 500)
window.addEventListener('resize', () => {
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
this.canvasReset()
})
},
methods: {
//
initChart() {
if (this.chartList.length <= 0) {
return false
}
//
for (let j = 0;j < this.chartList.length; j++) {
if (this.myChart[j]) {
this.myChart[j].dispose() // Dom
}
}
for (let i = 0; i < this.chartList.length; i++) {
var chartDom = document.getElementById(this.chartList[i].id);
this.myChart[i] = echarts.init(chartDom);
let colorList = []
this.chartList[i].workOrder.map(item => {
colorList.push(item.color)
})
let percentage = (this.chartList[i].sunNum/this.chartList[i].num*100).toFixed(0)
var option = {
color: colorList,
series: [
{
name: 'Access From',
type: 'pie',
radius: ['75%', '95%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'center',
color: '#000',
formatter: [
'{a|'+percentage+'%}',
'{b|生产'+this.chartList[i].sunNum+'}'
].join('\n\n'),
rich: {
a: {
fontSize: this.beilv*24 +'px'
},
b: {
fontSize: this.beilv*12 +'px'
}
}
},
emphasis: {
disabled: true
},
labelLine: {
show: false
},
data: this.chartList[i].workOrder
}
]
};
option && this.myChart[i].setOption(option)
}
}
}
}
</script>
<style lang='scss' scoped>
.chartBox {
width: 100%;
padding-right: 6px;
height: calc(100vh - 310px);
display: flex;
flex-flow: row wrap;
overflow: auto;
align-content: flex-start;
.chartItem {
border-radius: 8px;
border: 1px solid #CACACA;
.topTitle {
margin-bottom: 10px;
.orderName {
border-right: 1px solid #CACACA;
}
}
.legend {
text-align: center;
white-space: nowrap;
overflow: auto;
.legendItem {
display: inline-block;
border-right: 1px solid #E8E8E8;
.itemName {
.smallBlock {
display: inline-block;
}
}
}
.legendItem:last-child {
border: none;
}
}
}
}
</style>

ファイルの表示

@ -6,59 +6,45 @@
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<base-table
:page="1"
:limit="5000"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="250"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
<el-tabs v-model="activeName" @tab-click="toggleTab">
<el-tab-pane label="数据列表" name="dataList"></el-tab-pane>
<el-tab-pane label="环形图" name="barChart"></el-tab-pane>
</el-tabs>
<!-- -->
<div v-if="activeName === 'dataList'">
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="250"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getPage"
/>
</base-table>
<!-- <el-tabs v-model="activeName" @tab-click="toggleTab">
<el-tab-pane label="数据列表" name="dataList">
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="250"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
</el-tab-pane>
<el-tab-pane label="环形图" name="barChart">
<div class="boxTitle">
<span class="blueTitle"></span>
<span>各订单环形图</span>
</div>
<div
id="orderPieBar"
style="width: 182px; height: 180px;"
></div>
</el-tab-pane>
</el-tabs> -->
</div>
<!-- -->
<monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList'/>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { parseTime } from '@/utils/ruoyi'
import { publicFormatter } from '@/utils/dict'
import { orderMonitor, orderList } from '@/api/base/orderManage'
import { orderMonitor, orderAssignmentList } from '@/api/base/orderManage'
import MonitoringRingCharts from './../components/monitoringRingCharts'
import moment from "moment"
const tableProps = [
{
prop: 'name',
@ -76,13 +62,13 @@ const tableProps = [
prop: 'planStartTime',
label: '计划开始时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'planFinishTime',
label: '计划完成时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'status',
@ -93,13 +79,13 @@ const tableProps = [
prop: 'startProduceTime',
label: '实际开始时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'finishProduceTime',
label: '实际完成时间',
filter: parseTime,
minWidth: 150
minWidth: 160
},
{
prop: 'productLines',
@ -125,7 +111,7 @@ const tableProps = [
{
prop: 'workOrderNum',
label: '关联工单数量',
width: 100
width: 110
}
]
export default {
@ -134,9 +120,8 @@ export default {
return {
formConfig: [
{
type: 'select',
type: 'input',
label: '订单名称',
selectOptions: [],
param: 'name'
},
{
@ -162,15 +147,14 @@ export default {
activeName: 'dataList',
//
queryParams: {
// pageNo: 1,
// pageSize: 5000,
pageNo: 1,
pageSize: 20,
name: null,
startProduceTime: []
},
tableProps,
list: [],
// tableH: this.tableHeight(270),
tableH: this.tableHeight(230),
tableH: this.tableHeight(315),
total: 0,
tableBtn: [
this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
@ -191,149 +175,79 @@ export default {
btnName: '发货详情'
}
: undefined
].filter((v) => v)
].filter((v) => v),
chartList: []
}
},
components: { MonitoringRingCharts },
mounted() {
window.addEventListener('resize', () => {
// this.tableH = this.tableHeight(270)
this.tableH = this.tableHeight(230)
this.tableH = this.tableHeight(315)
})
this.getOrderList()
let start = moment().subtract(30, 'days').format('yyyy-MM-DD')
let end = moment().format('yyyy-MM-DD')
this.formConfig[1].defaultSelect = [start, end]
this.queryParams.startProduceTime[0] = start + ' 00:00:00'
this.queryParams.startProduceTime[1] = end + ' 23:59:59'
this.getPage()
},
methods: {
getOrderList() {
orderList({}).then(res => {
this.formConfig[0].selectOptions = res.data || []
})
},
getPage() {
//
orderMonitor({...this.queryParams}).then(res => {
this.list = res.data || []
// this.getPieChart()
this.list = res.data.records || []
this.total = res.data.total || 0
if (this.list.length > 0) {
let orderIdList = []
this.list.map(item => {
orderIdList.push(item.orderid)
})
//
orderAssignmentList({orderIdList:orderIdList}).then(res => {
let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A']
let tempArr = res.data || {}
let tempArr2 = []
for (let key in tempArr) {
let tempArr3 = []
let obj = {}
obj.orderName = tempArr[key][0].orderName
obj.id = key
obj.num = tempArr[key][0].planQuantity
let sunNum = 0
for (let i = 0; i < tempArr[key].length; i++) {
let subObj = {}
subObj.value = tempArr[key][i].actualAssignmentQuantity
subObj.name = tempArr[key][i].woName
if (i < 5) {
subObj.color = color[i]
} else {
subObj.color = color[i%5]
}
sunNum+=tempArr[key][i].actualAssignmentQuantity
tempArr3.push(subObj)
}
tempArr3.push({
value: tempArr[key][0].planQuantity - sunNum > 0 ? tempArr[key][0].planQuantity - sunNum : 0,
name: '未下发',
color: '#F5F5F5'
})
obj.sunNum = sunNum
obj.workOrder = tempArr3
tempArr2.push(obj)
}
this.chartList = tempArr2
if (this.activeName === 'barChart' && this.chartList.length > 0) {
this.$nextTick(() => {
this.$refs.monitoringRingCharts.initChart()
})
}
})
}else{
//
this.chartList = []
}
})
},
//
getPieChart() {
var chartDom = document.getElementById('orderPieBar');
var myChart = echarts.init(chartDom);
var option = {
color:['#288AFF','#7164FF','#fff','#63BDFF','#8EF0AB','#FFCE6A'],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['92%', '100%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center'
},
emphasis: {
disabled: true,
scale:false,
scaleSize: 0
},
labelLine: {
show: false
},
data: [
{ value: 1000, name: '1' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['84%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
disabled: true,
scale:false,
scaleSize: 0
},
labelLine: {
show: false
},
data: [
{ value: 50 ,name: '2' },
{ value: 500, name: 'xxx' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['76%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
disabled: true,
scale:false,
scaleSize: 0
},
labelLine: {
show: false
},
data: [
{ value: 250, name: '3' },
{ value: 750, name: 'xxx' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['68%', '76%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
disabled: true,
scale:false,
scaleSize: 0
},
labelLine: {
show: false
},
data: [
{ value: 800, name: '4' },
{ value: 1048, name: 'xxx' }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['60%', '68%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
disabled: true,
scale:false,
scaleSize: 0
},
labelLine: {
show: false
},
data: [
{ value: 800, name: '5' },
{ value: 1048, name: 'xxx' }
]
}
]
}
option && myChart.setOption(option)
},
//
buttonClick(val) {
this.queryParams.name = val.name
@ -365,8 +279,10 @@ export default {
}
},
toggleTab() {
if (this.activeName === 'barChart') {
this.getPieChart()
if (this.activeName === 'barChart' && this.chartList.length > 0) {
this.$nextTick(() => {
this.$refs.monitoringRingCharts.initChart()
})
}
}
}
@ -382,7 +298,6 @@ export default {
width: 100%;
height: 2px;
background-color: #e4e7ed;
/* z-index: 1; */
}
.el-tabs__nav-wrap::after {
width: 0;
@ -404,7 +319,7 @@ export default {
font-size: 16px;
font-weight: 400;
color: #000000;
margin:0 10px 20px 0;
margin:0 10px 16px 0;
}
.blueTitle {
content: '';