第二次上传

src/views/Antine.vue

@@ -17,17 +17,242 @@
         <div class="fontSize">&emsp;%</div>
       </div>
     </div>
+    <div class="below">
+      <div class="below-left">
+        <!--  今日预屠宰 -->
+        <div class="state">
+          <div class="title-background"></div>
+          <chart-state></chart-state>
+        </div>
+        <!--   累计审核数量 -->
+        <div class="age">
+          <div class="title-background"></div>
+        </div>
+        <!--  合格率      -->
+        <div class="weed">
+          <div class="title-background"></div>
+          <div class="weed-flex">
+            <div>
+              <chart-weed-pie :id="'1'"></chart-weed-pie>
+            </div>
+            <div>
+              <chart-weed-pie :id="'2'"></chart-weed-pie>
+            </div>
+            <div>
+              <chart-weed-pie :id="'3'"></chart-weed-pie>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="below-center">
+        <!--  牧场统计      -->
+        <div class="static">
+          <div class="title-background"></div>
+          <!-- 统计         -->
+          <div class="static-top">
+            <div class="static-title">
+              <p>总存栏</p>
+              <p>123456</p>
+            </div>
+            <div class="static-title">
+              <p>可出栏数量</p>
+              <p>123456</p>
+            </div>
+            <div class="static-title">
+              <p>可出栏较上月</p>
+              <p>12%</p>
+            </div>
+          </div>
+          <div class="static-bottom">
+          </div>
+        </div>
+        <!--   报警信息     -->
+        <div class="alarm">
+          <div class="title-background"></div>
+          <div class="alarm-left">
+          </div>
+          <div class="alarm-right">
+            <div class="alarm-text">
+              <div class="flex-left">时间</div>
+              <div class="flex-center">内容</div>
+              <div class="flex-right">位置</div>
+            </div>
+            <div class="alarm-scroll">
+              <vue-seamless-scroll :data="data" :class-option="defaultOption">
+                <div class="alarm-item" v-for="(item, i) in data" :key="i">
+                  <div class="flex-left">{{item.time}}</div>
+                  <div class="flex-center">{{item.name}}</div>
+                  <div class="flex-right">{{item.location}}</div>
+                </div>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="below-left">
+        <!--  屠宰统计      -->
+        <div class="hand">
+          <div class="title-background"></div>
+<!--          <chart-age :id="'1'"></chart-age>-->
+        </div>
+        <div class="beon">
+          <div class="title-background"></div>
+          <div class="beon-content">
+            <div class="alarm-text">
+              <div class="flex-left">时间</div>
+              <div class="flex-center">内容</div>
+              <div class="flex-right">位置</div>
+            </div>
+            <div class="alarm-scroll">
+              <vue-seamless-scroll :data="data" :class-option="defaultOption">
+                <div class="alarm-item" v-for="(item, i) in data" :key="i">
+                  <div class="flex-left">{{item.time}}</div>
+                  <div class="flex-center">{{item.name}}</div>
+                  <div class="flex-right">{{item.location}}</div>
+                </div>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import CountDec from "../components/CountDec";
 import CountIn from "../components/CountIn";
