2022-11-17 16:41:53 +08:00
--- a/src/views/OperationalOverview/components/newPie.vue
+++ b/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: {
-              formatter: [
-                '{d}%'
-              ].join('\n')
+            labelLine: {
+              length: 8,
+              length2: 15,
+              maxSurfaceAngle: 80
            },
            data: this.seriesData.map((item, index) => {
              item.label = {
--- a/src/views/OperationalOverview/components/storageCockpitArea.vue
+++ b/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
-      v-for="i in areaArr"
-      :key="i"
-      :style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
-      class="area"
-    >
-      <el-row>
-        <el-col :span="1">
-          <div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div>
-        </el-col>
-        <el-col :span="23">
+    <div>
+      <div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
+        <div
+          :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
+          class="box-name title"
+          :class="titleClick === i.title ? 'title-click' : ''"
+          @click="titleClick = i.title"
+        >
+          {{ i.title }}
+        </div>
+        <div class="bg" :style="{ height: 145 * beilv + 'px', width: 685 * beilv + 'px' }">
+          <div
+            :style="{ fontSize: 22 * beilv + 'px', height: 116 * beilv + 'px', width: 26 * beilv + 'px' }"
+            class="box-name subtitle"
+          >
+            {{ i.subtitle }}
+          </div>
          <div class="locationFlex">
-            <div
-              v-for="l in 72"
-              :key="l"
-              :class="l > Math.round(Math.random() * 100) ? 'waring' : ''"
-              :style="{
-                marginRight: 6 * beilv + 'px',
-                marginTop: 2 * beilv + 'px',
-                marginBottom: 1 * beilv + 'px',
-                height: 28 * beilv + 'px',
-                lineHeight: 28 * beilv + 'px',
-                fontSize: 12 * beilv + 'px'
-              }"
-              class="location"
-            >
-              {{ l }}
+            <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: 2 * beilv + 'px',
+                  marginTop: 2 * beilv + 'px',
+                  marginBottom: 1 * beilv + 'px',
+                  height: 26 * beilv + 'px',
+                  lineHeight: 28 * beilv + 'px',
+                  fontSize: 12 * beilv + 'px'
+                }"
+                class="location"
+              >
+                {{ j + 4*index }}
+              </div>
            </div>
          </div>
-        </el-col>
-      </el-row>
+        </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>
    </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 {
-  background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent);
-  background-size: 100% 100%;
-  padding: 5px 0;
-  padding-left: 15px;
-  text-align: center;
-  border-radius: 4px;
-  border: 1px dotted #5ec3d8;
+.box {
+  border: 1px dotted rgba(94, 195, 216, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: left;
 }
-.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;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: space-between;
+  width: 100%;
+  margin-left: 10px;
+  text-align: center;
 }
 .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>
--- a/src/views/OperationalOverview/storageCockpit.vue
+++ b/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"
-                    :table-data="inAndOutOfEachLine.list"
+                    :show-index="false"
+                    :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,
-    newBar
+    newPie
+    // 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',
-            test2: '叉车1',
-            test3: '392849829',
-            test4: '322*234*12',
-            test5: '库位1'
+            test1: 'RQ5055348178',
+            test2: 'D4288603319',
+            test3: 'CP5651696263',
+            test4: '100*50mm',
+            test5: 'A区'
          },
          {
-            test1: '392849829',
-            test2: '叉车2',
-            test3: '392849829',
-            test4: '322*234*12',
-            test5: '库位2'
+            test1: 'RQ3722771932',
+            test2: 'D3732827773',
+            test3: 'CP4140258231',
+            test4: '100*100mm',
+            test5: 'K区'
          },
          {
-            test1: '392849829',
-            test2: '叉车3',
-            test3: '392849829',
-            test4: '322*234*12',
-            test5: '库位3'
+            test1: 'RQ1342208728',
+            test2: 'D6178738555',
+            test3: 'CP5284407553',
+            test4: '70*50mm',
+            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;