111

src/router/ChildrenRouters.js

@@ -271,16 +271,16 @@ const childrenRouters = [
    *
    * **/
 
-  // {
-  //   path: '/videoLook',
-  //   name: 'VideoLook',
-  //   component: () => import('../views/Video/VideoLook.vue'),
-  //   meta: {
-  //     title: '监控查看',
-  //     permission: 'videoLook',
-  //     parentName: '视频监控'
-  //   }
-  // },
+  {
+    path: '/videoLook',
+    name: 'VideoLook',
+    component: () => import('../views/Video/VideoLook.vue'),
+    meta: {
+      title: '大屏监控设置',
+      permission: 'videoLook',
+      parentName: '视频监控'
+    }
+  },
   {
     path: '/areaAdmin',
     name: 'AreaAdmin',

src/utils/api.js

@@ -669,3 +669,49 @@ export function delXFarm(data) {
   })
 }
 
+/** 得到video列表 **/
+export function getVideoAll(data) {
+  return axios({
+    url: 'video/cameraArea/lsitAndCamera',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 添加大屏video **/
+export function baseVideoAdd(data) {
+  return axios({
+    url: '/video/baseSpecificVideo/add',
+    method: 'post',
+    data: data
+  })
+}
+
+/**  大屏全部**/
+export function baseVideoList(data) {
+  return axios({
+    url: '/video/baseSpecificVideo/list',
+    method: 'get',
+    params: data
+  })
+}
+
+/**  大屏删除 **/
+export function baseVideoDel(data) {
+  return axios({
+    url: '/video/baseSpecificVideo/remove',
+    method: 'get',
+    params: data
+  })
+}
+
+
+/** 大屏编辑 **/
+export function baseVideoEdit(data) {
+  return axios({
+    url: '/video/baseSpecificVideo/update',
+    method: 'post',
+    data: data
+  })
+}
+

src/views/Video/VideoAdmin.vue

@@ -518,6 +518,7 @@ export default {
             this.cameraTwo = res.data[0].rtspUrl;
             this.last = res.data[0].lastId;
             this.next = res.data[0].nextId;
+            this.cameraTitle = res.data[0].cameraName;
           } else {
             this.$message.error(res.message);
           }

src/views/Video/VideoLook.vue

@@ -1,10 +1,294 @@
 <template>
-  <div>视频监控</div>
+  <div>
+    <new-table
+        :height="600"
+        :title="title"
+        :listData="videoLists"
+        :tableItems="tableItems"
+        :shows="tableShows"
+    >
+      <template #right>
+        <el-button
+            size="mini"
+            type="primary"
+            style="margin-right: 10px"
+            @click="add"
+        >添加监控</el-button>
+      </template>
+      <template #type="scope">
+       <span>{{getType(scope.row.type)}}</span>
+      </template>
+      <template #handler="scope">
+        <el-button
+            size="mini"
+            style="margin-right: 10px"
+            @click="edit(scope.row)"
+        >编辑</el-button
+        >
+        <el-popconfirm
+            title=" 确定要删除这个区域吗？"
+            @confirm="del(scope.row)"
+        >
+          <el-button
+              type="danger"
+              size="mini"
+              slot="reference"
+          >删除</el-button
+          >
+        </el-popconfirm>
+        <el-button
+            size="mini"
+            type="primary"
+            style="margin-left: 10px"
+            @click="open(scope.row)"
+        >查看摄像头</el-button
+        >
+      </template>
+    </new-table>
+    <!-- 新增编辑   -->
+    <el-dialog
+        :title="showType ? '编 辑' : '新 增'"
+        :visible.sync="dialogVisible"
+        width="30%"
+    >
+      <div>
+        <el-form
+            ref="form"
+            :model="form"
+            :rules="rules"
+            label-width="120px"
+            size="mini"
+        >
+          <el-form-item label="大屏所属位置" prop="type">
+            <el-select v-model="form.type">
+              <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="选择监控" prop="selectVideo">
+            <el-cascader
+                v-model="selectVideo"
+                :options="options"
+                size="mini"
+                @change="handleChange"
+                :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"
+                :show-all-levels="false"></el-cascader>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="reset">重 置</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit('form')">{{
+            showType ? "更 新" : "新 增"
+          }}</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :title="cameraTitle" :visible.sync="isVideo" width="50%">
+      <div style="width: 100%; height: 560px; text-align: center;">
+        <iframe
+            v-if="isVideo"
+            :src="
+            'static/jinm/index.html?' +
+              '1' +
+              ',' +
+              cameraOne +
+              ',' +
+              cameraTwo +
+              ',' +
+              '100%' +
+              ',' +
+              '0'
+          "
+            style="width: 100%; height: 530px;"
+            frameborder="0"
+            allowfullscreen="true"
+        ></iframe>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import NewTable from "../../components/newTable/NewTable";
+import {getVideoAll, baseVideoAdd, baseVideoList, baseVideoDel, baseVideoEdit, getVideo} from "../../utils/api";
 export default {
-  name: "VideoLook"
+  name: "VideoLook",
+  components: {
+    NewTable
+  },
+  data() {
+    return {
+      title: '视频列表',
+      tableItems: [
+        {
+          prop: "id",
+          label: "ID",
+          minWidth: "50",
+          slotName: "id",
+        },
+        {
+          prop: "videoName",
+          label: "摄像头名称",
+          minWidth: "100",
+          slotName: "videoName",
+        },
+        {
+          label: "所属大屏位置",
+          minWidth: "100",
+          slotName: "type",
+        },
+        {
+          label: "操作",
+          minWidth: "150",
+          slotName: "handler",
+        },
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      videoLists: [],
+      typeList: [
+        {
+          id: 1,
+          name: '门卫管控'
+        },
+        {
+          id: 2,
+          name: '环境监测'
+        }
+      ],
+      showType: false,
+      dialogVisible: false,
+      form: {
+        videoId: '',
+        type: ''
+      },
+      options: [],
+      selectVideo: [],
+      rules: {
+        type: [{ required: true, message: '请选择位置', trigger: 'change' }],
+      },
+      cameraTitle: '',
+      isVideo: false,
+      cameraOne: '',
+      cameraTwo: '',
+    }
+  },
+  methods: {
+    init() {
+      baseVideoList({}).then(res => {
+        if(res.code === 10000) {
+          this.videoLists = res.data;
+        }
+      })
+    },
+    initVideo() {
+      getVideoAll({}).then(res => {
+        if(res.code === 10000) {
+          res.data.forEach(item => {
+            item.cameraList.forEach(items => {
+              items.runStatus = !items.runStatus
+            })
+          })
+          this.options = res.data;
+        }
+      })
+    },
+    getType(val) {
+      let str = '';
+      this.typeList.forEach(item => {
+        if(item.id === val) {
+          str = item.name
+        }
+      })
+      return str
+    },
+    add() {
+      this.dialogVisible = true;
+      this.showType = false;
+    },
+    edit(row) {
+      this.dialogVisible = true;
+      this.showType = true;
+      this.form.id = row.id;
+      this.form.type = row.type;
+      this.form.videoId = row.videoId;
+      let arr = row.selectVideo.split(',');
+      this.selectVideo = arr.map(Number);
+    },
+    del(val) {
+      let params = {
+        id: val.id
+      }
+      baseVideoDel(params).then(res => {
+        if(res.code === 10000) {
+          this.init()
+          this.$message.success(res.message);
+        } else {
+          this.$message.error(res.message);
+        }
+      })
+    },
+    open(row) {
+      let params = {
+        cameraIds: [row.videoId]
+      }
+      getVideo(params).then(res => {
+        this.isVideo = true;
+        this.cameraOne = res.data[0].wsUrl;
+        this.cameraTwo = res.data[0].rtspUrl;
+      })
+    },
+    handleChange(value) {
+       this.form.videoId = value[value.length - 1];
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.showType) {
+            let params = {
+              id: this.form.id,
+              videoId: this.form.videoId,
+              type: this.form.type,
+              selectVideo: this.selectVideo.join(',')
+            }
+            baseVideoEdit(params).then(res => {
+              if(res.code === 10000) {
+                this.init()
+                this.$message.success(res.message);
+              } else {
+                this.$message.error(res.message);
+              }
+              this.dialogVisible = false;
+            })
+          } else {
+            let params = {
+              videoId: this.form.videoId,
+              type: this.form.type,
+              selectVideo: this.selectVideo.join(',')
+            }
+            baseVideoAdd(params).then(res => {
+              if(res.code === 10000) {
+                this.init()
+                this.$message.success(res.message);
+              } else {
+                this.$message.error(res.message);
+              }
+              this.dialogVisible = false;
+            })
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.initVideo();
+    this.init();
+  }
 }
 </script>