+import chartState from "../components/chart/chartState";
+import chartWeedPie from "../components/chart/chartWeedPie";
+import vueSeamlessScroll from 'vue-seamless-scroll'
 export default {
   name: "Antine",
   components: {
     CountIn,
-    CountDec
+    CountDec,
+    chartState,
+    chartWeedPie,
+    vueSeamlessScroll
+  },
+  computed: {
+    defaultOption () {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  data() {
+    return {
+      data: [
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },{
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育1栋1单元'
+        },
+        {
+          name: '132154236542532号猪只体温异常！',
+          time: '15:28',
+          location: '保育2栋2单元'
+        },
+
+      ]
+    }
   }
 }
 </script>
@@ -55,4 +280,250 @@ export default {
     font-size: 20px;
     font-weight: 700;
   }
+  .below {
+    width: 100%;
+    height: calc(100% - 160px);
+    box-sizing: border-box;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-around;
+  }
+  .below-left {
+    width: 550px;
+    height: 100%;
+  }
+  .below-center {
+    flex: 1;
+    margin: 0 20px;
+  }
+  .state {
+    width: 100%;
+    height: 280px;
+    margin-bottom: 20px;
+    position: relative;
+    border: 1px solid #12689D;
+  }
+  .state::after{
+    content: '今日预屠宰';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: -35px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .title-background {
+    width: 230px;
+    height: 23px;
+    background: url("../assets/u71.png") no-repeat;
+    background-size: cover;
+    position: absolute;
+    top: -13.5px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .age {
+    width: 100%;
+    height: 280px;
+    margin-bottom: 20px;
+    position: relative;
+    border: 1px solid #12689D;
+  }
+  .age::after {
+    content: '累计审核数量';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .weed {
+    width: 100%;
+    height: calc(100% - 604px);
+    position: relative;
+    border: 1px solid #12689D;
+    display: flex;
+  }
+  .weed::after {
+    content: '合格率';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .weed-flex {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 40px;
+    display: flex;
+  }
+  .weed-flex > div {
+    flex: 1;
+  }
+  .static {
+    width: 100%;
+    height: 447px;
+    position: relative;
+    border: 1px solid #12689D;
+    margin-bottom: 20px;
+  }
+  .static::after {
+    content: '';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: -35px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .static-top {
+    width: 100%;
+    height: 100px;
+    box-sizing: border-box;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+  }
+  .static-top > div {
+    width: 200px;
+    height: 78px;
+    border: 1px solid #12689D;
+  }
+  .static-title > p:nth-child(1){
+    margin: 0;
+    line-height: 30px;
+    font-size: 18px;
+    color: #0093DC;
+    font-weight: 600;
+  }
+  .static-title > p:nth-child(2){
+    margin: 0;
+    line-height: 48px;
+    font-size: 32px;
+    color: white;
+    font-weight: 700;
+  }
+  .static-bottom {
+    width: 100%;
+    height: calc(100% - 100px);
+    box-sizing: border-box;
+    padding: 10px 20px;
+  }
+  .alarm {
+    width: 100%;
+    height: calc(100% - 469px);
+    border: 1px solid #12689D;
+    position: relative;
+    display: flex;
+  }
+  .alarm::after {
+    content: '屠宰审核';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .alarm-left {
+    width: 320px;
+    height: 100%;
+  }
+  .alarm-right {
+    flex: 1;
+    margin-left: 10px;
+    box-sizing: border-box;
+    padding-top: 40px;
+  }
+  .alarm-text {
+    width: 100%;
+    height: 25px;
+    background-color: #0C1328;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    color: white;
+    font-size: 16px;
+  }
+  .flex-left {
+    width: 50px;
+    height: 100%;
+    line-height: 25px;
+  }
+  .flex-center {
+    width: 250px;
+    height: 100%;
+    line-height: 25px;
+  }
+  .flex-right {
+    width: 100px;
+    height: 100%;
+    line-height: 25px;
+  }
+  .alarm-scroll {
+    width: 100%;
+    height: calc(100% - 25px);
+    position: relative;
+    overflow: hidden;
+  }
+  .alarm-item {
+    width: 100%;
+    height: 25px;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    color: white;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+  .hand {
+    width: 100%;
+    height: 350px;
+    margin-bottom: 20px;
+    position: relative;
+    border: 1px solid #12689D;
+  }
+  .hand::after {
+    content: '屠宰统计';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: -35px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .beon {
+    width: 100%;
+    height: calc(100% - 370px);
+    position: relative;
+    border: 1px solid #12689D;
+  }
+  .beon::after {
+    content: '在场审核';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .beon-content {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 40px;
+    overflow: hidden;
+  }
 </style>