11/20

config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        // target: 'http://192.168.1.8:8000/',
-        target: 'http://192.168.1.4:8000/',
+        target: 'http://192.168.1.8:8000/',
+        // target: 'http://192.168.1.4:8000/',
         changeOrigin: true,
         pathRewrite: {
           '^/api': '' //重写接口

src/components/Index.vue

@@ -30,7 +30,7 @@
         >
           <el-menu-item index="/index/list1">
             <i :class="iconObj[22]"></i>
-            <span slot="title">监控列表</span>
+            <span slot="title">设备列表</span>
           </el-menu-item>
           <el-menu-item index="/index/monitor1">
             <i :class="iconObj[20]"></i>
@@ -68,7 +68,7 @@ export default {
     getUserInfo() {
       this.$axios({
         method: "POST",
-        url: "/api/logoheader",
+        url: "logoheader",
       }).then((res) => {
         this.header = res.data.header;
         this.logo = res.data.logo;

src/components/Login.vue

@@ -71,7 +71,7 @@ export default {
 			}
 			this.$axios({
 				method: 'POST',
-				url: '/api/login',
+				url: 'login',
 				data: this.qs.stringify({
 					username: this.username,
 					password: this.pass

src/main.js

@@ -14,11 +14,11 @@ Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
 
 Vue.use(ElementUI);
 
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-// axios.defaults.timeout = 30000;
-// axios.defaults.baseURL = 'http://47.104.218.216:8006/' //线下杨明明
-// axios.defaults.withCredentials = true //axios请求时携带session
-// axios.defaults.crossDomain = true 
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+axios.defaults.timeout = 30000;
+axios.defaults.baseURL = 'http://39.106.113.84:8000/' //线下杨明明
+axios.defaults.withCredentials = true //axios请求时携带session
+axios.defaults.crossDomain = true 
 
 Vue.config.productionTip = false
 

src/pages/EquipList.vue

@@ -25,7 +25,7 @@
         <el-card class="box-card pad0">
           <div class="img-box">
             <img src="@/assets/images/monitor/jkIconOn.png" />
-            <p>监控设备</p>
+            <p>可视农业设备</p>
           </div>
           <div class="detail">
             <p>
@@ -87,7 +87,7 @@ export default {
     getList() {
       this.$axios({
         method: "POST",
-        url: "/api/list_camera",
+        url: "list_camera",
         data: this.qs.stringify({
           f_id: this.queryInfo.f_id,
           page: this.queryInfo.page,
@@ -116,7 +116,7 @@ export default {
           if (value) {
             this.$axios({
               method: "POST",
-              url: "/api/equiplist",
+              url: "equiplist",
               data: this.qs.stringify({
                 req: "rename",
                 eid: id,

src/pages/Monitor.vue

@@ -105,7 +105,9 @@
             v-for="(item, index) in Idlist"
             :key="index"
             :class="{ active: activeIndex == index }"
-            @click="selectEquip(item.device_id, item.jktype, index)"
+            @click="
+              selectEquip(item.device_id, item.jktype, index, item.videotape)
+            "
           >
             <span
               :class="['dot', item.status == 1 ? 'onLine' : 'outLine']"
@@ -167,11 +169,11 @@
             ></span>
           </div>
           <div
-            v-show="jktype == 1"
+            v-show="videotape == 1"
             class="playBack"
             @click="playBackDialogVisible = true"
           ></div>
-          <div @click="addEquip()" class="addequip"></div>
+          <div @click="addEquipDialogVisible = true" class="addequip"></div>
           <div @click="fScreenFun()" class="fSBtn1"></div>
         </div>
       </div>
@@ -212,11 +214,18 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="通道" prop="aisle">
-          <el-select v-model="backForm.aisle" placeholder="请选择">
-            <el-option label="通道一" value="1"> </el-option>
-            <el-option label="通道二" value="2"> </el-option>
-            <el-option label="通道三" value="3"> </el-option>
-            <el-option label="通道四" value="4"> </el-option>
+          <el-select
+            style="width: 400px"
+            v-model="backForm.aisle"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in Number(jktype)"
+              :key="item"
+              :label="'通道' + item"
+              :value="item"
+            >
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -230,10 +239,44 @@
         <div id="playWind"></div>
       </div>
     </el-dialog>
+    <!-- 添加设备 -->
+    <el-dialog
+      title="添加设备"
+      :visible.sync="addEquipDialogVisible"
+      width="400px"
+    >
+      <el-form
+        ref="addEquipFormRef"
+        :model="addEquipForm"
+        :rules="addEquipFormRules"
+        label-width="80px"
+      >
+        <el-form-item label="设备id" prop="device_id">
+          <el-input
+            style="width: 217px"
+            v-model="addEquipForm.device_id"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="通道" prop="jk_type">
+          <el-select v-model="addEquipForm.jk_type" placeholder="请选择">
+            <el-option
+              v-for="item in 12"
+              :key="item"
+              :label="'通道' + item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addEquipDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addEquipSubm">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-// import "@/plugin/ezuikit.js";
 export default {
   data() {
     return {
@@ -242,7 +285,8 @@ export default {
       id: "", //监控选中状态selected，右侧菜单控制的ID
       oneId: "", //单个监控全屏时的监控id
       activeIndex: null, //控制设备列表选中状态
-      jktype: "", //为1有回放，否则无回放
+      jktype: "", //设备的通道数
+      videotape: "", //0是不支持回放,1支持
       divNum: 1, //默认分屏数量
       hlsHdSrc: "",
       rtmpHdSrc: "",
@@ -255,6 +299,7 @@ export default {
       html: "", //插件播放内容
       picUrl: "", //视频拍照地址
       playBackDialogVisible: false,
+      addEquipDialogVisible: false,
       fScreen: false, //默认多个监控非全屏
       oneFScreen: false, //单个监控全屏状态
       btnFlag: true, //全屏按钮显示控制
@@ -270,17 +315,27 @@ export default {
         ],
         aisle: [{ required: true, message: "请选择通道", trigger: "change" }],
       },
+      addEquipFormRules: {
+        device_id: [
+          { required: true, message: "请填写设备id", trigger: "blur" },
+        ],
+        jk_type: [{ required: true, message: "请选择通道", trigger: "change" }],
+      },
       playback: {}, //回放
       videoObj: {},
+      addEquipForm: {
+        device_id: "",
+        jk_type: "",
+      },
     };
   },
   filters: {
     formatName: function (value) {
       //设备名字
       if (value.device_name) {
-        return value.device_name;
+        return `${value.device_name}-${value.jktype}`;
       } else {
-        return "设备" + value.device_id;
+        return `${value.device_id}-${value.jktype}`;
       }
     },
   },
@@ -292,7 +347,7 @@ export default {
     getJkList() {
       this.$axios({
         method: "POST",
-        url: "/api/list_camera",
+        url: "list_camera",
         data: this.qs.stringify({ page: this.currPage }),
       }).then((res) => {
         this.Idlist = res.data.data;
@@ -303,7 +358,7 @@ export default {
     getJkList2() {
       this.$axios({
         method: "POST",
-        url: "/api/list_camera",
+        url: "list_camera",
         data: this.qs.stringify({ page: this.currPage }),
       }).then((res) => {
         this.Idlist = res.data.data;
@@ -331,7 +386,7 @@ export default {
         if (ctrl == "takephoto") {
           this.$axios({
             method: "POST",
-            url: "/api/camera_takephoto",
+            url: "camera_takephoto",
             data: this.qs.stringify({
               device_id: id,
               ctrl: ctrl,
@@ -349,7 +404,7 @@ export default {
           //上下左右、放大、缩小
           this.$axios({
             method: "POST",
-            url: "/api/ctrl_camera",
+            url: "ctrl_camera",
             data: this.qs.stringify({
               device_id: id,
               ctrl: ctrl,
@@ -372,7 +427,7 @@ export default {
       if (id != "") {
         this.$axios({
           method: "POST",
-          url: "/api/ctrl_camera",
+          url: "ctrl_camera",
           data: this.qs.stringify({
             device_id: id,
             ctrl: "stop",
@@ -388,9 +443,12 @@ export default {
         if (this.Idlist[item]) {
           //避免右侧监控数量少于divNum
           this.$axios({
-            url: "/api/addr_camera",
+            url: "addr_camera",
             method: "POST",
-            data: this.qs.stringify({ device_id: this.Idlist[item].device_id }),
+            data: this.qs.stringify({
+              device_id: this.Idlist[item].device_id,
+              jk_type: this.Idlist[item].jktype,
+            }),
           }).then((res) => {
             var data = eval("(" + res.data + ")");
             var hlsHdSrc = data.hlsHd;
@@ -413,8 +471,7 @@ export default {
       }
     },
     //选中右侧菜单设备
-    selectEquip(device_id, jktype, index) {
-      console.log(jktype);
+    selectEquip(device_id, jktype, index, videotape) {
       if (this.selected !== "") {
         //判断是否选中左侧监控
         document
@@ -424,11 +481,12 @@ export default {
         this.jktype = jktype;
         this.activeIndex = index; //菜单选中状态
         this.id = device_id; //保存选中的设备id
+        this.videotape = videotape;
         console.log(this.divName);
         this.$axios({
-          url: "/api/addr_camera",
+          url: "addr_camera",
           method: "POST",
-          data: this.qs.stringify({ device_id: device_id }),
+          data: this.qs.stringify({ device_id: device_id, jk_type: jktype }),
         }).then((res) => {
           var data = eval("(" + res.data + ")");
           let hlsHdSrc = data.hlsHd;
@@ -477,32 +535,6 @@ export default {
         message: "手动复制，在浏览器打开，另存为",
       });
     },
-    //添加设备
-    addEquip() {
-      this.$prompt("添加设备id", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-      })
-        .then(({ value }) => {
-          this.$axios({
-            method: "POST",
-            url: "/api/add_camera",
-            data: this.qs.stringify({ device_id: value }),
-          }).then((res) => {
-            if (res.data == 1) {
-              this.getJkList();
-            } else {
-              this.$message.error(res.data);
-            }
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "取消添加",
-          });
-        });
-    },
     fScreenFun() {
       this.fScreen = !this.fScreen;
     },
@@ -527,54 +559,54 @@ export default {
         if (!valid) {
           return false;
         }
-      });
-      let start = new Date(this.backForm.time[0]);
-      let end = new Date(this.backForm.time[1]);
-      let beginVal = "";
-      let endVal = "";
-      function checked(num) {
-        if (num < 10) {
-          num = "0" + num;
-        }
-        return num;
-      }
-      beginVal =
-        beginVal +
-        start.getFullYear() +
-        checked(start.getMonth() + 1) +
-        checked(start.getDate()) +
-        checked(start.getHours()) +
-        checked(start.getMinutes()) +
-        checked(start.getSeconds());
-      endVal =
-        endVal +
-        end.getFullYear() +
-        checked(end.getMonth() + 1) +
-        checked(end.getDate()) +
-        checked(end.getHours()) +
-        checked(end.getMinutes()) +
-        checked(end.getSeconds());
-      this.$axios({
-        method: "POST",
-        url: "/api/nvr_view",
-        data: this.qs.stringify({
-          e_id: this.id,
-        }),
-      }).then((res) => {
-        if (!document.getElementById("playWind")) {
-          document.getElementById("videoBack").innerHTML =
-            '<div id="playWind"></div>';
-        }
-        let accessToken = res.data.jk_token;
-        let url = `ezopen://open.ys7.com/${this.id}/${this.backForm.aisle}.local.rec?begin=${beginVal}&end=${endVal}`;
-        this.playback = new EZUIKit.EZUIPlayer({
-          id: "playWind",
-          autoplay: true,
-          url: url,
-          accessToken: accessToken,
-          decoderPath: "static/js/",
-          width: 560,
-          height: 460,
+        let start = new Date(this.backForm.time[0]);
+        let end = new Date(this.backForm.time[1]);
+        let beginVal = "";
+        let endVal = "";
+        function checked(num) {
+          if (num < 10) {
+            num = "0" + num;
+          }
+          return num;
+        }
+        beginVal =
+          beginVal +
+          start.getFullYear() +
+          checked(start.getMonth() + 1) +
+          checked(start.getDate()) +
+          checked(start.getHours()) +
+          checked(start.getMinutes()) +
+          checked(start.getSeconds());
+        endVal =
+          endVal +
+          end.getFullYear() +
+          checked(end.getMonth() + 1) +
+          checked(end.getDate()) +
+          checked(end.getHours()) +
+          checked(end.getMinutes()) +
+          checked(end.getSeconds());
+        this.$axios({
+          method: "POST",
+          url: "nvr_view",
+          data: this.qs.stringify({
+            e_id: this.id,
+          }),
+        }).then((res) => {
+          if (!document.getElementById("playWind")) {
+            document.getElementById("videoBack").innerHTML =
+              '<div id="playWind"></div>';
+          }
+          let accessToken = res.data.jk_token;
+          let url = `ezopen://open.ys7.com/${this.id}/${this.backForm.aisle}.local.rec?begin=${beginVal}&end=${endVal}`;
+          this.playback = new EZUIKit.EZUIPlayer({
+            id: "playWind",
+            autoplay: true,
+            url: url,
+            accessToken: accessToken,
+            decoderPath: "static/js/",
+            width: 560,
+            height: 460,
+          });
         });
       });
     },
@@ -583,6 +615,25 @@ export default {
       this.playback.stop();
       document.getElementById("videoBack").innerHTML = "";
     },
+    addEquipSubm() {
+      this.$refs.addEquipFormRef.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.$axios({
+          method: "POST",
+          url: "add_camera",
+          data: this.qs.stringify(this.addEquipForm),
+        }).then((res) => {
+          if (res.data == 1) {
+            this.addEquipDialogVisible=false
+            this.getJkList();
+          } else {
+            this.$message.error(res.data);
+          }
+        });
+      });
+    },
   },
   destroyed() {
     for (let item in this.videoObj) {

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-const Login = () => import('@/components/Login')
+// const Login = () => import('@/components/Login')
 const Index = () => import('@/components/Index')
 const Monitor = () => import('@/pages/Monitor')
 const EquipList = () => import('@/pages/EquipList')
@@ -9,12 +9,12 @@ Vue.use(Router)
 export default new Router({
   routes: [{
       path: '',
-      redirect: '/index/list'
-    },
-    {
-      path: '/login',
-      component: Login
+      redirect: '/index/list1'
     },
+    // {
+    //   path: '/login',
+    //   component: Login
+    // },
     {
       path: '/index',
       component: Index,