第二次上传

package-lock.json

@@ -3680,6 +3680,11 @@
         }
       }
     },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
+      "integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -11751,6 +11756,14 @@
       "resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/download/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha1-3egbPHmqSZeRs8O//Q/bIv8+Wac=",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "lib-flexible": "^0.3.2",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
-    <router-view/>
+    <div class="box-header"></div>
+    <div class="box-content">
+      <router-view/>
+    </div>
   </div>
 </template>
 
@@ -9,20 +12,18 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  /*text-align: center;*/
   color: #2c3e50;
+  width: 100vw;
+  height: 100vh;
+  background-color: #001137;
 }
-
-#nav {
-  padding: 30px;
+.box-header {
+  width: 100%;
+  height: 100px;
 }
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+.box-content {
+  width: 100%;
+  height: calc(100% - 100px);
 }
 </style>

src/assets/u326.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="5px" height="40px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="1" y1="0" x2="1" y2="37" id="LinearGradient97">
+      <stop id="Stop98" stop-color="#1d73cb" offset="0" />
+      <stop id="Stop99" stop-color="#ffffff" offset="0.49" />
+      <stop id="Stop100" stop-color="#1d73cb" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -659 -798 )">
+    <path d="M 1 0  L 1 37  " stroke-width="2" stroke="url(#LinearGradient97)" fill="none" transform="matrix(1 0 0 1 660 799 )" />
+  </g>
+</svg>

src/components/CountDec.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <span class="toAD" v-for="(item, index) in value" :key="index">
+      <div
+        class="qwNumBox"
+        style="width: 36px; height: 48px"
+        v-for="(ite, inde) in item"
+        :key="inde"
+      >
+        <div class="trasBox" :class="['rolling_' + ite]">
+          <!-- <div class="qwnum">{{ ite }}</div> -->
+          <div class="qwnum">0</div>
+          <div class="qwnum">1</div>
+          <div class="qwnum">2</div>
+          <div class="qwnum">3</div>
+          <div class="qwnum">4</div>
+          <div class="qwnum">5</div>
+          <div class="qwnum">6</div>
+          <div class="qwnum">7</div>
+          <div class="qwnum">8</div>
+          <div class="qwnum">9</div>
+        </div>
+      </div>
+      <span class="dec">{{index === 0 ? '.' : ''}}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CountDec",
+  data() {
+    return {
+      value: [["3", "2",], ["5", "6"]],
+    };
+  },
+}
+</script>
+
+<style scoped>
+.qwNumBox + .qwNumBox {
+  margin-left: 5px;
+}
+
+.qwNumBox {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 48px;
+  overflow: hidden;
+  border: 1px solid #00FBFF;
+  border-radius: 6px;
+}
+.trasBox {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: auto;
+  width: 100%;
+  transform-origin: 0 0;
+  transition: top 0.8s;
+}
+
+.qwnum {
+  width: 36px;
+  height: 48px;
+  line-height: 48px;
+  background: rgba(72, 152, 241, 0.072);
+  font-size: 36px;
+  font-family: MicrosoftYaHei-Bold;
+  font-weight: bold;
+  color: #00FBFF;
+  text-align: center;
+}
+.toAD {
+  margin-left: 12px;
+}
+.rolling_0 {
+  animation: rolling_0 2.1s ease;
+  transform: translate3d(0, -0px, 0);
+}
+@-webkit-keyframes rolling_0 {
+  from {
+    transform: translate3d(0, -720px, 0);
+  }
+  to {
+    transform: translate3d(0, -0px, 0);
+  }
+}
+.rolling_1 {
+  animation: rolling_1 3s ease;
+  transform: translate3d(0, -48px, 0);
+}
+@-webkit-keyframes rolling_1 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -48px, 0);
+  }
+}
+.rolling_2 {
+  animation: rolling_2 2.1s ease;
+  transform: translate3d(0, -96px, 0);
+}
+@-webkit-keyframes rolling_2 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -96px, 0);
+  }
+}
+.rolling_3 {
+  animation: rolling_3 3s ease;
+  transform: translate3d(0, -144px, 0);
+}
+@-webkit-keyframes rolling_3 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -144px, 0);
+  }
+}
+.rolling_4 {
+  animation: rolling_4 2.1s ease;
+  transform: translate3d(0, -192px, 0);
+}
+@-webkit-keyframes rolling_4 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -192px, 0);
+  }
+}
+.rolling_5 {
+  animation: rolling_5 3s ease;
+  transform: translate3d(0, -240px, 0);
+}
+@-webkit-keyframes rolling_5 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -240px, 0);
+  }
+}
+.rolling_6 {
+  animation: rolling_6 2.1s ease;
+  transform: translate3d(0, -288px, 0);
+}
+@-webkit-keyframes rolling_6 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -288px, 0);
+  }
+}
+.rolling_7 {
+  animation: rolling_7 3.1s ease;
+  transform: translate3d(0, -336px, 0);
+}
+@-webkit-keyframes rolling_7 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -336px, 0);
+  }
+}
+.rolling_8 {
+  animation: rolling_8 2.1s ease;
+  transform: translate3d(0, -384px, 0);
+}
+@-webkit-keyframes rolling_8 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -384px, 0);
+  }
+}
+.rolling_9 {
+  animation: rolling_9 4.1s ease;
+  transform: translate3d(0, -432px, 0);
+}
+@-webkit-keyframes rolling_9 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -432px, 0);
+  }
+}
+.dec {
+  font-size: 28px;
+  font-weight: 700;
+  color: #00ECCB;
+}
+</style>

