src/views/OperationalOverview/components/newPie.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-11 15:27:23
+ * @LastEditTime: 2022-11-17 16:35:33
  * @Description:
 -->
 <template>
@@ -93,6 +93,7 @@ export default {
         // 默认的legend配置
         legend: {
           orient: 'vertical',
+          show: false,
           bottom: 0,
           itemHeight: 10,
           itemWidth: 10,
@@ -112,16 +113,16 @@ export default {
             rich: {
               a: {
                 align: 'center',
-                fontSize: 13,
+                fontSize: 12,
                 fontWeight: 400,
                 color: 'rgba(255, 255, 255, 0.7)',
-                padding: [0, 4],
+                padding: [0, 1],
                 lineHeight: 16
               },
               b: {
                 // verticalAlign: 'top',
                 align: 'center',
-                fontSize: 13,
+                fontSize: 12,
                 fontWeight: 400,
                 color: 'rgba(255, 255, 255)'
               },
@@ -170,7 +171,7 @@ export default {
         },
         // 默认的series配置
         series: {
-          center: ['60%', '55%'],
+          center: ['50%', '55%'],
           radius: ['50%', '70%'],
           silent: true,
           avoidLabelOverlap: false,
@@ -215,19 +216,19 @@ export default {
             text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
             subtext: '总共',
             top: '48%',
-            left: '59%',
+            left: '49%',
             textAlign: 'center',
             itemGap: 5,
             textStyle: {
               color: '#fff',
-              fontSize: 26,
+              fontSize: 26 * this.beilv,
               fontWeight: 400,
               lineHeight: 15
             },
             subtextStyle: {
               color: 'rgba(255, 255, 255, 0.7)',
               fontWeight: 400,
-              fontSize: 14,
+              fontSize: 14 * this.beilv,
               lineHeight: 20
             }
           }
@@ -259,6 +260,17 @@ export default {
             ...this.seriesConfig,
             itemStyle: {
               normal: {
+                label: {
+                  show: true,
+                  fontSize: 14 * this.beilv,
+                  formatter: '{d}%\n{name|{b}}',
+                  rich: {
+                    name: {
+                      color: 1,
+                      fontSize: 10 * this.beilv
+                    }
+                  }
+                },
                 color: (list) => {
                   var colorList = [
                     {
@@ -292,10 +304,10 @@ export default {
                 }
               }
             },
-            label: {
+            labelLine: {
-              formatter: [
+              length: 8,
-                '{d}%'
+              length2: 15,
-              ].join('\n')
+              maxSurfaceAngle: 80
             },
             data: this.seriesData.map((item, index) => {
               item.label = {

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -2,42 +2,107 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-08 16:06:39
+ * @LastEditTime: 2022-11-17 16:39:20
  * @Description:
 -->
 <template>
   <div class="container">
+    <div>
+      <div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
         <div
-      v-for="i in areaArr"
+          :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
-      :key="i"
+          class="box-name title"
-      :style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
+          :class="titleClick === i.title ? 'title-click' : ''"
-      class="area"
+          @click="titleClick = i.title"
         >
-      <el-row>
+          {{ i.title }}
-        <el-col :span="1">
+        </div>
-          <div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div>
+        <div class="bg" :style="{ height: 145 * beilv + 'px', width: 685 * beilv + 'px' }">
-        </el-col>
-        <el-col :span="23">
-          <div class="locationFlex">
           <div
-              v-for="l in 72"
+            :style="{ fontSize: 22 * beilv + 'px', height: 116 * beilv + 'px', width: 26 * beilv + 'px' }"
-              :key="l"
+            class="box-name subtitle"
-              :class="l > Math.round(Math.random() * 100) ? 'waring' : ''"
+          >
+            {{ i.subtitle }}
+          </div>
+          <div class="locationFlex">
+            <div v-for="j in 4" :key="j+'div1'" class="finished">
+              <div
+                v-for="(l,index) in 19"
+                :key="l+'box1'"
+                :class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
                 :style="{
-                marginRight: 6 * beilv + 'px',
+                  marginRight: 2 * beilv + 'px',
                   marginTop: 2 * beilv + 'px',
                   marginBottom: 1 * beilv + 'px',
-                height: 28 * beilv + 'px',
+                  height: 26 * beilv + 'px',
                   lineHeight: 28 * beilv + 'px',
                   fontSize: 12 * beilv + 'px'
                 }"
                 class="location"
               >
-              {{ l }}
+                {{ j + 4*index }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 辅材库 -->
+    <div
+      v-for="i in areaArr1"
+      :key="i+'div2'"
+      :style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
+      class="box2"
+    >
+      <div
+        :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }"
+        class="box-name title"
+      >
+        {{ i }}
+      </div>
+      <div v-if="i==='辅材库'" class="locationFlex" style="margin-left:0">
+        <div v-for="j in 4" :key="j+'div3'" class="Auxiliary">
+          <div
+            v-for="(l,index) in 19"
+            :key="l+'box5'"
+            :class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']"
+            :style="{
+              marginRight: 2 * beilv + 'px',
+              marginTop: 2 * beilv + 'px',
+              height: 26 * beilv + 'px',
+              lineHeight: 28 * beilv + 'px',
+              fontSize: 12 * beilv + 'px'
+            }"
+            class="location"
+          >
+            {{ j + 4*index }}
+          </div>
+        </div>
+      </div>
+      <div v-else class="locationFlex" style="margin-left:0">
+        <div v-for="j in [3,2,1]" :key="j+'div4'">
+          <div
+            v-for="l in 20"
+            :key="l+'box9'"
+            :class="num.indexOf(l + 4*j)>0 ? 'waring' : ''"
+            :style="{
+              marginRight: 2 * beilv + 'px',
+              marginTop: 2 * beilv + 'px',
+              marginBottom: 1 * beilv + 'px',
+              height: 38 * beilv + 'px',
+              width: '4.5%',
+              lineHeight: 19 * beilv + 'px',
+              fontSize: 12 * beilv + 'px'
+            }"
+            class="location"
+          >
+            <div style="border-bottom:1px dotted rgba(255,255,255,0.5);">
+              {{ j }}
+            </div>
+            <div>{{ l }}</div>
+          </div>
         </div>
       </div>
-        </el-col>
-      </el-row>
     </div>
   </div>
 </template>
@@ -55,38 +120,123 @@ export default {
   },
   data() {
     return {
-      areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区']
+      areaArr: [
+        {
+          title: '成品库 A',
+          subtitle: 'A 区'
+        },
+        {
+          title: '成品库 B',
+          subtitle: 'B 区'
+        },
+        {
+          title: '成品库 C',
+          subtitle: 'C 区'
+        },
+        {
+          title: '成品库 D',
+          subtitle: 'D 区'
+        }
+      ],
+      titleClick: '成品库 A',
+      locationArr: [1, 5, 9],
+      areaArr1: ['辅材库', '备件库'],
+      num: []
     }
   },
-  methods: {}
+  created() {
+    for (let i = 0; i <= 30; i++) {
+      this.num.push(Math.round(Math.random() * 90))
+      if (i === 30) {
+        console.log(this.num)
+      }
+    }
+  },
+  methods: {
+  }
 }
 </script>
 
 <style scoped>
-.area {
+.box {
-  background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent);
+  border: 1px dotted rgba(94, 195, 216, 0.6);
-  background-size: 100% 100%;
+  display: flex;
-  padding: 5px 0;
+  align-items: center;
-  padding-left: 15px;
+  justify-content: left;
-  text-align: center;
-  border-radius: 4px;
-  border: 1px dotted #5ec3d8;
 }
-.areaName {
+.box::after {
+  width: 95%;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+  border-bottom: 1px solid red;
+}
+.box:first-child {
+  border-radius: 4px 4px 0 0;
+}
+.box:last-child {
+  border-radius: 0 0 4px 4px;
+}
+.bg {
+  background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+.box-name {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title {
   font-weight: 600;
+  height: 100%;
+  cursor: pointer;
+  color: #afb8c5;
+  background-color: transparent;
+}
+.title-click {
+  color: #fff;
+  background-color: rgba(48, 112, 125, 0.6);
+}
+.subtitle {
+  font-weight: 400;
+  margin-left: 8px;
+  border-radius: 4px;
+  border: 1px dotted rgba(94, 195, 216, 0.6);
 }
 .locationFlex {
-  margin-left: 25px;
+  width: 100%;
-  display: flex;
+  margin-left: 10px;
-  flex-wrap: wrap;
+  text-align: center;
-  align-content: space-between;
 }
 .location {
+  display: inline-block;
   background: #63cf74;
-  width: 4.5%;
+  width: 4.7%;
   border-radius: 4px;
 }
 .waring {
   background: #ff5d6b;
 }
+.box2{
+  background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
+  background-size: 100% 100%;
+  border: 1px dotted rgba(94, 195, 216, 0.6);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+.finished:nth-child(2){
+  margin-bottom: 8px;
+}
+.Auxiliary:nth-child(2){
+  margin-bottom: 8px;
+}
+.interlayer{
+  margin-left: 8px;
+}
 </style>

src/views/OperationalOverview/storageCockpit.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-11 15:14:51
+ * @LastEditTime: 2022-11-17 16:04:14
  * @Description:
 -->
 <template>
@@ -57,6 +57,7 @@
                   <base-table
                     :limit="10"
                     :beilv="beilv"
+                    :show-index="false"
                     :table-config="inAndOutOfEachLine.tableProps"
                     :table-data="inAndOutOfEachLine.list"
                   />
@@ -86,14 +87,15 @@
               </base-container>
             </el-col>
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
-              <!-- 成品入库列队 -->
+              <!-- 成品出库列队 -->
               <base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
                 <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
                   <base-table
                     :limit="10"
                     :beilv="beilv"
-                    :table-config="inAndOutOfEachLine.tableProps"
+                    :show-index="false"
-                    :table-data="inAndOutOfEachLine.list"
+                    :table-config="OutOfEachLine.tableProps"
+                    :table-data="OutOfEachLine.list"
                   />
                 </div>
               </base-container>
@@ -120,42 +122,50 @@
                 <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    成品库存一览1
+                    成品库存一览
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
                   <new-pie
                     :id="'pie-chart1'"
                     :show-center-title="true"
-                    :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
+                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
                     :series-data="legendData1"
                     :beilv="beilv"
                     :height="226"
                   />
                 </div>
-                <div class="div-box" :style="{textAlign: 'center', position: 'relative', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    成品库存一览2
+                    辅材库存一览
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
-                  <new-bar
+                  <new-pie
+                    :id="'pie-chart2'"
+                    :show-center-title="true"
+                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
+                    :series-data="legendData2"
+                    :beilv="beilv"
+                    :height="226"
+                  />
+                  <!-- <new-bar
                     :name-list="clNameList"
                     :data-list="clDataList"
                     :height="226"
                     :beilv="beilv"
                   />
-                  <div class="barDiv" :style="{width: 355* beilv + 'px'}" />
+                  <div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
                 </div>
                 <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    成品库存一览3
+                    备件库存一览
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
                   <new-pie
                     :id="'pie-chart3'"
                     :show-center-title="true"
-                    :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
+                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
                     :series-data="legendData3"
                     :beilv="beilv"
                     :height="226"
@@ -174,7 +184,7 @@
 import baseContainer from './components/baseContainer'
 import baseTable from './components/baseTable'
 import newPie from './components/newPie'
-import newBar from './components/newBar'
+// import newBar from './components/newBar'
 import storageCockpitArea from './components/storageCockpitArea'
 // import LineChart1 from './components/LineChart'
 // import LineChart2 from './components/LineChart'
@@ -185,58 +195,85 @@ import screenfull from 'screenfull'
 import axios from '@/utils/request'
 import moment from 'moment'
 
-const legendData3 = [
-  {
-    name: 'A',
-    icon: 'circle',
-    value: 196
-  },
-  {
-    name: 'B',
-    icon: 'circle',
-    value: 111
-  },
-  {
-    name: 'C',
-    icon: 'circle',
-    value: 89
-  },
-  {
-    name: 'D',
-    icon: 'circle',
-    value: 77
-  },
-  {
-    name: 'E',
-    icon: 'circle',
-    value: 77
-  }
-]
 const legendData1 = [
   {
-    name: 'A',
+    name: '2.0-1128*1716',
     icon: 'circle',
-    value: 134
+    value: 128
   },
   {
-    name: 'B',
+    name: '2.0-1128*2251',
     icon: 'circle',
-    value: 125
+    value: 225
   },
   {
-    name: 'C',
+    name: '2.0-1128*2272',
     icon: 'circle',
-    value: 107
+    value: 24
   },
   {
-    name: 'D',
+    name: '3.2-1128*1716',
     icon: 'circle',
-    value: 61
+    value: 77
   },
   {
-    name: 'E',
+    name: '3.2-1128*1716',
     icon: 'circle',
-    value: 153
+    value: 93
+  }
+]
+const legendData2 = [
+  {
+    name: '2.0-1128*1716',
+    icon: 'circle',
+    value: 128
+  },
+  {
+    name: '2.0-1128*2251',
+    icon: 'circle',
+    value: 104
+  },
+  {
+    name: '2.0-1128*2272',
+    icon: 'circle',
+    value: 24
+  },
+  {
+    name: '3.2-1128*1716',
+    icon: 'circle',
+    value: 77
+  },
+  {
+    name: '3.2-1128*1716',
+    icon: 'circle',
+    value: 93
+  }
+]
+const legendData3 = [
+  {
+    name: '2.0-1128*1716',
+    icon: 'circle',
+    value: 128
+  },
+  {
+    name: '2.0-1128*2251',
+    icon: 'circle',
+    value: 96
+  },
+  {
+    name: '2.0-1128*2272',
+    icon: 'circle',
+    value: 201
+  },
+  {
+    name: '3.2-1128*1716',
+    icon: 'circle',
+    value: 77
+  },
+  {
+    name: '3.2-1128*1716',
+    icon: 'circle',
+    value: 66
   }
 ]
 const clDataList = [
@@ -303,8 +340,8 @@ export default {
     baseContainer,
     baseTable,
     storageCockpitArea,
-    newPie,
+    newPie
-    newBar
+    // newBar
     // LineChart1,
     // LineChart2,
     // LinearBarChart
@@ -313,6 +350,7 @@ export default {
   data() {
     return {
       legendData1,
+      legendData2,
       legendData3,
       clNameList,
       clDataList,
@@ -327,25 +365,58 @@ export default {
         total: 0,
         list: [
           {
-            test1: '392849829',
+            test1: 'RQ5055348178',
-            test2: '叉车1',
+            test2: 'D4288603319',
-            test3: '392849829',
+            test3: 'CP5651696263',
-            test4: '322*234*12',
+            test4: '100*50mm',
-            test5: '库位1'
+            test5: 'A区'
           },
           {
-            test1: '392849829',
+            test1: 'RQ3722771932',
-            test2: '叉车2',
+            test2: 'D3732827773',
-            test3: '392849829',
+            test3: 'CP4140258231',
-            test4: '322*234*12',
+            test4: '100*100mm',
-            test5: '库位2'
+            test5: 'K区'
           },
           {
-            test1: '392849829',
+            test1: 'RQ1342208728',
-            test2: '叉车3',
+            test2: 'D6178738555',
-            test3: '392849829',
+            test3: 'CP5284407553',
-            test4: '322*234*12',
+            test4: '70*50mm',
-            test5: '库位3'
+            test5: 'G区'
+          }
+        ]
+      },
+      OutOfEachLine: {
+        tableProps: [
+          { prop: 'test1', label: '作业号', align: 'center' },
+          { prop: 'test2', label: 'ERP订单', align: 'center' },
+          { prop: 'test3', label: '成品编码', align: 'center' },
+          { prop: 'test4', label: '成品规格', align: 'center' },
+          { prop: 'test5', label: '库位', align: 'center' }
+        ],
+        total: 0,
+        list: [
+          {
+            test1: 'CQ3727367714',
+            test2: 'TCP231',
+            test3: 'CP3212128336',
+            test4: '50*50mm',
+            test5: 'H区'
+          },
+          {
+            test1: 'CQ7080508785',
+            test2: 'TCP186',
+            test3: 'CP2760242729',
+            test4: '100*120mm',
+            test5: 'B区'
+          },
+          {
+            test1: 'CQ8843212447',
+            test2: 'TCP67',
+            test3: 'CP1569191519',
+            test4: '120*120mm',
+            test5: 'A区'
           }
         ]
       },
@@ -641,7 +712,7 @@ export default {
 }
 .div-box {
   background: transparent;
-  box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
+  box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
   display: inline-block;
   width: 100%;
   border-radius: 4px;