update

update table 的距离问题
update 公用工程消耗
2022-11-08 14:42:30 +08:00 · 2022-11-08 14:40:04 +08:00 · 2022-11-08 13:36:18 +08:00 · 2022-11-08 09:19:40 +08:00 · 2022-11-08 08:46:29 +08:00 · 2022-11-07 15:15:53 +08:00
20 changed files with 524 additions and 142 deletions
--- a/src/assets/img/choicepart/choicepart-back.png
+++ b/src/assets/img/choicepart/choicepart-back.png
--- a/src/assets/video/3d.mkv
+++ b/src/assets/video/3d.mkv
--- a/src/router/index.js
+++ b/src/router/index.js
@ -13,7 +13,6 @@ Vue.use(Router)

 /* Layout */
 import Layout from '@/layout'
-
 export const constantRoutes = [
  {
    path: '/3d-overview',
@ -2298,7 +2297,6 @@ export const dynamicRoutes = [
      // },
    ]
  },
-
  {
    path: '/basic',
    component: Layout,
--- a/src/views/3DOverview/components/DianChart.vue
+++ b/src/views/3DOverview/components/DianChart.vue
@ -0,0 +1,223 @@
+<template>
+  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'DianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    const colors = ['#5470C6', '#EE6666', '#339888']
+
+    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
+    let data = [
+      // 温度走势
+      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
+      // 电流走势
+      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
+      // 电压走势
+      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
+    ]
+    let wendu = data[0]
+    let dianliu = data[1]
+    let dianya = data[2]
+
+    return {
+      chart: null,
+      option: {
+        color: colors,
+        legend: {
+          top: 4,
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: '#fff9',
+            fontSize: 8
+          },
+          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
+        },
+        grid: {
+          top: 32,
+          left: 64,
+          bottom: 28
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            axisTick: { show: false },
+            axisLabel: {
+              color: '#fff9'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: '电流/A',
+            nameTextStyle: { align: 'right', fontSize: 8 },
+            type: 'value',
+            splitNumber: 4,
+            onZero: true,
+            position: 'left',
+            offset: 42,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '电压/V',
+            nameTextStyle: { align: 'right', fontSize: 8 },
+            type: 'value',
+            splitNumber: 4,
+            axisTick: { show: false },
+            onZero: true,
+            position: 'left',
+            offset: 0,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '温度',
+            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
+            axisTick: { show: false },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            type: 'value',
+            splitNumber: 4,
+            splitLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'ABC三相电压/v',
+            type: 'line',
+            yAxisIndex: 0,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianliu,
+            symbol: 'none'
+          },
+          {
+            name: 'ABC三相电流/a',
+            type: 'line',
+            yAxisIndex: 1,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianya,
+            symbol: 'none'
+          },
+          {
+            name: '电缆温度',
+            type: 'line',
+            yAxisIndex: 2,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: wendu,
+            symbol: 'none'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.techy-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.techy-chart >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
--- a/src/views/3DOverview/components/FadianChart.vue
+++ b/src/views/3DOverview/components/FadianChart.vue
@ -15,7 +15,7 @@ export default {
  props: {
    id: {
      type: String,
-      default: 'default-id'
+      default: 'default-fadian-id'
    },
    title: {
      type: String,
--- a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
+++ b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
@ -2,7 +2,7 @@
  <div class="left-content-equipment-check">
    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
      <el-table
        key="LeftContentEquipmentCheck1"
@ -10,10 +10,10 @@
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
-        <el-table-column label="设备名称" prop="eqName" />
-        <el-table-column label="所属产线" prop="pl" />
-        <el-table-column label="提示等级" prop="warningLevel" />
-        <el-table-column label="提示等级" prop="checkContent" />
+        <el-table-column label="设备名称" prop="eqName" align="center" />
+        <el-table-column label="所属产线" prop="pl" align="center" />
+        <el-table-column label="提示等级" prop="warningLevel" align="center" />
+        <el-table-column label="提示等级" prop="checkContent" align="center" />
      </el-table>
    </div>
    <!-- <div class="el-table-wrapper">
@ -73,6 +73,12 @@ export default {
 </script>

 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 60% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
  height: calc(100% - 32px);
  display: flex;
@ -104,7 +110,7 @@ export default {
  color: #fff9;
  border: 0;
  height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }

 .el-table-wrapper >>> .el-table th.is-leaf,
--- a/src/views/3DOverview/components/LeftContentOrder.vue
+++ b/src/views/3DOverview/components/LeftContentOrder.vue
@ -2,7 +2,7 @@
  <div class="left-content-equipment-check">
    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
      <el-table
        key="LeftContentOrder1"
@ -10,10 +10,22 @@
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
-        <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="规格" prop="specs" :resizable="true" />
-        <el-table-column label="完成度" prop="finished" :resizable="true">
+        <el-table-column
+          label="订单编号"
+          prop="orderCode"
+          :show-overflow-tooltip="true"
+          :resizable="true"
+          align="center"
+        />
+        <el-table-column
+          label="客户名称"
+          prop="clientName"
+          :show-overflow-tooltip="true"
+          :resizable="true"
+          align="center"
+        />
+        <el-table-column label="规格" prop="specs" :resizable="true" align="center" />
+        <el-table-column label="完成度" prop="finished" :resizable="true" align="center">
          <template slot-scope="scope">
            <el-progress
              class="lb-progress-bar"
@ -79,6 +91,12 @@ export default {
 </script>

 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
  display: flex;
  gap: calc(100vw / 1920 * 16);
@ -90,7 +108,7 @@ export default {

 .left-content-equipment-check > div {
  overflow: hidden;
-  overflow-x: scroll;
+  overflow-x: auto;
 }

 .el-table-wrapper >>> * {
@ -144,11 +162,11 @@ export default {
 }

 .lb-progress-bar {
-  left: 40px;
+  left: 30px;
  display: flex;
 }
 .lb-progress-bar >>> .el-progress__text {
  color: #fff9;
-  left: -70%;
+  left: -75%;
 }
 </style>
--- a/src/views/3DOverview/components/LeftContentPublicConsume.vue
+++ b/src/views/3DOverview/components/LeftContentPublicConsume.vue
@ -98,7 +98,9 @@
          <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
          <span>电</span>
        </div>
-        <div class="content-part" />
+        <div class="content-part">
+          <DianChart />
+        </div>
      </TechyBox>
    </div>

@ -121,10 +123,10 @@ import TechyBarChart from './TechyBarChart.vue'
 import TechyLineChart from './TechyLineChart.vue'
 import TechyBox from './TechyBox.vue'
 import FadianChart from './FadianChart.vue'
-
+import DianChart from './DianChart.vue'
 export default {
  name: 'LeftContentPublicConsume',
-  components: { TechyBarChart, TechyBox, FadianChart, TechyLineChart },
+  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
  data() {
    return {}
  },
--- a/src/views/3DOverview/components/RightContentAlert.vue
+++ b/src/views/3DOverview/components/RightContentAlert.vue
@ -1,17 +1,17 @@
 <template>
  <div class="right-content-alert">
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
      <el-table
        key="RightContentAlertTable"
        border
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
-        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="故障等级" prop="level" :resizable="true" />
-        <el-table-column label="故障内容" prop="content" :resizable="true" />
-        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
+        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+        <el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
+        <el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
+        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
      </el-table>
    </div>
  </div>
@ -42,6 +42,12 @@ export default {
 </script>

 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .right-content-alert {
  height: calc(100% - 32px);
  display: flex;
@ -73,7 +79,7 @@ export default {
  color: #fff9;
  border: 0;
  height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }

 .el-table-wrapper >>> .el-table th.is-leaf,
--- a/src/views/3DOverview/components/RightContentQualityAnalysis.vue
+++ b/src/views/3DOverview/components/RightContentQualityAnalysis.vue
@ -49,7 +49,7 @@ export default {
 .right-content-quality-analysis {
  height: calc(100% - 32px);
  overflow: hidden;
-  overflow-y: scroll; /** 右边会有多的padding给滑道 */
+  overflow-y: auto; /** 右边会有多的padding给滑道 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
--- a/src/views/3DOverview/components/TechyHeader.vue
+++ b/src/views/3DOverview/components/TechyHeader.vue
@ -52,7 +52,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
        </g>
    </g>
 </svg>`
-
 export default {
  name: 'TechyHeader',
  props: ['headTitle'],
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@ -1,9 +1,9 @@
 <template>
  <div id="v3d-outter" ref="v3d-outter">
-    <!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
+    <V3DApp @3d-loaded="handle3DLoaded" />
    <!-- 正式内容: -->
-    <!-- <div v-if="showPage" id="v3d-main-content"> -->
-    <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
      <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />

      <section id="techy-body-part">
@ -19,7 +19,7 @@

          <div class="techy-body-part__middle">
            <TechyBox>
-              <div class="flex">
+              <div class="techy-body-part__middle__inner">
                <p>
                  <b>产线名称 :</b>
                  <span>A产线</span>
@ -29,7 +29,7 @@
                  <span>清洗机</span>
                </p>
                <p>
-                  <b>累计加工数量 :</b>
+                  <b>累计加工 :</b>
                  <span>20</span>
                </p>
                <p>
@ -162,6 +162,28 @@ export default {
  position: relative;
 }

+#v3d-outter *::-webkit-scrollbar {
+  width: 8px;
+}
+
+#v3d-outter *::-webkit-scrollbar-track {
+  background-color: #14243f;
+  /* background-color: white; */
+  border-radius: 0;
+}
+
+#v3d-outter *::-webkit-scrollbar-button {
+  width: 8px;
+  height: 8px;
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+#v3d-outter *::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: #5bc4bf9f;
+}
+
 #v3d-main-content {
  width: 100%;
  height: 100%;
@ -222,19 +244,21 @@ export default {

 .techy-body-part__middle {
  position: absolute;
-  top: 12%;
-  left: 36%;
-  height: 96px;
-  width: 128px;
+  top: 9%;
+  left: 26%;
+  height: 136px;
+  width: 176px;
 }

-.flex {
+.techy-body-part__middle__inner {
+  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
+  justify-content: space-between;
 }

-.flex p {
+.techy-body-part__middle__inner p {
  margin: 0;
  padding: 0;
  font-size: 12px;
@ -242,15 +266,15 @@ export default {
  color: #fff;
 }

-.flex p > span {
+.techy-body-part__middle__inner p > span {
  position: relative;
-  padding-left: 6px;
+  padding-left: 16px;
 }
 .round-dot::before {
  content: '';
  position: absolute;
-  top: 5px;
-  left: -3px;
+  top: 4px;
+  left: 2px;
  width: 8px;
  height: 8px;
  background-color: rgb(82, 231, 82);
--- a/src/views/EquipmentManager/HomePage.vue
+++ b/src/views/EquipmentManager/HomePage.vue
@ -8,7 +8,7 @@
          <div class="equipment-exception">
            <!-- 设备报修/异常上报 -->
            <techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-exception-report">
                <techy-table
                  :page="1"
                  :limit="7"
@ -22,7 +22,7 @@
          <div class="equipment-alarm">
            <!-- 设备异常报警 -->
            <techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-eq-exception">
                <techy-table
                  :page="1"
                  :limit="7"
@ -325,6 +325,17 @@ export default {
 </script>

 <style scoped>
+.fix-table-eq-exception >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .visual-container {
  width: 100%;
  min-width: 1280px;
--- a/src/views/EquipmentManager/mockData.js
+++ b/src/views/EquipmentManager/mockData.js
@ -27,18 +27,18 @@ const PriorityComponent = {
    }
  },
  methods: {},
-  render: function(h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
+  render: function (h) {
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
  }
 }

 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报修/异常内容', prop: 'content' },
-  { label: '报修/发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '设备名称', prop: 'eqName', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center', width: 80 },
+  { label: '报修/异常内容', prop: 'content', align: 'center' },
+  { label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
 ]

 export const equipmentExceptionDatalist = [
@ -70,7 +70,7 @@ const LifeRemainComponent = {
    }

  },
-  render: function(h) {
+  render: function (h) {
    return h('span', {
      style:
        { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
@ -80,11 +80,11 @@ const LifeRemainComponent = {
 }

 export const equipmentAlarmProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '设备编码', prop: 'eqCode' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '报警内容', prop: 'content' }
+  { label: '设备名称', prop: 'eqName', align: 'center' },
+  { label: '设备编码', prop: 'eqCode', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center' },
+  { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
+  { label: '报警内容', prop: 'content', align: 'center' }
 ]

 export const equipmentAlarmDatalist = [
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
 ]

 export const sparepartsProps = [
-  { prop: 'name', label: '部件名称' },
-  { prop: 'eq', label: '所属设备' },
-  { prop: 'pl', label: '所属产线' },
-  { prop: 'update_time', label: '更换时间' },
-  { prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
-  { prop: 'stock', label: '备件库存量' },
-  { prop: 'location', label: '库位' }
+  { prop: 'name', label: '部件名称', align: 'center' },
+  { prop: 'eq', label: '所属设备', align: 'center' },
+  { prop: 'pl', label: '所属产线', align: 'center' },
+  { prop: 'update_time', label: '更换时间', align: 'center' },
+  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
+  { prop: 'stock', label: '备件库存量', align: 'center' },
+  { prop: 'location', label: '库位', align: 'center' }
 ]

 export const sparepartsDatalist = [
@ -172,9 +172,9 @@ const StatusComponent = {
      ][this.injectData.status - 1]
    }
  },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
      h('span', this.statusText)
    ])
  }
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@ -5,7 +5,7 @@
      <div class="part-1">
        <div>
          <techy-container :title="'质量异常上报'" :icon="qualitySVG">
-            <div>
+            <div class="fix-table-exception-report">
              <techy-table
                :page="1"
                :limit="10"
@ -17,7 +17,7 @@
          </techy-container>
        </div>

-        <div>
+        <div class="fix-table-exception-alert">
          <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
            <techy-table
              :page="1"
@ -337,6 +337,19 @@ export default {
 </script>

 <style scoped>
+.fix-table-exception-alert >>> .el-table td .cell {
+  width: 75% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
+
+
 .visual-container {
  width: 100%;
  min-width: 1280px;
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@ -101,7 +101,7 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: '#FB418C' // 0% 处的颜色
+                    color: '#FB418C66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
@ -132,7 +132,7 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: '#DDB112' // 0% 处的颜色
+                    color: '#DDB11266' // 0% 处的颜色
                  },
                  {
                    offset: 1,
@ -163,7 +163,7 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: '#1A99FF' // 0% 处的颜色
+                    color: '#1A99FF66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
@ -194,7 +194,7 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: '#A691FF' // 0% 处的颜色
+                    color: '#A691FF66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
@ -229,7 +229,7 @@ export default {
                colorStops: [
                  {
                    offset: 0,
-                    color: '#49FBD6' // 0% 处的颜色
+                    color: '#49FBD666' // 0% 处的颜色
                  },
                  {
                    offset: 1,
--- a/src/views/QualityManager/mockData.js
+++ b/src/views/QualityManager/mockData.js
@ -30,20 +30,20 @@ const PriorityComponent = {
    console.log(this.injectData.priority)
  },
  methods: {},
-  render: function(h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
+  render: function (h) {
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
  }
 }

 console.log('is component?', PriorityComponent)

 export const qualityTableProps = [
-  { label: '工序名称', width: 80, prop: 'wsName' },
-  { label: '所属产线', width: 80, prop: 'pl' },
+  { label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
+  { label: '所属产线', width: 130, prop: 'pl', align: 'center' },
  { label: '异常内容', align: 'center', prop: 'content' },
-  { label: '报告人', width: 80, prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '报告人', width: 120, prop: 'creator', align: 'center' },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
 ]

 export const qualityDatalist = [
@ -87,23 +87,23 @@ const StatusComponent = {
      ][this.injectData.status - 1]
    }
  },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
      h('span', this.statusText)
    ])
  }
 }

 export const qualityExceptionTableProps = [
-  { label: '工序名称', prop: 'wsName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '异常内容', prop: 'content' },
-  { label: '发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '处理人', prop: 'charger' },
-  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
+  { label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
+  { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
+  { label: '异常内容', prop: 'content', align: 'center' },
+  { label: '发现人', prop: 'creator', align: 'center', width: 100 },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
+  { label: '处理人', prop: 'charger', align: 'center', width: 100 },
+  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
 ]

 export const qualityExceptionDatalist = [
--- a/src/views/material-manage/cockpit/index.vue
+++ b/src/views/material-manage/cockpit/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="container" ref="container" class="visual-container">
+  <div id="container" ref="container" class="visual-container material-cockpit">
    <el-row
      class="container-title"
      :style="{
@ -8,8 +8,10 @@
        fontSize: beilv * 30 + 'px'
      }"
    >
+      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
        <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
        合肥新能源数字工厂物料管理驾驶舱
+      </div>
      <el-button
        type="text"
        class="title-button"
@ -32,7 +34,7 @@
        <el-row>
          <el-col :style="{ marginTop: 16 * beilv + 'px' }">
            <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
-              <div class="box-padding">
+              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
@ -49,7 +51,7 @@
        <el-row>
          <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
            <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
-              <div class="box-padding">
+              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
@ -75,45 +77,55 @@ import bomList from './components/bomList.vue'
 const originalFilm = [
  {
    prop: 'time',
-    label: '上线时间'
+    label: '上线时间',
+    minWidth: 35
  },
  {
    prop: 'productLine',
-    label: '产线'
+    label: '产线',
+    minWidth: 33
  },
  {
    prop: 'spec',
-    label: '原片规格'
+    label: '原片规格',
+    minWidth: 32.4
  },
  {
    prop: 'batch',
-    label: '批次'
+    label: '批次',
+    minWidth: 35
  },
  {
    prop: 'num',
-    label: '数量'
+    label: '数量',
+    minWidth: 28
  }
 ]
 const material = [
  {
    prop: 'time',
-    label: '上线时间'
+    label: '上线时间',
+    minWidth: 35
  },
  {
    prop: 'eqName',
-    label: '设备名称'
+    label: '设备名称',
+    minWidth: 33
  },
  {
    prop: 'spec',
-    label: '辅料规格'
+    label: '辅料规格',
+    minWidth: 32.4
  },
  {
    prop: 'batch',
-    label: '批次'
+    label: '批次',
+    minWidth: 35
  },
  {
    prop: 'num',
-    label: '数量'
+    label: '数量',
+    minWidth: 28
  }
 ]
 export default {
@ -220,6 +232,7 @@ export default {
        })
        return false
      }
+      this.isFullScreen = !this.isFullScreen
      screenfull.toggle(this.$refs.container)
    }
  }
@ -236,7 +249,6 @@ export default {
    background: url('../../../assets/img/cockpit/title.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
-    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
@ -248,3 +260,17 @@ export default {
  }
 }
 </style>
+<style lang="scss">
+.material-cockpit {
+  .specil-table1 {
+    .el-table .cell {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 40px;
+    }
+  }
+}
+</style>
--- a/src/views/orderManage/orderManagerCockpit/cockpit.vue
+++ b/src/views/orderManage/orderManagerCockpit/cockpit.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="container" ref="container" class="visual-container">
+  <div id="container" ref="container" class="visual-container order-cockpit">
    <el-row
      class="container-title"
      :style="{
@ -8,16 +8,18 @@
        fontSize: beilv * 30 + 'px'
      }"
    >
-      <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
+        <img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
        合肥新能源数字工厂工单管理驾驶舱
+      </div>
      <el-button
        type="text"
        class="title-button"
        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
-        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
-        <svg-icon v-else icon-class="fullScreenView" />
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
+        <svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
      </el-button>
    </el-row>
    <el-row class="container-main">
@ -30,7 +32,7 @@
        </el-col>
        <el-col :span="14">
          <base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
-            <div class="box-padding">
+            <div class="box-padding specil-table1">
              <base-table
                :page="1"
                :limit="12"
@ -47,7 +49,7 @@
      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
        <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
          <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
-            <div class="box-padding">
+            <div class="box-padding specil-table2">
              <base-table
                :page="1"
                :limit="16"
@ -73,71 +75,87 @@ import orderStatus from './components/orderStatus.vue'
 const orderPool = [
  {
    prop: 'customerName',
-    label: '客户名称'
+    label: '客户名称',
+    minWidth: 35.2
  },
  {
    prop: 'orderCode',
-    label: '订单编号'
+    label: '订单编号',
+    minWidth: 32
  },
  {
    prop: 'productName',
-    label: '产品名称'
+    label: '产品名称',
+    minWidth: 32
  },
  {
    prop: 'planNum',
-    label: '计划加工量'
+    label: '计划加工量',
+    minWidth: 23.6
  },
  {
    prop: 'planDelivery',
-    label: '计划交货期'
+    label: '计划交货期',
+    minWidth: 28.8
  },
  {
    prop: 'status',
    label: '订单状态',
-    subcomponent: orderStatus
+    subcomponent: orderStatus,
+    minWidth: 19
  }
 ]
 const orderMonitiring = [
  {
    prop: 'customerName',
-    label: '客户名称'
+    label: '客户名称',
+    minWidth: 35.2
  },
  {
    prop: 'orderCode',
-    label: '订单编号'
+    label: '订单编号',
+    minWidth: 33.2
  },
  {
    prop: 'status',
    label: '订单状态',
-    subcomponent: orderStatus
+    subcomponent: orderStatus,
+    minWidth: 27
  },
  {
    prop: 'completion',
-    label: '完成率'
+    label: '完成率',
+    minWidth: 24.8
  },
  {
    prop: 'yield',
-    label: '良品率'
+    label: '良品率',
+    minWidth: 24.8
  },
  {
    prop: 'shiftCosts',
-    label: '班组费用'
+    label: '班组费用',
+    minWidth: 24.8
  },
  {
    prop: 'energyCosts',
-    label: '能耗费用'
+    label: '能耗费用',
+    minWidth: 29.4
  },
  {
    prop: 'equipmentCost',
-    label: '设备费用'
+    label: '设备费用',
+    minWidth: 29.4
  },
  {
    prop: 'materialCost',
-    label: '材料费用'
+    label: '材料费用',
+    minWidth: 29.4
  },
  {
    prop: 'totalCost',
-    label: '总费用'
+    label: '总费用',
+    minWidth: 31.6
  }
 ]
 export default {
@ -217,11 +235,11 @@ export default {
        obj.status = parseInt(Math.random() * 3 + 1)
        obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
        obj.yield = parseInt(Math.random() * 50 + 50) + '%'
-        obj.shiftCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost
+        obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
        temp.push(obj)
      }
      this.orderMonitiringList = temp
@ -247,6 +265,7 @@ export default {
        })
        return false
      }
+      this.isFullScreen = !this.isFullScreen
      screenfull.toggle(this.$refs.container)
    }
  }
@ -263,7 +282,6 @@ export default {
    background: url('../../../assets/img/cockpit/title.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
-    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
@ -278,3 +296,26 @@ export default {
  }
 }
 </style>
+<style lang="scss">
+.order-cockpit {
+  .specil-table1 {
+    .el-table .cell {
+      padding-left: 25px;
+      padding-right: 25px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 25px;
+    }
+  }
+  .specil-table2 {
+    .el-table .cell {
+      padding-left: 50px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 50px;
+    }
+  }
+}
+</style>
--- a/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
+++ b/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="height: 14px">
+  <div :style="{ height: 15 * beilv + 'px' }">
    <span v-if="this.injectData.status === 3">
      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
      已完成
@ -22,6 +22,21 @@ export default {
      type: Object,
      default: () => ({})
    }
+  },
+  data() {
+    return {
+      beilv: 1
+    }
+  },
+  mounted() {
+    this.beilv = document.getElementById('container').offsetWidth / 1920
+    window.addEventListener('resize', () => {
+      if (this.isFullScreen) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    })
  }
 }
 </script>
Author	SHA1	Message	Date
lb	4b70e4956c	update	2022-11-08 14:42:30 +08:00
lb	9b91d86f40	update table 的距离问题	2022-11-08 14:40:04 +08:00
lb	567aa98452	update 公用工程消耗	2022-11-08 13:36:18 +08:00
lb	d4986ba2db	update 滑动条	2022-11-08 09:19:40 +08:00
lb	49171d240c	merge	2022-11-08 08:46:29 +08:00
juzi	8e4a169f3e	Merge pull request 'zjl' (#2 ) from zjl into master Reviewed-on: #2	2022-11-07 15:15:53 +08:00
juzi	5a0db19da7	merge master	2022-11-07 15:11:49 +08:00
juzi	8cfe73aaef	init	2022-11-07 14:54:47 +08:00