init

src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue

@@ -0,0 +1,145 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2022-01-24 09:18:01
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+    <div class="line" />
+    <div class="line line-vertical" />
+    <div class="line line-right" />
+    <div class="line line-right-vertical" />
+    <div class="line line-bottom" />
+    <div class="line line-bottom-vertical" />
+    <div class="line line-bottom-right" />
+    <div class="line line-bottom-right-vertical" />
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+  color: #fff;
+  width: 100%;
+  background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  border: 2px solid;
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+
+  .line {
+    position: absolute;
+    border-top: 4px solid #52FFF1;
+    width: 2em;
+    top: -.25em;
+    left: -.25em;
+    &-vertical {
+      top: calc(-5em / 12);
+      left: calc(-1em / 12);
+      transform: rotate(90deg);
+      transform-origin: left;
+    }
+    &-right {
+      top: -.25em;
+      right: -.25em;
+      left: inherit;
+    }
+    &-right-vertical {
+      top: calc(-5em / 12);
+      right: calc(-1em / 12);
+      left: inherit;
+      transform: rotate(-90deg);
+      transform-origin: right;
+    }
+    &-bottom {
+      top: inherit;
+      left: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-vertical {
+      top: inherit;
+      left: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(-90deg);
+      transform-origin: left;
+    }
+    &-bottom-right {
+      top: inherit;
+      left: inherit;
+      right: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-right-vertical {
+      top: inherit;
+      left: inherit;
+      right: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(90deg);
+      transform-origin: right;
+    }
+  }
+  .bar-title {
+    width: 100%;
+    color: #52FFF1;
+    font-size: 1.5em;
+    padding: .67em;
+  }
+  // .bar-content{
+  //   padding: 1em;
+  // }
+}
+</style>

src/views/orderManage/orderManagerCockpit/components/baseTable.vue

@@ -0,0 +1,176 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-06-14 11:12:39
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(100).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData.length && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(100).fill(true)
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(76,97,123,0.2)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      } else {
+        return {
+          background: 'rgba(79,114,136,0.29)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      }
+    },
+    setCellStyle(v) {
+      return {
+        lineHeight: 23 * this.beilv + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "~@/styles/index.scss";
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+.setting {
+  text-align: right;
+  padding: 15px;
+  .setting-box {
+    width: 100px;
+  }
+  i {
+    color: #aaa;
+    @extend .pointer;
+  }
+}
+
+</style>

src/views/orderManage/orderManagerCockpit/components/orderStatus.vue

@@ -0,0 +1,42 @@
+<template>
+  <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" />
+      已完成
+    </span>
+    <span v-if="this.injectData.status === 1">
+      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
+      在途
+    </span>
+    <span v-if="this.injectData.status === 2">
+      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
+      已下发
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OrderStatus',
+  props: {
+    injectData: {
+      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>

src/views/orderManage/orderManagerCockpit/components/workOrder.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
+    <!-- 小块 -->
+    <div v-for="(item,index) in orderMsg" :key="index" :style="{ padding: 10 * beilv + 'px' + ' 20px ' + 16 * beilv + 'px' + ' 16px'}" class="box">
+      <p class="line1">
+        <span>工单编号：<span class="light-color">{{ item.code }}</span></span>
+        <span class="fr">
+          状态：
+          <span class="state">{{ item.state }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
+        <span class="fr">
+          产线：
+          <span class="light-color" style="margin-right: 25px">{{ item.line }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
+      </p>
+      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
+        <span v-else class="light-color">订单进度</span>
+        <span class="light-color fr">{{ item.percentage }}</span>
+        <div class="progress-box">
+          <div
+            class="progress"
+            :style="{height: 8 * beilv + 'px', width: item.percentage}"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'WorkOrder',
+  props: {
+    orderMsg: {
+      type: Array,
+      default: () => []
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.order-box {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  .box {
+    width: 49.5%;
+    height: 49.5%;
+    margin-bottom: 8px;
+    background-image: url('../../../../assets/img/cockpit/module-back.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .light-color {
+      opacity: 0.5;
+    }
+    .blue-color {
+      color: #3E6AE9;
+    }
+    .line1::before {
+      display: inline-block;
+      content: "";
+      width: 4px;
+      height: 14px;
+      border-radius: 2px;
+      margin-right: 8px;
+      vertical-align: middle;
+      background-color: #4BFFC8;
+    }
+    .state {
+      display: inline-block;
+      color: #70F97F;
+      padding: 2px 4px;
+      border-radius: 2px;
+      background: #366F5D;
+    }
+  }
+}
+.progress-box {
+  border-radius: 5px;
+  background: #1E2D45;
+  .progress {
+    text-align: right;
+    line-height: 18px;
+    border-radius: 5px;
+    padding-right: 5px;
+    margin-top: 10px;
+    background: linear-gradient(270deg, #47F8DC 0%, #4573FE 100%);
+  }
+}
+
+</style>