窑炉

src/views/databoard/wholePlant/OrderStatus.vue

@@ -1,14 +1,155 @@
 <template>
   <div style="flex: 1;">
-    <Container name="订单完成情况" size="small" style="">
-      digndna
+    <Container name="订单完成情况" size="small" class="wholeOrder">
+      <div style="width: 100%;padding: 10px; 20px">
+        <el-table
+        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
+        :row-style="setRowStyle"
+        :data="list"
+        height="225"
+        border
+        style="width: 100%; background: transparent"
+      >
+        <el-table-column
+          v-for="item in tableProps"
+          :key="item.prop"
+          :show-overflow-tooltip="item.showOverflowtooltip"
+          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>
     </Container>
   </div>
 </template>
 <script>
+// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
+const tableProps = [
+    {
+      prop: 'time',
+      label: '添加时间',
+      filter: parseTime,
+      minWidth: 140
+    },
+    {
+      prop: 'name',
+      label: '订单名称',
+      minWidth: 120,
+      showOverflowtooltip: true
+    },
+    {
+      prop: 'code',
+      label: '订单编码',
+      minWidth: 180
+    },
+    {
+      prop: 'customerId',
+      label: '客户',
+      showOverflowtooltip: true
+    }
+  ]
 import Container from '../components/Container.vue';
+import { parseTime } from '@/utils/ruoyi'
 export default {
   name: 'OrderStatus',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
   components: { Container },
+  data() {
+    return {
+      tableProps,
+      list:[
+        {time: '2023-12-12', name: '名称名称'},
+        {time: '2023-12-13', name: '名称名称'},
+        {time: '2023-12-14', name: '名称名称'},
+        {time: '2023-12-15', name: '名称名称'},
+        {time: '2023-12-16', name: '名称名称'},
+        {time: '2023-12-17', name: '名称名称'},
+        {time: '2023-12-18', name: '名称名称'},
+        {time: '2023-12-19', name: '名称名称'},
+        {time: '2023-12-20', name: '名称名称'},
+        {time: '2023-12-21', name: '名称名称'}
+      ]
+    }
+  },
+  mounted() {
+    
+  },
+  methods:{
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(11, 84, 153, 1)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      } else {
+        return {
+          background: 'rgba(4, 74, 132, 1)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      }
+    }
+  }
 }
-</script>
+</script>
+<style lang='scss'>
+.wholeOrder {
+  .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;
+  }
+  // .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;
+  // }
+  
+}
+</style>