更改到线上地址

src/utils/api.js

@@ -338,7 +338,7 @@ export function editVideo(data) {
 export function getVideo(data) {
   return axios({
     url: '/video/camera/getCameraDetails',
-    method: 'get',
-    params: data
+    method: 'post',
+    data: data
   })
 }

src/utils/http.js

@@ -15,7 +15,7 @@ let removePending = (ever) => {
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://192.168.1.165:8010'
+  baseURL: 'http://115.238.57.190:8014'
 })
 
 // 请求拦截器

src/views/Env/DrinkWater.vue

@@ -1,13 +1,261 @@
 <template>
-  <div>饮水监测</div>
+  <div class="drinkWater">
+    <div class="reply" :style="{color: color}">全场饮水情况</div>
+    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+    <div class="echarts">
+      <div class="echarts-l">
+        <chart-water-pie></chart-water-pie>
+      </div>
+      <div class="echarts-r">
+        <chart-water></chart-water>
+      </div>
+    </div>
+    <br/>
+    <div class="reply" :style="{color: color}">饮用水详情</div>
+    <div class="carousel">
+      <swiper class="swiper" :options="swiperOption">
+        <swiper-slide v-for="item in 10" :key="item" style="padding-top: 10px">
+          <div class="box">
+            <p>育肥1栋1单元</p>
+            <div class="flex">
+              <div>
+                <i class="icon1"></i>
+              </div>
+              <div>
+                <span>145吨</span>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+        <div class="swiper-pagination" slot="pagination"></div>
+        <div class="swiper-button-prev" slot="button-prev"></div>
+        <div class="swiper-button-next" slot="button-next"></div>
+      </swiper>
+    </div>
+    <br/>
+    <div class="reply" :style="{color: color}">筛选查询</div>
+    <x-form :formItems="selectItems" :day="day1" @setDay="setDay1" @onClickType="onClickType1"></x-form>
+    <div class="echarts">
+      <div class="echarts-l">
+        <chart-water-pie :id="'1'"></chart-water-pie>
+      </div>
+      <div class="echarts-r">
+        <chart-water :id="'1'" :dataValue="dataValue"></chart-water>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import XForm from "@/components/XForm";
+import ChartWaterPie from "@/views/Env/chart/ChartWaterPie";
+import ChartWater from "@/views/dashboard/chart/ChartWater";
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css';
+import { mapState } from 'vuex';
 export default {
-  name: "DrinkWater"
+  name: "DrinkWater",
+  components: {
+    XForm,
+    ChartWaterPie,
+    ChartWater,
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      formItems: [
+        {
+          id: 1,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 2,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 5,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      day: 2,
+      swiperOption: {
+        slidesPerView: 8,
+        spaceBetween: 30,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          type: 'progressbar'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      },
+      selectItems: [
+        {
+          id: 1,
+          type: 'select',
+          label: '栋舍：',
+          placeholder: '请选择栋舍',
+          field: 'areaId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 2,
+          type: 'select',
+          label: '单元：',
+          placeholder: '请选择单元',
+          field: 'unitId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 5,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 6,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 7,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      day1: 2,
+      dataValue: [12, 13, 10, 13, 9, 23, 21, 21, 24, 23, 14, 21, 21]
+    }
+  },
+  methods: {
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    setDay1(data) {
+      this.day1 = data;
+    },
+    onClickType1() {}
+  }
 }
 </script>
 
 <style scoped>
-
+  .drinkWater {
+    width: 100%;
+    height: 100%;
+    padding: 20px 20px 0 20px;
+  }
+  .reply {
+    width: 100%;
+    border: 1px solid #ddd;
+    border-bottom: 0;
+    height: 50px;
+    background-color: #F3F3F3;
+    line-height: 50px;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+  .echarts {
+    width: 100%;
+    height: 401px;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    border-top: 0;
+    display: flex;
+  }
+  .echarts-l {
+    width: 30%;
+    height: 100%;
+  }
+  .echarts-r {
+    width: 70%;
+    height: 100%;
+  }
+  .carousel {
+    width: 100%;
+    height: 150px;
+    border-top: 1px solid #ddd;
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+  .box {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    padding: 30px 0;
+    text-align: center;
+    cursor: pointer;
+  }
+  .flex {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon1 {
+    width: 32px;
+    height: 32px;
+    background: url('../../assets/images/u3077.svg') no-repeat;
+    display: inline-block;
+    background-size: 100% 100%;
+  }
 </style>

src/views/Env/PigHouseEnv.vue

@@ -31,19 +31,25 @@
     </div>
     <br/>
     <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+    <br/>
+    <div style="height: 600px">
+      <chart-wsd></chart-wsd>
+    </div>
   </div>
 </template>
 
 <script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import XForm from "@/components/XForm";
+import ChartWsd from "@/views/dashboard/chart/ChartWsd";
 import 'swiper/css/swiper.css'
 export default {
   name: "PigHouseEnv",
   components: {
     swiper,
     swiperSlide,
-    XForm
+    XForm,
+    ChartWsd
     // Swiper,
     // SwiperSlide
   },

src/views/Env/chart/ChartWaterPie.vue

@@ -0,0 +1,128 @@
+<template>
+  <div :id="'chart-water-pie-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: "ChartWaterPie",
+  computed: {
+    ...mapState(['color'])
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      let data = [{name: '总饮水量', value: '123.1'}]
+      let formatNumber = function(num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ',');
+      }
+      let total = data.reduce((a, b) => {
+        return a + b.value * 1
+      }, 0);
+      let options = {
+        color: [this.color],
+        title: [
+          {
+            text: '{name|' + '饮用水总量' + '}\n{val|' + formatNumber(total) + '吨' +'}',
+            top: 'center',
+            left: 'center',
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: 'normal',
+                  color: '#666666',
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: 32,
+                  fontWeight: 'bold',
+                  color: '#333333',
+                },
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: 'pie',
+            radius: ['45%', '60%'],
+            center: ['50%', '50%'],
+            data: data,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                borderColor: '#fff',
+                borderWidth: 2
+              }
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 120,
+                lineStyle: {
+                  color: '#e6e6e6'
+                }
+              }
+            },
+            label: {
+              normal: {
+                formatter: params => {
+                  return (
+                      '{icon|●}{name|' + params.name + '}{value|' +
+                      formatNumber(params.value) + '}'
+                  );
+                },
+                padding: [0 , -100, 25, -100],
+                rich: {
+                  icon: {
+                    fontSize: 16
+                  },
+                  name: {
+                    fontSize: 14,
+                    padding: [0, 10, 0, 4],
+                    color: '#666666'
+                  },
+                  value: {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    color: '#333333'
+                  }
+                }
+              }
+            },
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-water-pie-' + this.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Login/Login.vue

@@ -32,7 +32,7 @@
             </el-input>
           </el-col>
           <el-col :span="9">
-            <img id="kaptchaImage" src="http://192.168.1.165:8010/admin/my/send" @click="refset" alt="">
+            <img id="kaptchaImage" src="http://115.238.57.190:8014/admin/my/send" @click="refset" alt="">
           </el-col>
         </el-row>
         <div style="height: 20px"></div>
@@ -81,7 +81,7 @@ export default {
     // 刷新
     refset() {
       let img = document.getElementById('kaptchaImage');
-      img.setAttribute('src', 'http://192.168.1.165:8010/admin/my/send?'+ Math.floor(Math.random() * 100));
+      img.setAttribute('src', 'http://115.238.57.190:8014/admin/my/send?'+ Math.floor(Math.random() * 100));
     }
   }
 }

src/views/Video/VideoAdmin.vue

@@ -71,8 +71,12 @@
         :title="cameraTitle"
         :visible.sync="isVideo"
         width="50%">
-      <div style="width: 100%; height: 530px; text-align: center;">
-        <iframe v-if="isVideo" :src="'static/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+      <div style="width: 100%; height: 560px; text-align: center;">
+        <iframe v-if="isVideo" :src="'static/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 530px;" frameborder="0"  allowfullscreen="true"></iframe>
+        <div>
+          <el-button :disabled="last === null" size="small" @click="getNext(last)">上一个</el-button>
+          <el-button :disabled="next === null" size="small" @click="getNext(next)">下一个</el-button>
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -89,7 +93,7 @@ export default {
   components: {
     QueryConditions,
     NewTable,
-    TableFooter
+    TableFooter,
   },
   data() {
     return {
@@ -229,6 +233,8 @@ export default {
       cameraTwo: '',
       cameraTitle: '',
       isVideo: false,
+      last: '',
+      next: '',
     }
   },
   methods: {
@@ -378,7 +384,11 @@ export default {
     open(row) {
       if(row.runStatus) {
         let params = {
-          cameraIds: row.id
+          cameraIds: [row.id],
+          strchStr: this.keyWord,
+          areaId: this.areaId,
+          brandId: this.brandId,
+          sort: this.sort
         }
        getVideo(params).then(res => {
          if(res.code === 10000) {
@@ -386,6 +396,8 @@ export default {
            this.cameraTitle = res.data[0].cameraName;
            this.cameraOne = res.data[0].wsUrl;
            this.cameraTwo = res.data[0].rtspUrl;
+           this.last = res.data[0].lastId;
+           this.next = res.data[0].nextId;
          } else {
            this.$message.error('查看失败');
          }
@@ -457,6 +469,28 @@ export default {
         account: '',
         password: '',
       }
+    },
+    // 上一个下一个
+    getNext(id) {
+      let params = {
+        cameraIds: [id],
+        strchStr: this.keyWord,
+        areaId: this.areaId,
+        brandId: this.brandId,
+        sort: this.sort
+      }
+      getVideo(params).then(res => {
+        if(res.code === 10000) {
+          this.isVideo = true;
+          this.cameraTitle = res.data[0].cameraName;
+          this.cameraOne = res.data[0].wsUrl;
+          this.cameraTwo = res.data[0].rtspUrl;
+          this.last = res.data[0].lastId;
+          this.next = res.data[0].nextId;
+        } else {
+          this.$message.error('查看失败');
+        }
+      })
     }
   },
   mounted() {

src/views/dashboard/chart/ChartWater.vue

@@ -1,8 +1,9 @@
 <template>
-  <div id="chartWater" style="width: 100%; height: 100%"></div>
+  <div :id="'chartWater-' + id" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
   name: "ChartWater",
   data() {
@@ -10,6 +11,27 @@ export default {
       myChart: null
     }
   },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    dataValue: {
+      type: Array,
+      default: () => [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210]
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
   methods: {
     init() {
       let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'];
@@ -19,7 +41,7 @@ export default {
         tooltip: {
           trigger: 'axis',
         },
-        color: ['#AD7DC2'],
+        color: [this.color],
         dataZoom: [{
           type: 'inside',
           startValue: start,
@@ -64,7 +86,7 @@ export default {
             type: 'value',
             name: '水量统计情况',
             axisLabel: {
-              formatter: '{value} KW·h'
+              formatter: '{value} 吨'
             },
             axisLine: {
               show: false,
@@ -88,8 +110,8 @@ export default {
               focus: 'series'
             },
             itemStyle : {
-              color:'#AD7DC2',
-              borderColor:"#AD7DC2",
+              color: this.color,
+              borderColor: this.color,
               normal: {
                 label : {
                   show: true,
@@ -99,7 +121,7 @@ export default {
                 }
               }
             },
-            data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210]
+            data: this.dataValue
           }
         ]
       }
@@ -107,7 +129,7 @@ export default {
     }
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartWater'));
+    this.myChart = this.$echarts.init(document.getElementById('chartWater-' + this.id));
     this.init()
   }
 }