监控

src/views/monitoring/camera/index.vue

@@ -155,50 +155,93 @@
     /> -->
 
     <!-- 添加或修改安防监控对话框 -->
-    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+        :inline="true"
+      >
         <el-form-item label="摄像头名称" prop="cname">
           <el-input v-model="form.cname" placeholder="请输入摄像头名称" />
         </el-form-item>
         <el-form-item label="访问地址" prop="caddr">
           <el-input v-model="form.caddr" placeholder="请输入访问地址" />
         </el-form-item>
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.cstatus">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="单位id" prop="unitid">
+
+        <!-- <el-form-item label="单位id" prop="unitid">
           <el-input v-model="form.unitid" placeholder="请输入单位id" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="单位名称" prop="unitname">
-          <el-input v-model="form.unitname" placeholder="请输入单位名称" />
+          <!-- <el-input v-model="form.unitname" placeholder="请输入单位名称" /> -->
+          <treeselect
+            v-model="form.unitid"
+            :options="users"
+            placeholder="请选择单位"
+            class="threeselects"
+            @select="selectPeo"
+          />
         </el-form-item>
-        <el-form-item label="存入菜单ID" prop="powerArea">
-          <el-input v-model="form.powerArea" placeholder="请输入存入菜单ID" />
+        <el-form-item label="状态" prop="cstatus">
+          <!-- <el-radio-group v-model="form.cstatus">
+            <el-radio label="1">请选择字典生成</el-radio>
+
+          </el-radio-group> -->
+          <el-switch
+            v-model="form.cstatus"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+            active-value="1"
+            inactive-value="0"
+          >
+          </el-switch>
+          <span class="greed" v-if="form.cstatus == '1'"></span>
+          <span class="CCC" v-if="form.cstatus == '0'"></span>
         </el-form-item>
+        <!-- <el-form-item label="存入菜单ID" prop="powerArea">
+          <el-input v-model="form.powerArea" placeholder="请输入存入菜单ID" />
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog> -->
+    </el-dialog>
     <!-- 视频播放窗口 -->
+
     <el-row>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['monitoring:camera:add']"
+          >新增</el-button
+        >
+      </el-col>
       <el-col :span="1.5" class="isSubmit">
-        <el-radio-group v-model="queryParams.type" @change="caoZuoTypefun">
-          <el-radio-button label="0">单屏</el-radio-button>
-          <el-radio-button label="1">四分屏</el-radio-button>
-          <el-radio-button label="2">九分屏</el-radio-button>
-          <el-radio-button label="3" class="allFlv1">十六分屏</el-radio-button>
-          <el-radio-button label="4" class="allFlv">全通道FLV</el-radio-button>
-          <el-radio-button label="5" class="fullscreen">全屏</el-radio-button>
-        </el-radio-group>
+        <!-- <el-radio-group v-model="queryParams.type" @change="caoZuoTypefun"> -->
+        <button @click="one" class="single" :class="this.btn==0?'bg':''">单屏</button>
+        <button @click="four" class="singles" :class="this.btn==1?'bg':''">四分屏</button>
+        <!-- <el-radio-button label="2">九分屏</el-radio-button> -->
+        <!-- <el-radio-button label="3" class="allFlv1">十六分屏</el-radio-button> -->
+        <button @click="all" class="allFlv" :class="this.btn==3?'bg':''">全通道FLV</button>
+        <!-- <el-radio-button label="5" class="fullscreen">全屏</el-radio-button> -->
+        <!-- </el-radio-group> -->
       </el-col>
     </el-row>
     <hr />
     <el-row :gutter="20">
-      <el-col :span="5" :xs="24">
+      <el-col :span="4" :xs="24">
         <div class="dadui">
           <img
             style="padding-top: 3px; margin-left: 15px"
@@ -222,12 +265,13 @@
             <div class="userAgrees">
               <ul style="height: calc(100vh - 240px); overflow: auto">
                 <li
