2021-11-22 重要指标补齐

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-11 08:39:16
+ * @LastEditTime: 2021-11-22 17:24:48
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -30,15 +30,51 @@
     <!-- 第二列 -->
     <div class="production-column production-mid-column">
       <div class="production-column-item">
-        <pro-board :title="'重要指标'">
+        <pro-board :title="'重要指标'" :click="true" @getClick="clickIndicators">
           <important-items :data="importantData"></important-items>
+          <!-- 重要指标的图 -->
+          <transition name="fade">
+            <div v-if="indicatorsVisible" class="indicators">
+              <div class="indicators-title">
+                <div class="target">指标数量：78</div>
+                <div class="target">上升指标：58</div>
+                <div class="target">下降指标：15</div>
+                <div class="target">持平指标：5</div>
+              </div>
+              <div class="indicators-search">
+                <div class="indicators-search-icon"></div>
+                <input class="indicators-search-input" type="text" placeholder="搜索">
+              </div>
+              <div class="indicators-charts">
+                <indicator-item 
+                  v-for="(item, index) in indicatorsData"
+                  :key="item.title"
+                  v-bind="item"
+                  :id="index"
+                  @clickItem="clickItem(index)">
+                </indicator-item>
+              </div>
+            </div>
+          </transition>
+          <transition name="fade">
+            <div v-if="indicatorsItemVisible" class="indicators indicator-one-item">
+              <div class="back-triangle" @click="clickBack"></div>
+              <div class="indicator-item-title">
+                {{ indicatorsData[indicatorIndex].title }}
+                <span :class="indicatorsData[indicatorIndex].ifPositive? 'positive': 'negative'" class="num-common">{{ indicatorsData[indicatorIndex].titleNum }}</span>
+                <span :class="indicatorsData[indicatorIndex].ifPositive? 'positive': 'negative'" class="num-common">{{ indicatorsData[indicatorIndex].subtitleNum }}</span>
+              </div>
+              <div class="indicator-item-subtitle">{{ indicatorsData[indicatorIndex].littleTitle }}</div>
+              <indicator-one-chart v-bind="indicatorsData[indicatorIndex]"></indicator-one-chart>
+            </div>
+          </transition>
         </pro-board>
       </div>
 
       <div class="production-column-item">
         <pro-board :title="'销售分析'">
           <div class="sales">
-            <div class="sales-condition">
+            <!-- <div class="sales-condition">
               <el-date-picker
                 v-model="getSalesDates"
                 type="datetimerange"
@@ -49,7 +85,7 @@
                 align="right"
                 size="mini">
               </el-date-picker>
-            </div>
+            </div> -->
             <div class="sales-content">
               <div class="sales-left">
                 <div class="up">
@@ -172,6 +208,8 @@ import WorkItems from './board/WorkItems.vue'
 import ImportantItems from './board/ImportantItems.vue'
 import ChartCostPie from './board/ChartCostPie.vue'
 import ChartCostLine from './board/ChartCostLine.vue'
+import IndicatorItem from './board/IndicatorItem.vue'
+import IndicatorOneChart from './board/IndicatorOneChart.vue'
 
 export default {
   name: "Production",
@@ -418,7 +456,75 @@ export default {
         }
       ],
 
-      costLineData: [32541, 82467, 54363, 64642, 34651, 95422,]
+      costLineData: [32541, 82467, 54363, 64642, 34651, 95422,],
+      indicatorsVisible: false, // 是否显示股票图
+      indicatorsData: [
+        {
+          id: 1,
+          title: '窝均产仔数',
+          subtitle: '母猪每一胎生产的仔猪数量',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '23',
+          subtitleNum: '+1',
+          ifPositive: true
+        },
+        {
+          id: 2,
+          title: '产房存活率',
+          subtitle: '每一窝仔猪断奶前平均存活率',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '92.5%',
+          subtitleNum: '+0.75%',
+          ifPositive: true
+        },
+        {
+          id: 3,
+          title: '保育存活率',
+          subtitle: '保育阶段的猪只存活率',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '97.3%',
+          subtitleNum: '-0.43%',
+          ifPositive: false
+        },
+        {
+          id: 4,
+          title: '年提供出栏猪数',
+          subtitle: '每年可以提供出栏猪',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '214525',
+          subtitleNum: '+13.2%',
+          ifPositive: true
+        },
+        {
+          id: 5,
+          title: '保育存活率',
+          subtitle: '保育阶段的猪只存活率',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '97.3%',
+          subtitleNum: '-0.43%',
+          ifPositive: false
+        },
+        {
+          id: 6,
+          title: '窝均产仔数',
+          subtitle: '母猪每一胎生产的仔猪数量',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '23',
+          subtitleNum: '+1',
+          ifPositive: true
+        },
+        {
+          id: 7,
+          title: '保育存活率',
+          subtitle: '保育阶段的猪只存活率',
+          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
+          titleNum: '97.3%',
+          subtitleNum: '-0.43%',
+          ifPositive: false
+        }
+      ],
+      indicatorsItemVisible: false, // 只要指标的一张图
+      indicatorIndex: 0
     }
   },
   components: {
@@ -431,30 +537,42 @@ export default {
     WorkItems,
     ImportantItems,
     ChartCostPie,
-    ChartCostLine
+    ChartCostLine,
+    IndicatorItem,
+    IndicatorOneChart
   },
   methods: {
     getWorkInfo(value) { // 工作看板的点击事件
       console.log(value)
       this.ifWorkInfos = !this.ifWorkInfos
+    },
+    clickIndicators() {
+      this.indicatorsVisible = !this.indicatorsVisible
+      console.log(this.indicatorsVisible)
+    },
+    clickItem(index) {
+      // setTimeout(() => {
+      //   this.indicatorsVisible = true
+      // })
+      this.indicatorIndex = index
+      this.indicatorsItemVisible = true
+      console.log(111111111)
+    },
+    clickBack() {
+      this.indicatorsItemVisible = false
     }
   },
 }
 </script>
 
 <style scoped>