src/components/CountIn.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <span class="toAD">
+      <div
+        class="qwNumBox"
+        style="width: 36px; height: 48px"
+        v-for="(ite, inde) in value"
+        :key="inde"
+      >
+        <div class="trasBox" :class="['rolling_' + ite]">
+          <!-- <div class="qwnum">{{ ite }}</div> -->
+          <div class="qwnum">0</div>
+          <div class="qwnum">1</div>
+          <div class="qwnum">2</div>
+          <div class="qwnum">3</div>
+          <div class="qwnum">4</div>
+          <div class="qwnum">5</div>
+          <div class="qwnum">6</div>
+          <div class="qwnum">7</div>
+          <div class="qwnum">8</div>
+          <div class="qwnum">9</div>
+        </div>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CountIn",
+  data() {
+    return {
+      value: ["3", "2", "5", "6"],
+    };
+  },
+  computed: {
+  },
+  watch: {},
+  methods: {
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+.qwNumBox + .qwNumBox {
+  margin-left: 5px;
+}
+
+.qwNumBox {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 48px;
+  overflow: hidden;
+  border: 1px solid #00FBFF;
+  border-radius: 6px;
+}
+.trasBox {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: auto;
+  width: 100%;
+  transform-origin: 0 0;
+  transition: top 0.8s;
+}
+
+.qwnum {
+  width: 36px;
+  height: 48px;
+  line-height: 48px;
+  background: rgba(72, 152, 241, 0.072);
+  font-size: 36px;
+  font-family: MicrosoftYaHei-Bold;
+  font-weight: bold;
+  color: #00FBFF;
+  text-align: center;
+}
+.toAD {
+  margin-left: 12px;
+}
+.rolling_0 {
+  animation: rolling_0 2.1s ease;
+  transform: translate3d(0, -0px, 0);
+}
+@-webkit-keyframes rolling_0 {
+  from {
+    transform: translate3d(0, -720px, 0);
+  }
+  to {
+    transform: translate3d(0, -0px, 0);
+  }
+}
+.rolling_1 {
+  animation: rolling_1 3s ease;
+  transform: translate3d(0, -48px, 0);
+}
+@-webkit-keyframes rolling_1 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -48px, 0);
+  }
+}
+.rolling_2 {
+  animation: rolling_2 2.1s ease;
+  transform: translate3d(0, -96px, 0);
+}
+@-webkit-keyframes rolling_2 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -96px, 0);
+  }
+}
+.rolling_3 {
+  animation: rolling_3 3s ease;
+  transform: translate3d(0, -144px, 0);
+}
+@-webkit-keyframes rolling_3 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -144px, 0);
+  }
+}
+.rolling_4 {
+  animation: rolling_4 2.1s ease;
+  transform: translate3d(0, -192px, 0);
+}
+@-webkit-keyframes rolling_4 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -192px, 0);
+  }
+}
+.rolling_5 {
+  animation: rolling_5 3s ease;
+  transform: translate3d(0, -240px, 0);
+}
+@-webkit-keyframes rolling_5 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -240px, 0);
+  }
+}
+.rolling_6 {
+  animation: rolling_6 2.1s ease;
+  transform: translate3d(0, -288px, 0);
+}
+@-webkit-keyframes rolling_6 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -288px, 0);
+  }
+}
+.rolling_7 {
+  animation: rolling_7 3.1s ease;
+  transform: translate3d(0, -336px, 0);
+}
+@-webkit-keyframes rolling_7 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -336px, 0);
+  }
+}
+.rolling_8 {
+  animation: rolling_8 2.1s ease;
+  transform: translate3d(0, -384px, 0);
+}
+@-webkit-keyframes rolling_8 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -384px, 0);
+  }
+}
+.rolling_9 {
+  animation: rolling_9 4.1s ease;
+  transform: translate3d(0, -432px, 0);
+}
+@-webkit-keyframes rolling_9 {
+  from {
+    transform: translate3d(0, -0px, 0);
+  }
+  to {
+    transform: translate3d(0, -432px, 0);
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/chart/chartAge.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :id="'chart-age' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "chartAge",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        xAxis: {
+          type: 'category',
+          data: ['260日以下', '260日-2年', '2年-3年', '3年-4年', '4年以上'],
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          axisTick:{
+            show:false
+          },
+        },
+        grid: {
+          top: '20%',
+          left: '10%',
+          right: '10%',
+          bottom: '10%'
+        },
+        color: ['#5C8FFE'],
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          axisTick:{
+            show:false
+          },
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70],
+            type: 'bar',
+            showBackground: true,
+            barWidth: 35,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-age' + this.id))
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartAlarm.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="chart-alarm" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "chartAlarm",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        series: [
+          {
+            name: 'title',
+            type: 'pie',
+            zlevel: 3,
+            startAngle: 180,
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: ['70%', '50%'],
+            center: ['50%', '50%'],
+            color: ['rgba(0, 150, 254, 1)', 'rgba(253, 160, 0, 1)',],
+            labelLine: {
+              show: true,
+              // showAbove:true,
+              length: 30,
+              length2: 50,
+
+            },
+            itemStyle: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(0, 0, 0, 0.3)',
+              borderColor: '#0a1a2a',
+            },
+            data: [
+              {
+                value: 50,
+                name: '',
+                label: {
+                  show: true,
+
+                  formatter: () => {
+                    return `
+                  +10%
+                  比昨日增长
+                `;
+                  },
+                  padding:[0,-30],
+                  textStyle:{
+                    lineHeight: 25
+                  }
+                },
+              },
+              {
+                value: 50,
+                name: '',
+                label: {
+                  show: true,
+
+                  formatter: () => {
+                    return `
+                  +47
+                  昨日报警数
+                `;
+                  },
+                  padding:[0,-30],
+                  textStyle:{
+                    lineHeight: 25
+                  }
+                },
+              },
+            ],
+          },
+        ],
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-alarm'));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartCrop.vue