-                  v-for="(item, index) in rtsplist"
+                  style="margin-left: -40px; padding-left: 40px"
+                  v-for="(item, index) in cameraList"
                   :key="index"
                   @click="clickhandleitem(item, index)"
                 >
                   <i class="el-icon-video-camera-solid"></i>
-                  摄像头{{ index }}
+                  {{ item.cname }}
                 </li>
               </ul>
             </div>
@@ -237,46 +281,27 @@
       <!-- </el-row> -->
       <el-col :span="19" :xs="24">
         <!-- 单屏播放 -->
-        <div style="position: relative" v-if="this.queryParams.type == 0">
-          <button
-            @click="chooselu"
-            style="position: absolute; z-index: 999"
-            class="choose"
-          >
-            选择通道
-          </button>
-          <video
-            id="singleplay"
-            style="width: 100%; height: calc(100vh - 200px)"
-            autoplay
-            controls
-            @mouseover="choosebtn"
-            @mouseout="chooseleave"
-          ></video>
-        </div>
-        <!-- 四屏播放 -->
-        <div class="video1" v-if="this.queryParams.type == 1">
+        <div style="position: relative" v-if="this.btn == 0">
           <div
-            v-for="(i, index) in 4"
+            v-for="(i, index) in 1"
             :key="index"
             style="
-              width: 49.5%;
-              height: calc(50vh - 106px);
+              width: 100%;
+              height: calc(100vh - 200px);
               margin-left: 5px;
               margin-bottom: 5px;
               position: relative;
             "
           >
-            <button
+            <!-- <button
               style="position: absolute; left: 5px; z-index: 999"
               class="choose"
               @click="chooselu"
             >
               选择通道
-            </button>
+            </button> -->
+            <!-- :id="'videoElement' + i" -->
             <video
-              @mouseover="choosebtn"
-              @mouseout="chooseleave"
               autoplay
               controls
               style="
@@ -286,167 +311,67 @@
                 margin-bottom: 5px;
                 position: relative;
               "
-              :id="'videoElement' + i"
-            >
-            </video>
-          </div>
-        </div>
-
-        <!-- 九分屏幕 -->
-         <div class="video1" v-if="this.queryParams.type == 2">
-          <div
-            style="
-              width: 32%;
-              height: calc(37vh - 106px);
-              margin-left: 5px;
-              margin-bottom: 5px;
-              position: relative;
-            "
-            v-for="(i, index) in 9"
-            :key="index"
-          >
-            <button
-              style="position: absolute; left: 0px; z-index: 999"
-              class="choose"
-              @click="chooselu"
-            >
-              选择通道
-            </button>
-            <video
-              @mouseover="choosebtn"
-              @mouseout="chooseleave"
-              autoplay
-              controls
-              style="width: 100%; height: 100%"
-              :id="'videoElement' + i"
+              id="singleplay"
             ></video>
           </div>
-        </div> 
-        <!-- 十六分屏 -->
-        <div class="video1" v-if="this.queryParams.type == 3">
+        </div>
+        <!-- 四屏播放 -->
+        <!-- <keep-alive> -->
+        <div class="video1" v-if="this.btn == 1">
           <div
-            v-for="(i, index) in 16"
+            v-for="(i, index) in this.fourvideo"
             :key="index"
             style="
-              width: 24.5%;
-              height: calc(30vh - 105px);
+              width: 49.5%;
+              height: calc(50vh - 106px);
               margin-left: 5px;
               margin-bottom: 5px;
               position: relative;
             "
           >
-            <button
-              style="position: absolute; left: 0px; z-index: 999"
-              class="choose"
-              @click="chooselu"
-            >
-              选择通道
-            </button>
             <video
-              @mouseover="choosebtn"
-              @mouseout="chooseleave"
               autoplay
               controls
-              style="width: 100%; height: 100%"
-              :id="'videoElement' + i"
+              style="
+                width: 100%;
+                height: 100%;
+                margin-left: 5px;
+                margin-bottom: 5px;
+                position: relative;
+              "
+              :id="'singleplay' + index"
             ></video>
           </div>
         </div>
         <!-- 全通道FLV -->
