天气

src/App.vue

@@ -25,4 +25,7 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+.el-cascader-menu {
+  height: 300px !important;
+}
 </style>

src/main.js

@@ -13,7 +13,7 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
-import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message } from 'element-ui';
+import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
@@ -26,6 +26,7 @@ Vue.use(Icon)
 Vue.use(Input)
 Vue.use(Button)
 Vue.use(Message)
+Vue.use(Cascader)
 Vue.prototype.$message = Message;
 
 new Vue({

src/utils/api.js

@@ -79,3 +79,29 @@ export function getRoomVideo(data) {
     params: data
   })
 }
+
+/** 首页生产经营 **/
+export function getListLargeScreen(data) {
+  return axios({
+    url: 'produce/prodWorkPlan/listLargeScreen',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 得到video列表 **/
+export function getVideoAll(data) {
+  return axios({
+    url: 'video/cameraArea/lsitAndCamera',
+    method: 'get',
+    params: data
+  })
+}
+/** 根据id查视频 **/
+export function getVideo(data) {
+  return axios({
+    url: '/video/camera/getCameraDetails',
+    method: 'post',
+    data: data
+  })
+}

src/views/Home/Home.vue

@@ -153,7 +153,7 @@
           <div class="case-title">总存栏</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">15427</strong>头</span>
+              <span><strong class="sign">{{pro.total ? pro.total : '设备暂无数据'}}</strong>{{pro.total ? '头' : ''}}</span>
             </div>
           </div>
         </div>
@@ -169,7 +169,7 @@
           <div class="case-title">本月累计销售额度</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">21354.2</strong>元</span>
+              <span><strong class="sign">{{pro.money ? pro.money : '设备暂无数据'}}</strong>{{pro.money ? '元' : ''}}</span>
             </div>
           </div>
         </div>
@@ -177,7 +177,7 @@
           <div class="case-title">今日任务</div>
           <div class="case-content">
             <div class="case-two">
-              <span><strong class="sign">7</strong>个</span>
+              <span><strong class="sign">{{pro.task ? pro.task : '设备暂无数据'}}</strong>{{pro.task ? '个' : ''}}</span>
             </div>
           </div>
         </div>
@@ -261,7 +261,7 @@
 </template>
 
 <script>
-import {getScreen} from "@/utils/api";
+import {getScreen, getListLargeScreen} from "@/utils/api";
 
 export default {
   name: "Home",
@@ -315,6 +315,7 @@ export default {
       timer4: null,
       currentTime: new Date(),
       env: {},
+      pro: {},
     }
   },
   methods: {
@@ -324,6 +325,11 @@ export default {
           this.env = res.data;
         }
       })
+      getListLargeScreen({}).then(res => {
+        if(res.code === 10000) {
+          this.pro = res.data;
+        }
+      })
     },
     prev() {
       if(this.num > 0) {

src/views/MainLayout.vue

@@ -243,10 +243,10 @@ export default {
     transform: translate(-50% , 0);
   }
   .main-back {
-    width: 180px;
-    height: 40px;
-    font-size: 18px;
-    line-height: 40px;
+    width: 140px;
+    height: 30px;
+    font-size: 14px;
+    line-height: 30px;
     background: url("../assets/Home/u761.svg") no-repeat;
     background-size: 100% 100%;
     color: white;

src/views/Monit/Monit.vue

@@ -2,45 +2,53 @@
   <div class="monit">
     <div class="monit-left">
       <div class="monit-title" @click="isShow = !isShow">
-        <div>
-          <span>配怀舍过道东&emsp;</span>
-        </div>
-        <div>
-          <i class="icon"></i>
-        </div>
-      </div>
-      <div v-show="isShow" class="monit-content">
-        <div class="content-flex">
-          <select-block :title="'一栋'">
-            <template v-slot:left>
-              <select-column :list="simulatedData"></select-column>
-            </template>
-            <template v-slot:right>
-              <select-column :list="simulatedData" :floor="false" :type="1"></select-column>
-            </template>
-          </select-block>
-        </div>
-        <div class="content-flex">
-          <select-block :title="'一栋'">
-            <template v-slot:left>
-              <select-column :list="simulatedData"></select-column>
-            </template>
-            <template v-slot:right>
-              <select-column :list="simulatedData" :type="1"></select-column>
-            </template>
-          </select-block>
-        </div>
-        <div class="content-flex">
-          <select-block :title="'一栋'">
-            <template v-slot:left>
-              <select-column :list="simulatedData"></select-column>
-            </template>
-            <template v-slot:right>
-              <select-column :list="simulatedData" :type="1"></select-column>
-            </template>
-          </select-block>
-        </div>
+        <el-cascader
+          v-model="videoId"
+          :options="options"
+          size="mini"
+          @change="handleChange"
+          :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover'}"
+          :show-all-levels="false"></el-cascader>
+<!--        <div>-->
+<!--          <span>配怀舍过道东&emsp;</span>-->
+<!--        </div>-->
+<!--        <div>-->
+<!--          <i class="icon"></i>-->
+<!--        </div>-->
       </div>
+      <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+<!--      <div v-show="isShow" class="monit-content">-->
+<!--        <div class="content-flex">-->
+<!--          <select-block :title="'一栋'">-->
+<!--            <template v-slot:left>-->
+<!--              <select-column :list="simulatedData"></select-column>-->
+<!--            </template>-->
+<!--            <template v-slot:right>-->
+<!--              <select-column :list="simulatedData" :floor="false" :type="1"></select-column>-->
+<!--            </template>-->
+<!--          </select-block>-->
+<!--        </div>-->
+<!--        <div class="content-flex">-->
+<!--          <select-block :title="'一栋'">-->
+<!--            <template v-slot:left>-->
+<!--              <select-column :list="simulatedData"></select-column>-->
+<!--            </template>-->
+<!--            <template v-slot:right>-->
+<!--              <select-column :list="simulatedData" :type="1"></select-column>-->
+<!--            </template>-->
+<!--          </select-block>-->
+<!--        </div>-->
+<!--        <div class="content-flex">-->
+<!--          <select-block :title="'一栋'">-->
+<!--            <template v-slot:left>-->
+<!--              <select-column :list="simulatedData"></select-column>-->
+<!--            </template>-->
+<!--            <template v-slot:right>-->
+<!--              <select-column :list="simulatedData" :type="1"></select-column>-->
+<!--            </template>-->
+<!--          </select-block>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
     <div class="monit-right">
       <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
@@ -55,15 +63,13 @@
 <script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
-import SelectBlock from "@/views/Zoology/leftTop/SelectBlock";
-import SelectColumn from "@/views/Zoology/leftTop/SelectColumn";
+import {getVideoAll, getVideo} from "@/utils/api";
+
 export default {
   name: "Monit",
   components: {
     swiper,
     swiperSlide,
-    SelectBlock,
-    SelectColumn
   },
   data() {
     return {
@@ -78,22 +84,36 @@ export default {
           disableOnInteraction: false
         },
       },
+      videoId: '',
       isShow: false,
-      simulatedData: [ // 左上 —— 模拟的数据
-        { id: 1, name: '1' },
-        { id: 2, name: '11' },
-        { id: 3, name: '111' },
-        { id: 4, name: '1111' },
-        { id: 5, name: '11112' },
-        { id: 6, name: '11111' },
-        { id: 7, name: '111111' },
-        { id: 8, name: '1111111' },
-        { id: 9, name: '11111112' },
-        { id: 10, name: '11111113' },
-        { id: 11, name: '11111114' },
-        { id: 12, name: '11111115' },
-      ],
+      isVideo: false,
+      options: [],
+      cameraOne: '',
+      cameraTwo: '',
     }
+  },
+  methods: {
+    init() {
+      getVideoAll({}).then(res => {
+        if(res.code === 10000) {
+          this.options = res.data;
+        }
+      })
+    },
+    handleChange(value) {
+      let val = value[value.length - 1];
+      let params= {
+        cameraIds: [val],
+      }
+      getVideo(params).then(res =>{
+        this.isVideo = true;
+        this.cameraOne = res.data[0].wsUrl;
+        this.cameraTwo = res.data[0].rtspUrl;
+      })
+    },
+  },
+  mounted() {
+    this.init()
   }
 }
 </script>
@@ -113,6 +133,8 @@ export default {
     background: url("../../assets/BioSafety/kuang.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
+    box-sizing: border-box;
+    padding: 40px 30px 30px 30px;
   }
   .monit-right {
     width: 450px;
@@ -166,4 +188,4 @@ export default {
   .content-flex {
     flex: 1;
   }
-</style>
+</style>