@@ -0,0 +1,173 @@
+<template>
+  <div id="chart-crop" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+export default {
+  name: "chartCrop",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          top: "25%",
+          bottom: "10%"//也可设置left和right设置距离来控制图表的大小
+        },
+        xAxis: {
+          data: ['6月','7月', '8月','9月','10月','11月' ],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#01FCE3'
+            }
+          },
+          axisTick: {
+            show: true //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ebf8ac" //X轴文字颜色
+            }
+          },
+
+        },
+        yAxis: [{
+          type: "value",
+          name: "",
+          nameTextStyle: {
+            color: "#ebf8ac"
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#FFFFFF'
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ebf8ac"
+            }
+          },
+
+        },
+          {
+            type: "value",
+            name: "同比",
+            nameTextStyle: {
+              color: "#ebf8ac"
+            },
+            position: "right",
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: "{value} %", //右侧Y轴文字显示
+              textStyle: {
+                color: "#ebf8ac"
+              }
+            }
+          },
+          {
+            type: "value",
+            gridIndex: 0,
+            min: 50,
+            max: 100,
+            splitNumber: 8,
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitArea: {
+              show: true,
+              areaStyle: {
+                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
+              }
+            }
+          }
+        ],
+        series: [{
+          name: "",
+          type: "line",
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: true, //平滑曲线显示
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 10, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#058cff"
+          },
+          lineStyle: {
+            color: "#058cff"
+          },
+          areaStyle:{
+            color: "rgba(5,140,255, 0.2)"
+          },
+          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8,]
+        },
+          {
+            name: "",
+            type: "bar",
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: "#00FFE3"
+                },
+                  {
+                    offset: 1,
+                    color: "#4693EC"
+                  }
+                ])
+              }
+            },
+            data: [4.2, 3.8, 4.8, 3.5, 2.9, 6]
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-crop'));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartState.vue