-        <div class="video1" v-if="this.queryParams.type == 4">
+        <div class="video1" v-if="this.btn == 3">
           <div
-            v-for="(i, index) in 16"
+            v-for="(i, index) in 6"
             :key="index"
             style="
-              width: 24.5%;
-              height: calc(30vh - 105px);
+              width: 32.9%;
+              height: calc(50vh - 110px);
               margin-left: 5px;
               margin-bottom: 5px;
               position: relative;
             "
           >
-            <button
-              style="position: absolute; left: 0px; z-index: 999"
-              class="choose"
-              @click="chooselu"
-            >
-              选择通道
-            </button>
             <video
-              @mouseover="choosebtn"
-              @mouseout="chooseleave"
               autoplay
               controls
               style="width: 100%; height: 100%"
-              :id="'videoElement' + i"
+              :id="'singleplay' + index"
             ></video>
           </div>
-        </div>
-        <!-- 选择通道弹框 -->
-        <el-dialog
-          :title="title"
-          :visible.sync="open"
-          width="1000px"
-          append-to-body
-          :close-on-click-modal="false"
-        >
-          <el-table
-            v-loading="loading"
-            :data="cameraList"
-            @selection-change="handleSelectionChange"
-          >
-            <!-- <el-table-column type="selection" width="55" align="center" /> -->
-            <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
-            <el-table-column
-              label="序号"
-              type="index"
-              width="50"
-              align="center"
-            />
-            <el-table-column
-              label="拉流地址"
-              align="center"
-              prop="talkTheme"
-              width="600px"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              label="拉流开关"
-              align="center"
-              prop="talkContent"
-              show-overflow-tooltip
-            >
-            </el-table-column>
-            <el-table-column
-              label="操作"
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="btk"
-                  type="text"
-                  @click="handlelook(scope.row)"
-                  v-hasPermi="['thought:parliament:edit']"
-                  >选择</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <pagination
+          <!-- <pagination
+            style="position: absolute; right: 0; bottom: 5px"
             v-show="total > 0"
             :total="total"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"
-          />
-
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-          </div>
-        </el-dialog>
+          /> -->
+        </div>
       </el-col>
     </el-row>
 
