merge test

src/views/databoard/wholePlant/OrderStatus copy.vue

@@ -1,98 +0,0 @@
-<template>
-  <div style="flex: 1;" class="orderContainer">
-    <Container name="订单完成情况" size="small" style="">
-      <div style="padding: 5px 10px;">
-        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
-      </div>
-      <button @click='bb'>aa</button>
-    </Container>
-  </div>
-</template>
-<script>
-import Container from '../components/Container'
-import { formatDate } from '@/utils'
-export default {
-  name: 'OrderStatus',
-  components: { Container },
-  computed: {
-    order() {
-      return this.$store.state.websocket.order
-    }
-  },
-  data() {
-    return {
-      config: {
-        header: ['上线时间', '客户名称', '规格','完成度'],
-        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [155, 180, 140],
-        data: [],
-        rowNum: 8
-      }
-    }
-  },
-  mounted() {},
-  methods:{
-    bb() {
-          let aaa = [
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.1},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.3},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.4},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.5},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.7},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.8},
-      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:1}
-    ]
-    let outArr = aaa.map((item) => [
-          formatDate(item.planStartTime) || '',
-          `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
-          `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
-          `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
-          <div class="box" style="display:inline-block;">
-            <div class="bg"></div>
-            <div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
-            <div class="bg2"></div>
-            <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
-          </div>`
-      ]);
-      this.config.data = outArr
-      this.$refs['orderScrollBoard'].updateRows(outArr)
-      }
-    }
-    
-  // }
-  // watch:{
-  //   order: {
-	// 		handler(newVal, oldVal) {
-  //       let outArr = this.order.map((item) => [
-  //         formatDate(item.planStartTime) || '',
-  //         `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
-  //         `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
-  //         `<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
-  //         <div class="box" style="display:inline-block;">
-  //           <div class="bg"></div>
-  //           <div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
-  //           <div class="bg2"></div>
-  //           <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
-  //         </div>`
-  //     ]);
-  //     this.config.data = outArr
-  //     this.$refs['orderScrollBoard'].updateRows(outArr)
-	// 		}
-	// 	}
-  // }
-}
-</script>
-<style lang='scss'>
-.orderContainer {
-  .box{width:16px;height:12px;margin:auto;position:relative;}
-  .box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
-  .box .bg{border:#283851 4px solid}
-
-  .box .bg2{border:#283851 4px solid;clip:rect(0,8px,20px,0);}
-  .box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
-  .box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
-}
-</style>