@@ -0,0 +1,229 @@
+<template>
+  <div id="chart-state" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "chartState",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        graphic: [
+          {
+            type: 'text',
+            left: '45%',
+            top: '42%',
+            style: {
+              text: '总存栏',
+              fontSize: 14,
+              fill: 'rgb(192, 188, 189)'
+            }
+          },
+          {
+            type: 'text',
+            left: '45%',
+            top: '50%',
+            style: {
+              text: '120',
+              fontSize: 16,
+              fontWeight: 700,
+              fill: 'rgb(192, 188, 189)'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            cursor: 'default',
+            radius: ['45%', '30%'],
+            center: ['50%', '50%'],
+            color: [
+              'rgba(0, 150, 254, 0.2)',
+              'rgba(2, 205, 206, 0.2)',
+              'rgba(253, 160, 0, 0.2)',
+              'rgba(191, 40, 18, 0.2)',
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                borderColor: '#0a1a2a',
+              },
+              ellipsis: {
+                borderColor: '#0a1a2a',
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+            data: [
+              {
+                value: 41,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+            ],
+          },
+          {
+            name: '',
+            type: 'pie',
+            zlevel: 2,
+            cursor: 'default',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: ['60%', '45%'],
+            center: ['50%', '50%'],
+            color: [
+              'rgba(0, 150, 254, 0.9)',
+              'rgba(2, 205, 206, 0.9)',
+              'rgba(253, 160, 0, 0.9)',
+              'rgba(191, 40, 18, 0.9)',
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                // shadowBlur: 15,
+                // shadowColor: 'rgba(0, 0, 0, 0.5)',
+                borderColor: '#0a1a2a',
+                // borderWidth:'10',
+              },
+              ellipsis: {
+                borderColor: '#0a1a2a',
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+            data: [
+              {
+                value: 41,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+              {
+                value: 20,
+                name: '',
+              },
+            ],
+          },
+          {
+            name: 'title',
+            type: 'pie',
+            zlevel: 3,
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: ['80%', '60%'],
+            center: ['50%', '50%'],
+            color: ['rgba(0, 150, 254, 1)', 'rgba(2, 205, 206, 1)', 'rgba(253, 160, 0, 1)', 'rgba(191, 40, 18, 1)'],
+            label: {
+              show: true,
+
+              formatter: (params) => {
+                              return `
+               ${params.name}: ${params.percent}%
+               ${params.data.value}个
+               `;
+              },
+              padding:[0,-30],
+              textStyle:{
+                lineHeight: 25
+              }
+            },
+            labelLine: {
+              show: true,
+              // showAbove:true,
+              length: 30,
+              length2: 50,
+
+            },
+            itemStyle: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(0, 0, 0, 0.3)',
+              borderColor: '#0a1a2a',
+            },
+            data: [
+              {
+                value: 41,
+                name: '低级',
+                label: {
+                  color: '#fff',
+                },
+              },
+              {
+                value: 20,
+                name: '中级',
+                label: {
+                  color: '#fff',
+                },
+              },
+              {
+                value: 20,
+                name: '⾼级',
+                label: {
+                  color: '#fff',
+                },
+              },
+              {
+                value: 20,
+                name: '极⾼',
+                label: {
+                  color: '#fff',
+                },
+              },
+            ],
+          },
+        ],
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-state'));
+    this.init()
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartStaticLine.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="chart-static-line" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+export default {
+  name: "chartStaticLine",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        title: {
+          text: '存栏变动',
+          left: '10%',
+          textStyle: {
+            fontSize: 16,
+            color: '#0093DC'
+          }
+        },
+        grid: {
+          top: '13%',
+          left: '10%',
+          right: '5%',
+          bottom: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['6月','7月','8月','9月','10月'],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        legend: {
+          data: ['母猪存栏', '商品猪存栏'],
+          left: '40%',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        color: ['#00A4FD', '#F49909'],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value}头'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '母猪存栏',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: '#00A4FD',
+              borderColor: '#00A4FD',
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: [20, 10, 24, 20, 41]
+          },
+          {
+            name: '商品猪存栏',
+            type: 'line',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: '#F49909',
+              borderColor: '#F49909',
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: [25, 5, 40, 10, 46]
+          },
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-static-line'));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartWeedLine.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="chart-weed-line" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "chartWeedLine",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          top: '20%',
+          left: '10%',
+          right: '5%',
+          bottom: '15%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['一','二','三','四','五','六','七'],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        color: ['#00A4FD'],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value}头'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '淘汰数',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: '#053845',
+              borderColor: '#053845',
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: [20, 10, 24, 20, 41, 24, 30 ]
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-weed-line'))
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/chartWeedPie.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :id="'chart-weed-pie' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "chartWeedPie",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          top: 0,
+          bottom: 0,
+        },
+        barMaxWidth: 10,
+        angleAxis: {
+          show: false,
+          max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
+          type: 'value',
+          startAngle: 225, //极坐标初始角度
+          splitLine: {
+            show: false,
+          },
+        },
+        radiusAxis: {
+          show: false,
+          type: 'category',
+        },
+        //圆环位置和大小
+        polar: {
+          center: ['50%', '50%'],
+          radius: '170%',
+        },
+        series: [
+          {
+            type: 'bar',
+            data: [
+              {
+                //上层圆环，显示数据
+                value: 10,
+                itemStyle: {
+                  color: '#2AD2FB',
+                },
+              },
+            ],
+            barGap: '-100%', //柱间距离,上下两层圆环重合
+            coordinateSystem: 'polar',
+            roundCap: true, //顶端圆角
+            z: 3, //圆环层级，同zindex
+          },
+          {
+            //下层圆环，显示最大值
+            type: 'bar',
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#164B9F',
+                  opacity: 1,
+                  borderWidth: 0,
+                },
+              },
+            ],
+            barGap: '-100%',
+            coordinateSystem: 'polar',
+            roundCap: true,
+            z: 1,
+          },
+          //仪表盘
+          {
+            type: 'gauge',
+            startAngle: 225, //起始角度，同极坐标
+            endAngle: -45, //终止角度，同极坐标
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            splitLabel: {
+              show: false,
+            },
+            pointer: {
+              // 分隔线
+              shadowColor: 'auto', //默认透明
+              shadowBlur: 5,
+              length: '50%',
+              width: '2',
+              show: false,
+            },
+            itemStyle: {
+              color: '#1598FF',
+              borderColor: '#1598FF',
+              borderWidth: 5,
+            },
+            detail: {
+              formatter: function () {
+                // return '完成率\n'+getvalue + '%';
+                return `{wcl|完成率\n}{number|${10 + '%'}}`;
+              },
+              rich: {
+                number: {
+                  fontSize: 14,
+                  textAlign: 'center',
+                },
+                wcl: {
+                  fontSize: 16,
+                  textAlign: 'center',
+                },
+              },
+              color: '#fff',
+              lineHeight: 30,
+              offsetCenter: ['0', '0'],
+            },
+            title: {
+              show: false,
+            },
+            data: [
+              {
+                value: 10,
+              },
+            ],
+          },
+        ],
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-weed-pie' + this.id));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -2,8 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import 'lib-flexible/flexible'
+import echarts from 'echarts'
 
 Vue.config.productionTip = false
+Vue.prototype.$echarts = echarts;
 
 new Vue({
   router,

src/router/index.js

@@ -10,14 +10,6 @@ const routes = [
     name: 'Home',
     component: Home
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
 ]
 
 const router = new VueRouter({

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,14 +1,645 @@
 <template>
   <div class="home">
+    <div class="flex">
+      <div class="flex-al">
+        <div class="fontSize">能繁母猪数量</div>
+        <count-in></count-in>
+        <div class="fontSize">&emsp;头</div>
+      </div>
+      <div class="flex-al">
+        <div class="fontSize">生猪存栏</div>
+        <count-in></count-in>
+        <div class="fontSize">&emsp;头</div>
+      </div>
+      <div class="flex-al">
+        <div class="fontSize">采集器在线率</div>
+        <count-dec></count-dec>
+        <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>
+          <chart-age></chart-age>
+        </div>
+        <!--  母猪淘汰      -->
+        <div class="weed">
+          <div class="title-background"></div>
+          <div class="weed-left">
+            <chart-weed-pie></chart-weed-pie>
+          </div>
+          <div class="weed-right">
+            <chart-weed-line></chart-weed-line>
+          </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 class="static-content">金东区</div>
+          </div>
+          <div class="static-bottom">
+            <div class="static-chart-left">
+              <chart-static-bar></chart-static-bar>
+            </div>
+            <div class="static-chart-right">
+              <chart-static-line></chart-static-line>
+            </div>
+          </div>
+        </div>
+        <!--   报警信息     -->
+        <div class="alarm">
+          <div class="title-background"></div>
+          <div class="alarm-left">
+            <div class="alarm-title">
+              <div class="alarm-flex">
+                <p>30</p>
+                <p>猪只报警</p>
+              </div>
+              <div class="alarm-logo"></div>
+              <div class="alarm-flex">
+                <p>20</p>
+                <p>环境报警</p>
+              </div>
+              <div class="alarm-logo"></div>
+              <div class="alarm-flex">
+                <p>20</p>
+                <p>总数</p>
+              </div>
+            </div>
+            <div class="alarm-pie">
+              <div class="alarm-logo1"></div>
+              <chart-alarm></chart-alarm>
+            </div>
+          </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="survival">
+          <div class="title-background"></div>
+          <div class="survival-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 class="crop">
+          <div class="title-background"></div>
+          <chart-crop></chart-crop>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 
-
+import CountIn from "../components/CountIn";
+import CountDec from "../components/CountDec";
+import chartState from "../components/chart/chartState";
+import chartAge from "../components/chart/chartAge";
+import chartWeedPie from "../components/chart/chartWeedPie";
+import chartWeedLine from "../components/chart/chartWeedLine";
+import chartStaticBar from "../components/chart/chartStaticBar";
+import chartStaticLine from "../components/chart/chartStaticLine";
+import chartAlarm from "../components/chart/chartAlarm";
+import chartCrop from "../components/chart/chartCrop";
+import vueSeamlessScroll from 'vue-seamless-scroll'
 export default {
   name: 'Home',
   components: {
+    CountIn,
+    CountDec,
+    chartState,
+    chartAge,
+    chartWeedPie,
+    chartWeedLine,
+    chartStaticBar,
+    chartStaticLine,
+    chartAlarm,
+    vueSeamlessScroll,
+    chartCrop
+  },
+  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>
+<style scoped>
+  .home {
+    width: 100%;
+    height: 100%;
+  }
+  .flex {
+    width: 100%;
+    height: 120px;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 30px;
+  }
+  .flex-al {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .fontSize {
+    color: #00ECCB;
+    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-left {
+    width: 160px;
+    height: 100%;
+  }
+  .weed-right {
+     flex: 1;
+    box-sizing: border-box;
+    margin-left: 20px;
+  }
+  .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: 148px;
+    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-content {
+    font-size: 32px;
+    color: #FF9900;
+    line-height: 78px;
+  }
+  .static-bottom {
+    width: 100%;
+    height: calc(100% - 100px);
+    box-sizing: border-box;
+    padding: 10px 20px;
+    display: flex;
+  }
+  .static-chart-left {
+    width: 340px;
+    height: 100%;
+  }
+  .static-chart-right {
+    flex: 1;
+    margin-left: 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-title {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .alarm-flex {
+    width: 100px;
+    height: 100%;
+    text-align: center;
+  }
+  .alarm-flex > p:nth-child(1) {
+    margin: 0;
+    line-height: 50px;
+    color: #0078C2;
+    font-weight: 700;
+    font-size: 32px;
+  }
+  .alarm-flex > p:nth-child(2) {
+    margin: 0;
+    line-height: 20px;
+    color: #fff;
+    font-weight: 700;
+    font-size: 16px;
+  }
+  .alarm-logo {
+    width: 5px;
+    height: 40px;
+    background: url("../assets/u326.svg") no-repeat;
+    background-size: cover;
+  }
+  .alarm-pie {
+    width: 100%;
+    height: calc(100% - 70px);
+    position: relative;
+  }
+  .alarm-logo1 {
+    width: 65px;
+    height: 65px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: url("../assets/u337.png") no-repeat;
+    background-size: cover;
+  }
+  .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: 280px;
+    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);
+  }
+  .survival {
+    width: 100%;
+    height: calc(100% - 604px);
+    position: relative;
+    border: 1px solid #12689D;
+  }
+  .survival::after {
+    content: '存 活 率';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .survival-flex {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 40px;
+    display: flex;
+  }
+  .survival-flex > div {
+    flex: 1;
+  }
+  .crop {
+    width: 100%;
+    margin-top: 20px;
+    height: 280px;
+    border: 1px solid #12689D;
+    position: relative;
+  }
+  .crop::after {
+    content: '商品猪出栏预测';
+    font-size: 20px;
+    font-weight: 600;
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+</style>