@@ -470,6 +395,9 @@
 </template>
 
 <script>
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getDept2 } from "@/api/grassrootsregistration/bdglmeeting";
 import flvjs from "flv.js";
 import {
   listCamera,
@@ -481,6 +409,9 @@ import {
 } from "@/api/monitoring/camera";
 export default {
   name: "Camera",
+  components: {
+    Treeselect,
+  },
   data() {
     return {
       // 树形配置
@@ -535,7 +466,7 @@ export default {
         },
 
         {
-          rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
+          rtsp: "http://192.168.5.187/hdl/live/stream0.flv",
           player: null,
         },
         {
@@ -543,7 +474,7 @@ export default {
           player: null,
         },
         {
-          rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
+          rtsp: "http://192.168.5.187/hdl/live/stream0.flv",
           player: null,
         },
         {
@@ -572,148 +503,151 @@ export default {
       datalist: [],
       screen: 1,
       // 单个视频播放
-      url1: "http://192.168.5.187/hdl/live/stream1.flv",
+      url1: "http://192.168.5.187/hdl/live/stream0.flv",
+      // 获取单位
+      users: [],
+      flvPlayerList1: [],
+      fourvideo: 4,
+      videourl: [
+        "http://192.168.5.187/hdl/live/stream1.flv",
+        "http://192.168.5.187/hdl/live/stream0.flv",
+        "http://192.168.5.187/hdl/live/stream1.flv",
+        "http://192.168.5.187/hdl/live/stream0.flv",
+      ],
+      btn: 0,
     };
   },
   mounted() {
     // 单个视频播放
-    this.$nextTick(() => {
-      this.singleplayvideo();
-    });
+    // this.singleplayvideo();
+    this.oneVideo();
   },
   created() {
-    this.queryParams.type=0
+    this.queryParams.type = 0;
     this.getList();
-    
+    // 获取执行单位列表
+    getDept2().then((res) => {
+      this.users = res.data;
+    });
   },
 
   methods: {
-    // 单视频播放
-    singleplayvideo() {
+    // 初始化视频
+    singleplayvideo(name, url, num) {
+      console.log(name);
       if (flvjs.isSupported()) {
-        let videoElement1 = document.getElementById("singleplay");
-        console.log(videoElement1);
-        let flvPlayer1 = flvjs.createPlayer({
+        // debugger;
+
+        name = flvjs.createPlayer({
           type: "flv",
-          url: this.url1, //你的url地址
+          url: url, //你的url地址
+        });
+        console.log(1);
+        this.$nextTick(() => {
+          // 可以使用回调函数的写法
+          // 这个函数中DOM必定渲染完成
+          let videoElement1 = document.getElementById("singleplay" + num);
+          // debugger;
+          name.attachMediaElement(videoElement1);
+          name.load();
+          name.play();
+          this.flvPlayerList1.push(name);
         });
-        flvPlayer1.attachMediaElement(videoElement1);
-        flvPlayer1.load();
-        flvPlayer1.play();
       }
     },
-    // 鼠标滑过
-    choosebtn() {
-      // console.log(11)
-      $(".choose").show();
+    // 单视屏
+    oneVideo() {
+      this.singleplayvideo("flvPlayer1", this.url1, "");
     },
-    // 鼠标离开
-    chooseleave() {
-      $(".choose").hide();
+    // 单分屏点击事件。
+    clickhandleitem(data, index) {
+      console.log(1);
+      this.destoryVideo(this.flvPlayerList1[0]);
+      this.flvPlayerList1.shift();
+      this.url1 = this.cameraList[index].caddr;
+      this.singleplayvideo("flvPlayer1", this.url1, "");
+      // }
     },
-    // 选择通道弹框
-    chooselu() {
-      this.title = "选择通道";
-      this.open = true;
+    // 单分屏播放
+    one() {
+      this.btn = 0;
+      console.log(this.flvPlayerList1);
+      for (var i of this.flvPlayerList1) {
+        this.destoryVideo(this.flvPlayerList1[0]);
+        this.flvPlayerList1.shift();
+      }
+      console.log(this.flvPlayerList1);
+      this.oneVideo();
+      // console.log(this.flvPlayerList1)
+    },
+    // 四分屏播放
+    four() {
+      this.fourvideo = 4;
+      this.btn = 1;
+      for (var i of this.flvPlayerList1) {
+        this.destoryVideo(this.flvPlayerList1[0]);
+        this.flvPlayerList1.shift();
+      }
+      console.log(this.flvPlayerList1);
+      for (var i = 0; i < this.fourvideo; i++) {
+        // console.log(i)
+        if (i == 1) {
+          this.singleplayvideo("flvPlayer" + i, this.url1, i);
+        } else {
+          this.url1 = this.videourl[i - 2];
+          this.singleplayvideo("flvPlayer" + i, this.url1, i);
+        }
+      }
+      console.log(this.flvPlayerList1);
     },
-
     // 操作类型
     caoZuoTypefun() {
-      // console.log(this.queryParams);
       this.getList();
     },
-    clickhandleitem(data, index) {
-      // console.log(this.rtsplist);
-      this.url = this.rtsplist[index].rtsp;
-      this.url1 = this.rtsplist[index].rtsp;
-      // console.log(this.url)
-      // console.log(this.flvPlayerList,'flvPlayerList')
-      if (this.flvPlayerList.length > 3) {
-        this.destoryVideo(this.flvPlayerList[0]);
-        this.flvPlayerList.shift();
-      }
-      this.createVideo();
-      // console.log(index)
-      this.count > 3 ? (this.count = 1) : this.count++;
-      // console.log(this.count)
+    // 全通道
+    all(){
+      this.btn=3
     },
-    createVideo() {
-      if (flvjs.isSupported()) {
-        var videoElement = document.getElementById("videoElement" + this.count);
-        // console.log(this.url)
-        this.flvPlayer = flvjs.createPlayer(
-          {
-            type: "flv",
-            isLive: true,
-            hasAudio: false,
-            url: this.url,
-          },
-          {
-            enableWorker: false, //不启用分离线程
-            enableStashBuffer: false, //关闭IO隐藏缓冲区
-            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
-            autoCleanupSourceBuffer: true, //自动清除缓存
-          }
-        );
-
-        this.flvPlayer.attachMediaElement(videoElement);
-        // this.flvPlayer.load();
+    // createVideo() {
+    //   if (flvjs.isSupported()) {
+    //     var videoElement = document.getElementById("videoElement" + this.count);
+    //     this.flvPlayer = flvjs.createPlayer(
+    //       {
+    //         type: "flv",
+    //         isLive: true,
+    //         hasAudio: false,
+    //         url: this.url,
+    //       },
+    //       {
+    //         enableWorker: false, //不启用分离线程
+    //         enableStashBuffer: false, //关闭IO隐藏缓冲区
+    //         reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+    //         autoCleanupSourceBuffer: true, //自动清除缓存
+    //       }
+    //     );
 
-        if (this.url !== "" && this.url !== null) {
-          this.flvPlayer.load();
-          this.flvPlayer.play();
-        }
-      }
+    //     this.flvPlayer.attachMediaElement(videoElement);
+    //     // this.flvPlayer.load();
 
-      // 定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
-      setInterval(function () {
-        // console.log(videoElement.buffered,"idididid");
-        if (videoElement.buffered.length > 0) {
-          const end = videoElement.buffered.end(0); // 视频结尾时间
-          const current = videoElement.currentTime; //  视频当前时间
-          const diff = end - current; // 相差时间
-          // console.log(diff);
-          const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
-          const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
-          const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
-          let playbackRate = 1.0; // 播放速度
-          if (diff > diffCritical) {
-            //  this.flvPlayer.load();
-            // console.log("相差超过4秒，进行跳转");
-            videoElement.currentTime = end - 1.5;
-            playbackRate = Math.max(1, Math.min(diffCritical, 16));
-          } else if (diff > diffSpeedUp) {
-            // console.log("相差超过1秒，进行加速");
-            playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
-          }
-          videoElement.playbackRate = playbackRate;
-          if (videoElement.paused) {
-            videoElement.play();
-          }
-        }
-        //  if (videoElement.buffered.length) {
-        //   let end = this.flvPlayer.buffered.end(0);//获取当前buffered值
-        //   let diff = end - this.flvPlayer.currentTime;//获取buffered与currentTime的差值
-        //   if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
-        //     this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0);//手动跳帧
-        //  }
-        // }
-      }, 1000);
+    //     if (this.url !== "" && this.url !== null) {
+    //       this.flvPlayer.load();
+    //       this.flvPlayer.play();
+    //     }
+    //   }
 
-      this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
-        // alert("网络波动,正在尝试连接中...");
-        if (this.flvPlayer) {
-          this.reloadVideo(this.flvPlayer);
-        }
-        // errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
-        // errType是 MediaError时，对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED
-      });
-      this.flvPlayerList.push(this.flvPlayer);
-    },
+    //   this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
+    //     // alert("网络波动,正在尝试连接中...");
+    //     if (this.flvPlayer) {
+    //       this.reloadVideo(this.flvPlayer);
+    //     }
+    //   });
+    //   console.log(this.flvPlayer)
+    //   this.flvPlayerList.push(this.flvPlayer);
+    // },
     reloadVideo(flvPlayer) {
       this.destoryVideo(flvPlayer);
       this.createVideo();
-      this.singleplayvideo();
+      // this.singleplayvideo();
     },
     destoryVideo(flvPlayer) {
       flvPlayer.pause();
@@ -722,13 +656,12 @@ export default {
       flvPlayer.destroy();
       flvPlayer = null;
     },
-
     /** 查询安防监控列表 */
     getList() {
       this.loading = true;
       listCamera(this.queryParams).then((response) => {
         this.cameraList = response.rows;
-        // console.log(this.cameraList)
+        // console.log(this.cameraList);
         this.total = response.total;
         this.loading = false;
         // this.queryParams.type==""
@@ -769,6 +702,10 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+    selectPeo(item) {
+      console.log(item);
+      this.form.unitname = item.label;
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -787,6 +724,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      console.log(this.form);
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -838,6 +776,22 @@ export default {
 };
 </script>
 <style scoped>
+.bg {
+  background: #1d96ff;
+  color: white;
+}
+.greed {
+  position: absolute;
+  top: 26px;
+  right: -10px;
+  color: #13ce66;
+}
+.CCC {
+  position: absolute;
+  top: 26px;
+  right: 118px;
+  color: #cccccc;
+}
 .isSubmit {
   margin-left: 35% !important;
   margin-right: 20%;
@@ -875,16 +829,19 @@ export default {
   color: #ffffff;
 }
 
-::v-deep .allFlv .el-radio-button__inner {
-  width: 82px;
+::v-deep .allFlv{
+  width: 100px;
   height: 36px;
+  color: white;
+  margin-left: 5px;
   background: #196299;
-  padding-left: 10px !important;
+  /* padding-left: 10px !important; */
   font-size: 14px;
+  border: none;
   border-radius: 0px 8px 8px 0px;
 }
 
-::v-deep .allFlv1 .el-radio-button__inner {
+::v-deep .allFlv1 {
   width: 82px;
   height: 36px;
   background: #196299;
@@ -1009,6 +966,18 @@ hr {
   top: 7px;
   left: 60px;
 }
+/* 输入框 */
+::v-deep .el-dialog .el-input__inner {
+  background-color: #004d86 !important;
+  width: 216px;
+  color: white;
+  margin-right: 20px;
+  border: 1px solid white !important;
+}
+::v-deep .el-input__inner {
+  border: 1px solid white !important;
+}
+
 /* 划过效果 */
 ::v-deep .el-tree-node__content:hover {
   /* color: #fff; */
@@ -1067,6 +1036,7 @@ li {
 ::v-deep li {
   height: 32px;
   color: white;
+  line-height: 32px;
 }
 .tree {
   margin-top: -15px;
@@ -1114,4 +1084,65 @@ video {
 ::v-deep .el-dialog {
   background-color: #004d86 !important;
 }
+/* 树形样式 */
+::v-deep .vue-treeselect__control {
+  background-color: #004d86;
+  width: 216px;
+  margin-right: 25px;
+  color: white;
+}
+.threeselects {
+  width: 216px;
+  margin-right: 22px;
+}
+::v-deep .vue-treeselect__single-value {
+  color: white;
+}
+
+/* 划过效果 */
+::v-deep li:hover {
+  /* color: #fff; */
+  background-color: #003156;
+  background-image: url("../../../assets/images/选中.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+::v-deep .single {
+  width: 82px;
+  height: 36px;
+  background: #196299;
+  border: none;
+  margin-left: 5px;
+  color: white;
+  font-size: 14px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  border-radius: 8px 0px 0px 8px;
+}
+::v-deep .singles {
+  width: 82px;
+  height: 36px;
+  background: #196299;
+  border: none;
+  margin-left: 5px;
+  color: white;
+  font-size: 14px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  /* border-radius: 8px 0px 0px 8px; */
+}
+.single:focus{
+  outline: none;
+}
+.singles:focus{
+  outline: none;
+}
+.allFlv:focus{
+  outline: none;
+}
+.bg{
+  background: #006cff;
+}
 </style>