src/api/base/orderManage.js

@@ -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({

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>

src/views/delivery/deliveryLog/components/deliveryLogDetail.vue

@@ -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',

src/views/delivery/deliveryLog/index.vue

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

src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue

@@ -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',

src/views/energy/base/energyPlcConnect/components/energyPlcParamAdd.vue

@@ -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-col :span="12">
-    <el-row>
-      <el-col :span="24">
         <el-form-item label="描述" prop="description">
           <el-input v-model="form.description"></el-input>
         </el-form-item>

src/views/energy/base/energyPlcConnect/index.vue

@@ -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>

src/views/energy/base/energyType/components/InnerTable.vue

@@ -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 = []

src/views/energy/base/energyType/components/energyTypeAdd.vue

@@ -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">

src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue

@@ -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.minValue" placeholder="最小值" :max="9999999" 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.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>

src/views/energy/monitoring/energyLimit/index.vue

@@ -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>

src/views/energy/monitoring/energyReport/index.vue

@@ -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',

src/views/energy/monitoring/energyReportSearch/index.vue

@@ -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',

src/views/energy/monitoring/orderEnergy/index.vue

@@ -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
       }

src/views/group/base/groupTeam/index.vue

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

src/views/group/monitoring/groupTeamView/components/groupTeamViewDetail.vue

@@ -2,14 +2,16 @@
   <div>
     <el-drawer title="查看详情" :visible.sync="visible" size="70%">
       <div class="box">
-        <el-form :inline="true">
+        <el-row class="topBox">
-          <el-form-item label="工单名称">
+          <el-col :span="6">
-            <el-input v-model="queryParams.workOrderName" size='small' readonly></el-input>
+            <p class="boldTitle">工单名称</p>
-          </el-form-item>
+            <p class="lightText">{{ queryParams.workOrderName ? queryParams.workOrderName : '-' }}</p>
-          <el-form-item label="班组名称">
+          </el-col>
-            <el-input v-model="queryParams.teamName" size='small' readonly></el-input>
+          <el-col :span="6">
-          </el-form-item>
+            <p class="boldTitle">班组名称</p>
-        </el-form>
+            <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>

src/views/group/monitoring/groupTeamView/index.vue

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

src/views/group/monitoring/teamProduction/index.vue

@@ -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',
+              type: 'detail',
-              btnName: '查看生产情况'
+              btnName: '详情'
             }
           : undefined
       ].filter((v) => v),

src/views/order/base/orderManage/index.vue

@@ -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
             }

src/views/order/base/orderManage/orderDetailData.vue

@@ -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'})
     }
   }
 }

src/views/order/monitoring/components/monitoringRingCharts.vue

@@ -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>

src/views/order/monitoring/orderCompletionMonitoring/index.vue

@@ -6,24 +6,12 @@
       ref="searchBarForm"
       @headBtnClick="buttonClick"
     />
-    <base-table
+    <el-tabs v-model="activeName" @tab-click="toggleTab">
-      :page="1"
+      <el-tab-pane label="数据列表" name="dataList"></el-tab-pane>
-      :limit="5000"
+      <el-tab-pane label="环形图" name="barChart"></el-tab-pane>
-      :table-props="tableProps"
+    </el-tabs>
-      :table-data="list"
+    <!-- 表 -->
-      :max-height="tableH"
+    <div v-if="activeName === 'dataList'">
-    >
-      <method-btn
-        v-if="tableBtn.length"
-        slot="handleBtn"
-        :width="250"
-        label="操作"
-        :method-list="tableBtn"
-        @clickBtn="handleClick"
-      />
-    </base-table>
-    <!-- <el-tabs v-model="activeName" @tab-click="toggleTab">
-      <el-tab-pane label="数据列表" name="dataList">
       <base-table
         :page="queryParams.pageNo"
         :limit="queryParams.pageSize"
@@ -40,25 +28,23 @@
           @clickBtn="handleClick"
         />
       </base-table>
-      </el-tab-pane>
+      <pagination
-      <el-tab-pane label="环形图" name="barChart">
+        :page.sync="queryParams.pageNo"
-        <div class="boxTitle">
+        :limit.sync="queryParams.pageSize"
-          <span class="blueTitle"></span>
+        :total="total"
-          <span>各订单环形图</span>
+        @pagination="getPage"
+      />
     </div>
-        <div 
+    <!-- 图 -->
-          id="orderPieBar"
+    <monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList'/>
-          style="width: 182px; height: 180px;"
-        ></div>
-      </el-tab-pane>
-    </el-tabs> -->
   </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,
+        pageNo: 1,
-        // pageSize: 5000,
+        pageSize: 20,
         name: null,
         startProduceTime: []
       },
       tableProps,
       list: [],
-      // tableH: this.tableHeight(270),
+      tableH: this.tableHeight(315),
-      tableH: this.tableHeight(230),
       total: 0,
       tableBtn: [
       this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
@@ -191,148 +175,78 @@ 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(315)
-      this.tableH = this.tableHeight(230)
     })
-    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.list = res.data.records || []
-        // this.getPieChart()
+        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 => {
-    getPieChart() {
+            let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A']
-      var chartDom = document.getElementById('orderPieBar');
+            let tempArr = res.data || {}
-      var myChart = echarts.init(chartDom);
+            let tempArr2 = []
-      var option = {
+            for (let key in tempArr) {
-        color:['#288AFF','#7164FF','#fff','#63BDFF','#8EF0AB','#FFCE6A'],
+              let tempArr3 = []
-        series: [
+              let obj = {}
-          {
+              obj.orderName = tempArr[key][0].orderName
-            name: 'Access From',
+              obj.id = key
-            type: 'pie',
+              obj.num = tempArr[key][0].planQuantity
-            radius: ['92%', '100%'],
+              let sunNum = 0
-            avoidLabelOverlap: false,
+              for (let i = 0; i < tempArr[key].length; i++) {
-            label: {
+                let subObj = {}
-              show: true,
+                subObj.value = tempArr[key][i].actualAssignmentQuantity
-              position: 'center'
+                subObj.name = tempArr[key][i].woName
-            },
+                if (i < 5) {
-            emphasis: {
+                  subObj.color = color[i]
-              disabled: true,
+                } else {
-              scale:false,
+                  subObj.color = color[i%5]
-              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' }
-            ]
                 }
-        ]
+                sunNum+=tempArr[key][i].actualAssignmentQuantity
+                tempArr3.push(subObj)
               }
-      option && myChart.setOption(option)
+              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 = []
+        }
+      })
     },
     // 查询
     buttonClick(val) {
@@ -365,8 +279,10 @@ export default {
         }
     },
     toggleTab() {
-      if (this.activeName === 'barChart') {
+      if (this.activeName === 'barChart' && this.chartList.length > 0) {
-        this.getPieChart()
+        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: '';