-/* 要删除的东西 */
-.board-bgc {
-  background-color: rgb(226, 144, 144);
-}
-
-
 .production {
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   position: relative;
+  padding-top: 20px;
 }
 /* 每一列 */
 .production-column {
@@ -476,6 +594,102 @@ export default {
   height: 66%;
 }
 
+/** 重要指标的图 */
+.indicators {
+  position: absolute;
+  background-color: rgb(0, 0, 0);
+  color: #fff;
+  top: 26px;
+  width: 100%;
+  height: 290%;
+  z-index: 10;
+  overflow: auto;
+}
+/* 标题栏 */
+.indicators-title {
+  font-weight: 700;
+  font-size: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-top: 30px;
+}
+/* 搜索框 */
+.indicators-search {
+  height: 34px;
+  margin: 30px 8px 0px;
+  /* padding-top: 4px; */
+  background-color: rgb(56, 55, 55);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.indicators-search-icon {
+  margin-top: 2px;
+  width: 30px;
+  height: 30px;
+  background: url("../../assets/Production/u4772.svg") no-repeat;
+  background-size: 100% 100%;
+}
+.indicators-search-input {
+  width: calc(96% - 30px);
+  font-size: 18px;
+  background-color: transparent;
+  color: #fff;
+  outline: unset;
+  border: 0;
+}
+/** 重要指标图的过渡动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+/** 重要指标图 - 一张图 */
+.indicator-one-item {
+  text-align: left;
+  z-index: 11;
+}
+/* 返回的三角形 */
+.back-triangle {
+  width: 0px;
+  height: 0px;
+  border: 30px solid;
+  border-color:  transparent rgba(124, 121, 121, 0.5) transparent;
+  border-left: 120px;
+  float: right;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.indicator-item-title {
+  font-size: 25px;
+  font-weight: 700;
+  margin-top: 30px;
+  margin-left: 20px;
+  text-align: left;
+  display: inline-block;
+}
+.num-common {
+  font-size: 14px;
+  display: inline-block;
+  margin-left: 20px;
+  position: relative;
+  bottom: 4px;
+}
+/* 红色 */
+.positive {
+  color: red;
+}
+/* 绿色 */
+.negative {
+  color: green;
+}
+.indicator-item-subtitle {
+  margin: 20px 30px 20px 20px;
+  font-size: 18px;
+}
 
 /* 销售分析 */
 .sales {

src/views/Production/board/ChartSowBar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 11:02:38
- * @LastEditTime: 2021-10-27 10:56:56
+ * @LastEditTime: 2021-11-22 15:35:11
  * @LastEditors: Please set LastEditors
  * @Description: 母猪分布
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartSowBar.vue

src/views/Production/board/IndicatorChart.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 15:10:07
+ * @LastEditTime: 2021-11-22 15:55:38
+ * @LastEditors: Please set LastEditors
+ * @Description: 指标图
+ * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorChart.vue
+-->
+<template>
+  <div :id="id + 'indicator'" class="indicator-chart">
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    ifPositive: {
+      type: Boolean,
+      required: true
+    },
+    id: {
+      required: true
+    },
+    data: {
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let color1 = 'rgba(0, 255, 0, 0.7)'
+      let color2 = 'rgba(64, 218, 26, 0.5)'
+      let color3 = 'rgba(88, 165, 69, 0.3)'
+      if (this.ifPositive) {
+        color1 = 'rgba(255, 0, 0, 0.7)'
+        color2 = 'rgba(216, 52, 52, 0.5)'
+        color3 = 'rgba(201, 85, 85, 0.3)'
+      }
+      let options = {
+        grid: {
+          top: '2%',
+          left: '0',
+          right: '0',
+          bottom: '-20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'none', // 隐藏拐点
+            color: color1,
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,  color: color1  // 100% 处的颜色
+                  }, 
+                  {
+                    offset: 0.5,  color: color2  // 100% 处的颜色
+                  },
+                  {
+                    offset: 1, color: color3 //   0% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById(this.id + 'indicator'));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+  .indicator-chart{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/Production/board/IndicatorItem.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 14:25:49
+ * @LastEditTime: 2021-11-22 16:50:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 重点指标的 item
+ * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorItem.vue
+-->
+<template>
+  <div class="indicator-item" @click="clickItem">
+    <div class="left">
+      <h2>{{ title }}</h2>
+      <span>{{ subtitle }}</span>
+    </div>
+    <div class="center">
+      <indicator-chart :id="id" :ifPositive="ifPositive"></indicator-chart>
+    </div>
+    <div class="right">
+      <h3>{{ titleNum }}</h3>
+      <span>{{ subtitleNum }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import IndicatorChart from './IndicatorChart.vue'
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: true
+    },
+    titleNum: {
+      type: String,
+      required: true
+    },
+    subtitleNum: {
+      type: String,
+      required: true
+    },
+    ifPositive: {
+      type: Boolean,
+      required: true
+    },
+    id: {
+      type: Number,
+      required: true
+    }
+  },
+  components: {
+    IndicatorChart
+  },
+  methods: {
+    clickItem() {
+      this.$emit('clickItem')
+    }
+  },
+}
+</script>
+<style scoped>
+  .indicator-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    border-bottom: 2px solid rgb(56, 55, 55);
+    padding: 20px 0;
+  }
+  .left {
+    width: 27%;
+  }
+  .left>h2 {
+    font-size: 23px;
+  }
+  .left>span {
+    font-size: 15px;
+    color: #ccc;
+  }
+  .center {
+    width: 50%;
+  }
+  .right {
+    width: 20%;
+  }
+  .right>h3 {
+    font-size: 20px;
+  }
+  .right>span {
+    display: inline-block;
+    font-size: 20px;
+    width: 100px;
+    height: 28px;
+    line-height: 28px;
+    background-color: red;
+    border-radius: 8px;
+  }
+</style>

src/views/Production/board/IndicatorOneChart.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 17:00:48
+ * @LastEditTime: 2021-11-22 17:12:25
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorOneChart.vue
+-->
+<template>
+  <div id="indicatorOneChart" class="indicator-one-chart">
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    ifPositive: {
+      type: Boolean,
+      required: true
+    },
+    id: {
+      required: true
+    },
+    data: {
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let color1 = 'rgba(0, 255, 0, 0.7)'
+      let color2 = 'rgba(64, 218, 26, 0.5)'
+      let color3 = 'rgba(88, 165, 69, 0.3)'
+      if (this.ifPositive) {
+        color1 = 'rgba(255, 0, 0, 0.7)'
+        color2 = 'rgba(216, 52, 52, 0.5)'
+        color3 = 'rgba(201, 85, 85, 0.3)'
+      }
+      let options = {
+        grid: {
+          top: '2%',
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          splitLine: { // 除开坐标轴的线
+            show: true,
+            lineStyle: {
+              color: ['#ccc'],
+              width: 1,
+              type: 'solid'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
+              width: 1
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ['#ccc'],
+              width: 1,
+              type: 'solid'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
+              width: 1
+            }
+          }
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'none', // 隐藏拐点
+            color: color1,
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,  color: color1  // 100% 处的颜色
+                  }, 
+                  {
+                    offset: 0.5,  color: color2  // 100% 处的颜色
+                  },
+                  {
+                    offset: 1, color: color3 //   0% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('indicatorOneChart'));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+  .indicator-one-chart{
+    width: 80%;
+    height: 50%;
+    margin-left: 5%;
+  }
+</style>

src/views/Production/board/ProBoard.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:03:16
- * @LastEditTime: 2021-10-27 09:26:16
+ * @LastEditTime: 2021-11-22 13:43:59
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营 - 面板
  * @FilePath: \hyyfScreen\src\views\Production\board\ProBoard.vue
 -->
 <template>
   <div class="pro-board">
-    <div class="title">
+    <div class="title" @click="ifClick">
       <div class="title-left"></div>
       <div class="title-center">{{ title }}</div>
       <div class="title-right"></div>
@@ -24,14 +24,26 @@ export default {
     title: {
       type: String,
       required: true
+    },
+    click: {
+      type: Boolean,
+      default: false
     }
-  }
+  },
+  methods: {
+    ifClick() {
+      if (this.click) {
+        this.$emit('getClick')
+      }
+    }
+  },
 }
 </script>
 <style scoped>
 .pro-board {
   width: 100%;
   height: 100%;
+  position: relative;
   /* background-color: rgb(8, 204, 8); */
 }
 

src/views/Zoology/Zoology.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-10-26 16:27:51
+ * @LastEditTime: 2021-11-22 10:25:05
  * @LastEditors: Please set LastEditors
  * @Description: 生态监测页面
  * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue
@@ -187,6 +187,7 @@ export default {
   height: 100%;
   display: flex;
   justify-content: space-around;
+  padding-top: 20px;
 }
 
 /** 左边 */
@@ -275,7 +276,8 @@ export default {
 }
 /* 左上 - 滑动 */
 .left-top-content {
-  height: 100%;
+  /* height: 90%; */
+  height: calc(100% - 26px);
   overflow: hidden;
 }
 /* 左中 */