src/views/3DOverview/components/LeftContentEquipmentCheck.vue

@@ -12,8 +12,13 @@
       >
         <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="warningLevel" align="center">
-        <el-table-column label="提示等级" prop="checkContent" align="center" />
+          <template slot-scope="scope">
+            <!-- <component :is="PriorityComponent"></component> -->
+            <PriorityComponent :injectData="scope.row"></PriorityComponent>
+          </template>
+        </el-table-column>
+        <el-table-column label="巡检内容" prop="checkContent" align="center" />
       </el-table>
     </div>
     <!-- <div class="el-table-wrapper">
@@ -35,36 +40,70 @@
 <script>
 // import TechyFakeTable from './TechyFakeTable.vue'
 // import TechyTable from './TechyTable.vue'
+const PriorityComponent = {
+  name: 'PriorityComponent',
+  props: {
+    injectData: Object
+  },
+  computed: {
+    bgColor() {
+      const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
+      return colors[this.injectData.priority - 1]
+    },
+    priorityText() {
+      return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
+    }
+  },
+  methods: {},
+  render: function(h) {
+    return h(
+      'span',
+      {
+        style: {
+          display: 'inline-block',
+          borderRadius: '2px',
+          padding: '2px 6px',
+          color: '#fff',
+          opacity: '0.6',
+          fontSize: '12px',
+          lineHeight: 1,
+          backgroundColor: this.bgColor
+        }
+      },
+      this.priorityText
+    )
+  }
+}
 
-const tableProps = [
+// const tableProps = [
-  { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
+//   { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
-  { prop: 'pl', label: '所属产线', width: 120, resizable: false },
+//   { prop: 'pl', label: '所属产线', width: 120, resizable: false },
-  { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
+//   { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
-  { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
+//   { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
-]
+// ]
 const tableData = [
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+  { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
-  { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
+  { eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
-  // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
-  // { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
-]
-const tableData2 = [
-  { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
-  { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
   // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
   // { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
 ]
+// const tableData2 = [
+//   { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
+//   { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
+//   { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
+//   { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
+// ]
 
 export default {
   name: 'LeftContentEquipmentCheck',
-  components: {},
+  components: { PriorityComponent },
   data() {
-    return { tableProps, tableData, tableData2 }
+    return { tableData }
   },
   created() {},
   mounted() {},

src/views/3DOverview/components/RightContentAlert.vue

@@ -7,9 +7,26 @@
         :data="tableData"
         :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
       >
-        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+        <el-table-column
-        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+          label="设备名称"
-        <el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
+          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="priority" :resizable="true" align="center">
+          <template slot-scope="scope">
+            <!-- <component :is="PriorityComponent"></component> -->
+            <PriorityComponent :injectData="scope.row"></PriorityComponent>
+          </template>
+        </el-table-column>
         <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>
@@ -20,18 +37,52 @@
 <script>
 // import TechyFakeTable from './TechyFakeTable.vue'
 // import TechyTable from './TechyTable.vue'
+const PriorityComponent = {
+  name: 'PriorityComponent',
+  props: {
+    injectData: Object
+  },
+  computed: {
+    bgColor() {
+      const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
+      return colors[this.injectData.priority - 1]
+    },
+    priorityText() {
+      return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
+    }
+  },
+  methods: {},
+  render: function(h) {
+    return h(
+      'span',
+      {
+        style: {
+          display: 'inline-block',
+          borderRadius: '2px',
+          padding: '2px 6px',
+          color: '#fff',
+          opacity: '0.6',
+          fontSize: '12px',
+          lineHeight: 1,
+          backgroundColor: this.bgColor
+        }
+      },
+      this.priorityText
+    )
+  }
+}
 
 const tableData = [
-  { eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 },
+  { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
-  { eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 },
+  { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
-  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 },
+  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
-  { eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 },
+  { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
-  { eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 }
+  { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
 ]
 
 export default {
   name: 'RightContentAlert',
-  components: {},
+  components: { PriorityComponent },
   data() {
     return { tableData }
   },