解决冲突

ZZJ

2021-10-13 4d010f1940db29c1effc0f9bd6a975436c1183d9

解决冲突

 src/components/player/wfs/controller/buffer-controller.js

@@ -2,17 +2,12 @@
 * Buffer Controller
 */
/* eslint-disable */
import Event from '../events';
import EventHandler from '../event-handler';
import Event from "../events";
import EventHandler from "../event-handler";

class BufferController extends EventHandler {
  constructor(wfs) {
    super(
      wfs,
      Event.MEDIA_ATTACHING,
      Event.BUFFER_APPENDING,
      Event.BUFFER_RESET
    );
    super(wfs, Event.MEDIA_ATTACHING, Event.BUFFER_APPENDING, Event.BUFFER_RESET);

    this.mediaSource = null;
    this.media = null;
@@ -27,10 +22,10 @@
    this.onsbue = this.onSBUpdateEnd.bind(this);

    this.browserType = 0;
    if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
    if (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1) {
      this.browserType = 1;
    }
    this.mediaType = 'H264Raw';
    this.mediaType = "H264Raw";

    this.websocketName = undefined;
    this.channelName = undefined;
@@ -54,9 +49,9 @@
      this.onmso = this.onMediaSourceOpen.bind(this);
      this.onmse = this.onMediaSourceEnded.bind(this);
      this.onmsc = this.onMediaSourceClose.bind(this);
      ms.addEventListener('sourceopen', this.onmso);
      ms.addEventListener('sourceended', this.onmse);
      ms.addEventListener('sourceclose', this.onmsc);
      ms.addEventListener("sourceopen", this.onmso);
      ms.addEventListener("sourceended", this.onmse);
      ms.addEventListener("sourceclose", this.onmsc);
      // link video and media Source
      media.src = URL.createObjectURL(ms);
    }
@@ -78,7 +73,7 @@
  }

  onMediaSourceEnded() {
    console.log('media source ended');
    console.log("media source ended");
  }

  onSBUpdateEnd(event) {
@@ -99,10 +94,10 @@
    let mediaSource = this.mediaSource;
    if (mediaSource) {
      // once received, don't listen anymore to sourceopen event
      mediaSource.removeEventListener('sourceopen', this.onmso);
      mediaSource.removeEventListener("sourceopen", this.onmso);
    }

    if (this.mediaType === 'FMp4') {
    if (this.mediaType === "FMp4") {
      this.checkPendingTracks();
    }

@@ -116,13 +111,13 @@
  }

  checkPendingTracks() {
    this.createSourceBuffers({ tracks: 'video', mimeType: '' });
    this.createSourceBuffers({ tracks: "video", mimeType: "" });
    this.pendingTracks = {};
  }

  onBufferReset(data) {
    if (this.mediaType === 'H264Raw') {
      this.createSourceBuffers({ tracks: 'video', mimeType: data.mimeType });
    if (this.mediaType === "H264Raw") {
      this.createSourceBuffers({ tracks: "video", mimeType: data.mimeType });
    }
  }

@@ -130,15 +125,15 @@
    var sourceBuffer = this.sourceBuffer,
      mediaSource = this.mediaSource;
    let mimeType;
    if (tracks.mimeType === '') {
      mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
    if (tracks.mimeType === "") {
      mimeType = "video/mp4;codecs=avc1.420028"; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
    } else {
      mimeType = 'video/mp4;codecs=' + tracks.mimeType;
      mimeType = "video/mp4;codecs=" + tracks.mimeType;
    }

    try {
      let sb = (sourceBuffer['video'] = mediaSource.addSourceBuffer(mimeType));
      sb.addEventListener('updateend', this.onsbue);
      let sb = (sourceBuffer["video"] = mediaSource.addSourceBuffer(mimeType));
      sb.addEventListener("updateend", this.onsbue);
      track.buffer = sb;
    } catch (err) {}
    this.wfs.trigger(Event.BUFFER_CREATED, { tracks: tracks });
@@ -161,6 +156,8 @@
        return;
      }

      wfs.playerStatus = 1;

      if (segments && segments.length) {
        var segment = segments.shift();
        try {

 src/components/player/wfs/wfs.js

@@ -2,28 +2,26 @@
 * WFS interface, Jeff Yang 2016.10
 */
/* eslint-disable */
'use strict';
"use strict";

import Event from './events';
import FlowController from './controller/flow-controller';
import BufferController from './controller/buffer-controller';
import EventEmitter from 'events';
import Event from "./events";
import FlowController from "./controller/flow-controller";
import BufferController from "./controller/buffer-controller";
import EventEmitter from "events";
// import XhrLoader from './utils/xhr-loader';
import WebsocketLoader from './loader/websocket-loader';
import WebsocketLoader from "./loader/websocket-loader";

class Wfs {
  static get version() {
    // replaced with browserify-versionify transform
    return '__VERSION__' + 'v.0.0.0.1';
    return "__VERSION__" + "v.0.0.0.1";
  }

  static isSupported() {
    return (
      window.MediaSource &&
      typeof window.MediaSource.isTypeSupported === 'function' &&
      window.MediaSource.isTypeSupported(
        'video/mp4; codecs="avc1.42c01f,mp4a.40.2"'
      )
      typeof window.MediaSource.isTypeSupported === "function" &&
      window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"')
    );
  }

@@ -86,6 +84,7 @@
    this.websocketLoader = new WebsocketLoader(this);
    this.mediaType = undefined;
    this.cameraInfo = {};
    this.playerStatus = -1;
  }

  destroy() {
@@ -95,13 +94,7 @@
    this.websocketLoader.destroy();
  }

  attachMedia(
    media,
    channelName = 'chX',
    mediaType = 'H264Raw',
    websocketName = 'ws',
    cameraInfo = {}
  ) {
  attachMedia(media, channelName = "chX", mediaType = "H264Raw", websocketName = "ws", cameraInfo = {}) {
    // 'H264Raw' 'FMp4'
    this.mediaType = mediaType;
    this.media = media;

 src/pages/changchunTrack/components/VideoItem.vue

@@ -6,10 +6,7 @@
    @mouseenter.stop.prevent="videoMouseEnter($event)"
    @mouseleave="videoMouseLeave($event)"
  >
    <div
      class="video-box-top"
      v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
    >
    <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
      <b>{{ videoItem.name }}</b>
      <span @click="deleteVideo(videoIndex)">×</span>
    </div>
@@ -35,23 +32,34 @@
        :isRunning="videoItem.isRunning"
        :isGb="videoItem.cameraType === 1"
        :showArea="showArea"
        :hasPoster="hasPoster"
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
        v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
      ></camera-player>

      <video
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
        :src="videoItem.rtsp"
        autoplay="autoplay"
        poster="/images/cameraVideo/video-poster.png"
        controls
      >您的浏览器不支持 video 标签。</video>
      <camera-player
        :cameraName="qsVideoItem0.name"
        :cameraID="qsVideoItem0.id"
        :rtspUrl="qsVideoItem0.rtsp"
        :isRunning="qsVideoItem0.isRunning"
        :isGb="qsVideoItem0.cameraType === 1"
        v-show="quietSwitch && workPlayer === 0"
        ref="qsPlayer0"
        v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
      ></camera-player>
      <camera-player
        :cameraName="qsVideoItem1.name"
        :cameraID="qsVideoItem1.id"
        :rtspUrl="qsVideoItem1.rtsp"
        :isRunning="qsVideoItem1.isRunning"
        :isGb="qsVideoItem1.cameraType === 1"
        v-show="quietSwitch && workPlayer === 1"
        ref="qsPlayer1"
        v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
      ></camera-player>
    </div>
  </div>
</template>

<script>
import { ptzControl } from "@/api/camera"
import { ptzControl } from "@/api/camera";

import CameraPlayer from "@/components/player";

@@ -67,42 +75,92 @@
    videoIndex: null,
    starW: {
      type: String,
      default: ''
      default: ""
    },
    starH:{
    starH: {
      type: String,
      default: ''
      default: ""
    },
    videoItem: {
      type: [Object, String],
      default: null
    },
    showArea: Boolean,
    hasPoster: Boolean,
    showArea: {
      type: Boolean,
      default: false
    },
    quietSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: '',
      timer: "",
      mouseDown: false,
      videoDataItem: null
    }
      workPlayer: -1,
      qsVideoItem0: null,
      qsVideoItem1: null,
      checkStatusTimer: 0
    };
  },
  computed: {
    vWidth() {
      if (this.starW!=0) {
        return this.starW
       
      if (this.starW != 0) {
        return this.starW;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
    },
    

    vHeight() {
      if (this.starH!=0) {
        return this.starH
      if (this.starH != 0) {
        return this.starH;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
    }
  },
  watch: {
    videoItem: function(newVal, oldVal) {
      if (!this.quietSwitch) {
        return;
      }

      console.log("new rtsp:", newVal);
      console.log("this.workPlayer:", this.workPlayer);
      // 首次
      if (this.workPlayer < 0) {
        this.workPlayer = 0;
        this.qsVideoItem0 = newVal;
        return;
      }

      let _this = this;
      clearInterval(_this.checkStatusTimer);

      if (_this.workPlayer == 0) {
        _this.qsVideoItem1 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
          if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
            _this.workPlayer = 1;
            _this.qsVideoItem0 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }

      if (_this.workPlayer == 1) {
        _this.qsVideoItem0 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
            _this.workPlayer = 0;
            _this.qsVideoItem1 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }
    }
  },
  methods: {
@@ -113,42 +171,40 @@
      // 当前只支持国标摄像机
      // console.log(type, 'ptCtrl')
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      this.mouseDown = true;
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: type
      }
      ptzControl(params).then(rsp => {
      };
      ptzControl(params).then((rsp) => {
        // console.log(rsp)
      })
      let that = this
      });
      let that = this;
      this.timer = setTimeout(() => {
        that.ptStop()
      }, 5000)
        that.ptStop();
      }, 5000);
    },
    ptStop() {
      // 当前只支持国标摄像机
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: "stop"
      }
      };
      if (this.mouseDown) {
        this.mouseDown = false
        ptzControl(params).then(rsp => {
        this.mouseDown = false;
        ptzControl(params).then((rsp) => {
          // console.log(rsp)
        })
        });
      }
    },
    deleteVideo(index) {
      let video = this.TreeDataPool.videoArr;
      video[index].isPlaying = false;
      this.TreeDataPool.setVideoArr(index, undefined, this);
    },
    videoMouseEnter(e) {

 src/pages/changchunTrack/index/Video.vue

@@ -3,44 +3,13 @@
    <div class="monitoring-right" ref="videoRight">
      <div class="main-top">
        <div class="monitoring-video" ref="monitorVideo">
          <!-- <div class="monitoring-video-guid">
            <span
              :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
              @click="setGuid(1)"
            ></span>
            <span
              :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
              @click="setGuid(2)"
            ></span>
            <span
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'隐藏区域':'查看区域'}`" placement="bottom" popper-class="atooltip">
              <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
            </el-tooltip>
          </div> -->
          <div class="fixedRatioBox">
            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 5"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                v-show="!showBackup"
                class="activeItem"
              ></VideoItem>
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="BackupVideo"
                :showArea="showArea"
                v-show="showBackup"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <VideoItem
@@ -49,21 +18,17 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 7"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(74.99% - 4px)`"
                :starH="`calc(74.99% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>

@@ -73,15 +38,11 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 12"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
              <div style="width: 100%; height: 25%">
                <VideoItem
                  v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
@@ -91,7 +52,6 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -104,7 +64,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -113,19 +72,8 @@
                :starW="`calc(50% - 4px)`"
                :starH="`calc(50% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                :hasPoster="false"
                quietSwitch
              ></VideoItem>
              <!-- <VideoItem
                :videoGuid="guid"
                :starW="`calc(50% - 4px)`"
                :starH="`calc(50% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                class="activeItem"
                v-if="!showSub"
                
              ></VideoItem> -->

              <div style="width: 25%; height: 50%; float: left">
                <VideoItem
@@ -136,7 +84,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -149,16 +96,12 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 16"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
              <div style="width: 100%; height: 20%">
                <!-- :class="[
                    TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -187,7 +129,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -196,7 +137,7 @@
                :starW="`calc(60% - 4px)`"
                :starH="`calc(60% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -221,7 +161,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -235,42 +174,34 @@

<script>
import VideoItem from "../components/VideoItem";
import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
import { showAllCameras } from "@/api/trackCamera";

export default {
  name: "Video",
  components: {
    VideoItem,
    VideoItem
  },
  computed: {
    nextIndex() {
      if (this.centerIndex == this.list2TakeTurn.length - 1) {
        return 0;
      }
      return this.centerIndex + 1;
    }
  },
  data() {
    return {
      guid: 3,
      center: "",
      defaultHeight: 432,
      defaultWidth: 600,
      track: false,
      traceCache: {},
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
        location.host
      }/track`,
      websocket: null,
      visibilityState: true,
      showArea: false,
      videoNum2Play: 0,
      allVideoNum: 5,
      centerVideo: null,
      BackupVideo: null,
      list2TakeTurn: [],
      timer: null,
      reqTimer: null,
      centerIndex: 0,
      showBackup: false,
      centerIndex: 0
    };
  },
  created() {
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
      ? Number(sessionStorage.activeIndex)
      : this.TreeDataPool.activeVideoIndex;
    this.getActiveIndex();
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
  },
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.resizeMonitorTask);
      //this.getRightWidth();
      this.resizeMonitorTask();
    });
    this.getCenter();
    this.blackAngWhite();
    this.VideoPhotoData.queryTagList();
    // let
    // this.TreeDataPool.getAllChildrenNodes()
    showAllCameras()
      .then((res) => {
        this.videoNum2Play = res.data.length;
        this.setAllVideoNum(res.data.length);
        res.data.forEach((info, i) => {
          let camera = this.TreeDataPool.getCameraInfoById(info.id);
          this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    window.clearInterval(this.trackTimer);
    if (this.websocket) {
      this.websocket.close();
    }
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      const cameras = this.filterNodes(newArry);
    "TreeDataPool.videoArr"(value) {
      this.getActiveIndex();
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getRightWidth();
    },
    "TreeDataPool.selectedNodes.length"(value) {
      this.getActiveIndex();
      this.list2TakeTurn = [];
      this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
      this.TreeDataPool.selectedNodes.forEach((id, i) => {
        let camera = this.TreeDataPool.getCameraInfoById(id);
        this.TreeDataPool.setVideoArr(i, camera, this);
      this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
      this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);

        if (camera.status >= 1) {
          this.list2TakeTurn.push(camera);
        }
      });
    },
      // this.TreeDataPool.selectedNodes.forEach((id, i) => {
      //   let camera = this.TreeDataPool.getCameraInfoById(id);
      //   this.TreeDataPool.setVideoArr(i, camera, this);

      //   if (camera.status >= 1) {
      //     this.list2TakeTurn.push(camera);
      //   }
      // });

      this.centerVideo = { ...this.TreeDataPool.selectedNode };
    }
  },
  methods: {
    setAllVideoNum(videoCount) {
      if (videoCount <= 5) {
        this.guid = 3;
        this.allVideoNum = 5;
      } else if (videoCount <= 7) {
        this.guid = 4;
        this.allVideoNum = 7;
      } else if (videoCount <= 12) {
        this.guid = 4;
        this.allVideoNum = 12;
      } else if (videoCount <= 16) {
        this.guid = 5;
        this.allVideoNum = 16;
      } else {
        this.guid = 5;
        this.allVideoNum = 16;
      }
    },
    isSame(arr1, arr2) {
      let _arr1 = [];
      arr1.forEach((item) => {
@@ -360,35 +293,21 @@
      }
      return true;
    },
    centerPlay(typ) {
    centerPlay() {
      if (this.list2TakeTurn.length == 1) {
        this.centerVideo = this.list2TakeTurn[0];
        this.centerVideo = { ...this.list2TakeTurn[0] };
        return;
      }
      let that = this;
      // if () {

      // }
      if (typ == 'change') {
        this.showBackup = true;
      }
      that.centerVideo = that.list2TakeTurn[that.centerIndex];
      that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
      that.centerIndex++;
      if (that.centerIndex == that.list2TakeTurn.length) {
        that.centerIndex = 0;
      }
      if (typ == 'change') {
        setTimeout(() => {
          this.showBackup = false;
          that.BackupVideo = that.centerVideo;
        }, 2000);
      }else{
        that.BackupVideo = that.centerVideo;
      }

      clearInterval(this.timer);
      this.timer = setInterval(() => {
        that.centerVideo = that.list2TakeTurn[that.centerIndex];
        that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
        that.centerIndex++;
        if (that.centerIndex == that.list2TakeTurn.length) {
          that.centerIndex = 0;
@@ -413,143 +332,10 @@
          if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
            this.list2TakeTurn = [...newArr1];
            this.centerIndex = 0;
            this.centerPlay('change');
            this.centerPlay("change");
          }
        });
      }, 2500);
    },
    initTrackWebsocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.websocket = new WebSocket(this.tracePubUrl);
        // 监听socket消息
        this.websocket.onopen = this.websocketonopen;
        this.websocket.onmessage = this.recvieTrackMessage;
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocket.send("sub");
    },
    tracking() {
      getCameraPlayList().then((data) => {
        if (data && data.length) {
          data.forEach((ins) => {
            let newCamera = this.TreeDataPool.getCameraInfoById(
              ins.NewCameraId
            );
            if (!newCamera) {
              console.log("未查找到摄像机：", ins.NewCameraId);
              return;
            }
            if (ins.IsNew) {
              this.newPlayerInViewBox(newCamera);
            } else {
              this.replacePlayer(newCamera, ins.OldCameraId);
            }
          });
        }
      });
    },
    recvieTrackMessage(e) {
      let dataJson = JSON.parse(e.data);
      let cache = this.traceCache;
      let camera = dataJson.camera;
      let person = dataJson.person;
      let create = false;

      // 如果是已经在播放的摄像机, 直接返回
      if (cache[camera]) {
        cache[camera][person] = 10;
        return;
      }

      cache[camera] = {};
      cache[camera][person] = 10;

      // 查询播放该人的上一个摄像机
      for (var cam in cache) {
        if (cam === camera) {
          continue;
        }

        if (cache[cam][person]) {
          // 找到上一个摄像机, 判断摄像机里是否还有其他人, 有:新开播放器 没有:切换
          console.log("last camera:", cam, Object.keys(cache[cam]).length);
          if (Object.keys(cache[cam]).length > 2) {
            delete cache[cam][person];
            this.newPlayerInViewBox(camera);
            return;
          } else {
            this.replacePlayer(camera, cam);
            delete cache[cam];
            return;
          }
        }
      }

      // 未发现播放记录
      this.newPlayerInViewBox(camera);
    },
    newPlayerInViewBox(id) {
      // 新增播放窗口
      let camera = this.TreeDataPool.getCameraInfoById(id);
      let emptyIndex = -1;
      let exist = false;
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
          if (emptyIndex === -1) {
            emptyIndex = i;
          }
        } else {
          if (this.TreeDataPool.videoArr[i].id === camera.id) {
            exist = true;
          }
        }
      }
      if (!exist && emptyIndex !== -1) {
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
      }
    },
    replacePlayer(id, oldCameraId) {
      let camera = this.TreeDataPool.getCameraInfoById(id);
      // 替换播放器
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
            this.TreeDataPool.setVideoArr(i, camera, this);
            return true;
          }
        }
      }

      return false;
    },
    closePlayer(id) {
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === id) {
            this.TreeDataPool.setVideoArr(i, undefined, this);
            return true;
          }
        }
      }
    },
    visibilitychange() {
      switch (document.visibilityState) {
@@ -561,198 +347,27 @@
          break;
      }
    },
    blackAngWhite() {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectBlacks.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
        }
      }
      if (this.VideoPhotoData.selectWhites.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectWhites.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
        }
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight() {
      let h = this.$refs.monitorVideo.offsetHeight;
      // this.$refs.monitorTask.style.height = h + "px";
    },
    resizeMonitorTask() {
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      // this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
    },
    filterNodes(selectArry) {
      let nodes = [];
      selectArry.forEach((i) => {
        if (i && nodes.indexOf(i.id) < 0) {
          nodes.push(i.id);
        }
      });
      return nodes;
    },
    videoItemClick(index) {
      this.TreeDataPool.activeVideoIndex = index;
      this.TreeDataPool.activeForceChoose = true;
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item);
    },
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },
    resizeHeight(h) {
      this.defaultHeight = h;
    },
    saveAddBase(item, index) {
      if (
        this.VideoPhotoData.selectBlacks.length === 0 &&
        this.VideoPhotoData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning",
        });
        return;
      }
      let res = this.VideoPhotoData.addBase(item);
      res.then((data) => {
        console.log("then", data);
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error",
          });
        }
        this.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    getActiveIndex() {
      this.TreeDataPool.videoArr.length = this.allVideoNum;
      let nullVideoIndex = "";
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
        if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
          nullVideoIndex = i;
        } else {
          nullVideoIndex = "";
          break;
        }
      }
      if (
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <
          this.TreeDataPool.videoArr.length - 1
      ) {
        return this.TreeDataPool.activeVideoIndex;
      if (nullVideoIndex === "") {
        this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
      } else {
        if (nullVideoIndex === "") {
          this.TreeDataPool.activeVideoIndex =
            this.TreeDataPool.videoArr.length - 1;
        } else {
          this.TreeDataPool.activeVideoIndex = nullVideoIndex;
        }
        this.TreeDataPool.activeVideoIndex = nullVideoIndex;
      }
    },
    setGuid(value) {
      clearTimeout(this.trackTimer);
      if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
        // eslint-disable-next-line
        for (
          let i = this.TreeDataPool.activeVideoIndex - 1;
          i < this.TreeDataPool.videoArr.length;
          i++
        ) {
          // eslint-disable-next-line
          if (
            this.TreeDataPool.videoArr[i] &&
            this.TreeDataPool.videoArr[i]["isPlaying"]
          ) {
            this.TreeDataPool.videoArr[i]["isPlaying"] = false;
          }
        }
      }
      this.guid = value;
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
    },
    toggleShowArea() {
      this.showArea = !this.showArea;
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.getRightWidth);
    // this.CardList.details = [];
    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
  },
  computed: {
    allVideoNum() {
      if (this.videoNum2Play <= 5) {
        this.guid = 3;
        return 5;
      }

      if (this.videoNum2Play <= 7) {
        this.guid = 4;
        return 7;
      } 
      
      if (this.videoNum2Play <= 12) {
        this.guid = 4;
        return 12;
      } 
      
      if (this.videoNum2Play <= 16) {
        this.guid = 5;
        return 16;
      }
              this.guid = 5;
        return 16;
    },
    nextIndex() {
      if (this.centerIndex == this.list2TakeTurn.length - 1) {
        return 0;
      }
      return this.centerIndex + 1;
    },
  },
    }
  }
};
</script>


 src/pages/settings/views/NetSettings.vue

@@ -130,7 +130,8 @@
            <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small">

                <el-select v-model="value" placeholder="请选择" size="small"

                :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -187,7 +188,7 @@
            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small">

                <el-select v-model="value" placeholder="请选择" size="small" :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -207,18 +208,18 @@
                <div class="p-title">前缀</div>

                <div style="display: flex; width: 100%">

                  <el-input

                    v-model="wifiForm.password"

                    v-model="ipv6Form.prefix"

                    placeholder

                    size="small"

                  ></el-input>



                  <div class="ad">

                    <i class="el-icon-remove-outline"></i>

                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>

                  </div>

                  <div class="ad">

                    <i class="el-icon-circle-plus-outline"></i>

                    <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>

                  </div>

                  <div class="ad"><i class="el-icon-refresh-left"></i></div>

                  <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>

                </div>

              </el-form-item>



@@ -285,38 +286,38 @@
        <div class="wire-detail" v-if="activePage == 2 && inWireDetail">

          <div class="title">网络设置</div>

          <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">

            <el-form-item  prop="name">

                <div class="p-title">网络名称</div>

            <el-form-item prop="name">

              <div class="p-title">网络名称</div>

              <div class="wifi-name">{{ "网络" + activeWireItem.index }}</div>

            </el-form-item>

            <el-form-item  prop="ifname">

                <div class="p-title">网卡</div>

            <el-form-item prop="ifname">

              <div class="p-title">网卡</div>

              <div class="wifi-name">{{ activeWireItem.name }}</div>

            </el-form-item>

            <el-form-item  prop="ip">

                <div class="p-title">IP</div>

            <el-form-item prop="ip">

              <div class="p-title">IP</div>

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item prop="subMask">

                <div class="p-title">子网掩码</div>

              <div class="p-title">子网掩码</div>

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>



            <el-form-item  prop="gateway">

                <div class="p-title">网关</div>

            <el-form-item prop="gateway">

              <div class="p-title">网关</div>

              <ip-input

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item  prop="dns">

                <div class="p-title">DNS</div>

            <el-form-item prop="dns">

              <div class="p-title">DNS</div>

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

@@ -431,6 +432,10 @@
    this.fetchWireList();

  },

  methods: {

    minusPrefix(){

      debugger

      this.ipv6Form.prefix

    },

    switchNetCard(item) {

      if (item.active) {

        upNetCard({ ifname: item.name }).then(

@@ -583,22 +588,28 @@
.all {

  width: 100%;

}

.wire{

  width: 460px;

  margin: 0 auto;

}

.wire-detail {

  width: 460px;

  margin: 0 auto;

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

  .ip-input-container {

          max-width: none !important;

          height: 32px;

          line-height: normal;

          box-sizing: border-box;

          // background-color: #f2f2f7;

          text-align: left;

          border-radius: 20px;

          border: 2px solid transparent;    display: flex;



        }

    max-width: none !important;

    height: 32px;

    line-height: normal;

    box-sizing: border-box;

    // background-color: #f2f2f7;

    text-align: left;

    border-radius: 20px;

    border: 2px solid transparent;

    display: flex;

  }

  .btns {

    display: flex;

    justify-content: space-between;

@@ -697,7 +708,9 @@
      font-size: 16px;

      line-height: 48px;

      color: #333333;

      font-weight: bold;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 10px;

    }

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

@@ -758,11 +771,10 @@
        background-color: #ffffff;

        border: 2px solid transparent;

        border-radius: 20px;

        height: 32px;

        height: 32px !important;

        padding: 0 15px;

        font-size: 14px;

        line-height: 32px;



        font-weight: bold;

      }

      .el-input__inner::placeholder {

@@ -834,7 +846,7 @@
      }

    }

    .wifi-detail {

      max-width: 600px;

      max-width: 454px;

      margin: 0 auto;

      transition: all 0.3s linear 0s;

      .general-box {

@@ -893,21 +905,12 @@
        margin-top: 0;

        display: flex;

        justify-content: space-between;

        margin-bottom: 20px;

        .left {

          background-color: rgba(240, 240, 240, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          border-radius: 10px;

        margin-bottom: 4px;

        .cancel {

          width: 218px;

        }

        .right {

          background-color: rgba(61, 104, 225, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          color: #fff;

          border-radius: 10px;

        .ok {

          width: 218px;

        }

      }

      .wifi-name {

@@ -922,13 +925,8 @@
      .ad {

        margin-top: 10px;

        height: 32px;

        /* margin: 4px 0px 4px 5px; */

        /* border-radius: 5px; */

        line-height: 31px;

        /* width: 27px; */

        text-align: center;

        font-size: 17px;

        /* font-weight: bold; */

        margin-left: 10px;

        cursor: pointer;

      }


 src/pages/settings/views/clusterManagement.vue

@@ -625,7 +625,7 @@
}

.cluster-guanli {

  margin: 0 auto;

  /* width: 760px; */

width: 760px; 
  padding: 0 10px;

  .btns {

    margin-top: 30px !important;


 src/pages/settings/views/generalSettings.vue

@@ -574,6 +574,9 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

 height: 24px !important;

}

  .general-center {

    height: 100%;

    width: 300px;

@@ -1148,9 +1151,7 @@
 color: #4E94FF;

}



.el-input__inner {

 height: 24px !important;

}







/* .el-tooltip__popper {


 src/pages/systemMonitor/index/App.vue

@@ -16,7 +16,11 @@
            <div class="subtitle">
              正在进行{{ algoProcessData.length }}个算法单元
            </div>
            <span class="iconfont icon" :style="activeTab == 0 ? {} :{color:'#fff'} ">&#xe741;</span>
            <span
              class="iconfont icon"
              :style="activeTab == 0 ? {} : { color: '#fff' }"
              >&#xe741;</span
            >
          </div>
          <div
            class="tab-item"
@@ -25,7 +29,11 @@
          >
            <div class="title">应用单元</div>
            <div class="subtitle">正在进行{{ 1 }}个应用单元</div>
            <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} ">&#xe744;</span>
            <span
              class="iconfont icon"
              :style="activeTab == 1 ? {} : { color: '#fff' }"
              >&#xe744;</span
            >
          </div>
        </div>
        <div class="form-title" v-if="activeTab == 0">
@@ -37,16 +45,16 @@
          <el-table
            :data="algoProcessData"
            style="width: 100%"
            
            :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
            stripe
            class="tableBox"
          >
            <el-table-column
              prop="desc"
              label="名称"
              width="180"
            ></el-table-column>
            <el-table-column label="名称" width="180">
              <template slot-scope="scope">
                <span class="iconfont icon">&#xe74d;</span>
                <span>{{ scope.row.desc }} </span>
              </template>
            </el-table-column>
            <el-table-column label="CPU" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.cpu.toFixed(2) }} %</span>
@@ -76,11 +84,7 @@
          <el-table
            :data="appProcessData"
            style="width: 100%"
            :header-cell-style="{
              background: '#F2F2F7',
              color: '#333333',
              height: '40px',
            }"
           :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
            stripe
            class="tableBox"
          >
@@ -102,7 +106,7 @@
        </div>
      </el-tab-pane>

      <el-tab-pane  name="top">
      <el-tab-pane name="top">
        <span slot="label">
          <span class="iconfont icon">&#xe743;</span>
          性能</span
@@ -119,7 +123,7 @@
              <div class="ax_default_pic color-cpu"></div>
              <div>
                <div class="ax_default_text">CPU</div>
              <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
                <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
              </div>
            </div>

@@ -131,8 +135,10 @@
              @click="setActiveChartItem('mem')"
            >
              <div class="ax_default_pic color-mem"></div>
              <div><div class="ax_default_text">内存</div>
              <div class="ax_default_subtext">{{ memUsedPercent }}%</div></div>
              <div>
                <div class="ax_default_text">内存</div>
                <div class="ax_default_subtext">{{ memUsedPercent }}%</div>
              </div>
            </div>

            <div
@@ -143,8 +149,10 @@
              @click="setActiveChartItem('gpu')"
            >
              <div class="ax_default_pic color-gpu"></div>
             <div> <div class="ax_default_text">算力</div>
              <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div></div>
              <div>
                <div class="ax_default_text">算力</div>
                <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div>
              </div>
            </div>

            <div
@@ -155,10 +163,12 @@
              @click="setActiveChartItem('net')"
            >
              <div class="ax_default_pic color-net"></div>
             <div> <div class="ax_default_text">网络</div>
              <div class="ax_default_subtext">
                {{ netSend | byteConver }} / {{ netRecive | byteConver }}
              </div></div>
              <div>
                <div class="ax_default_text">网络</div>
                <div class="ax_default_subtext">
                  {{ netSend | byteConver }} / {{ netRecive | byteConver }}
                </div>
              </div>
            </div>

            <div
@@ -171,10 +181,12 @@
              @click="setActiveChartItem('disk|' + k)"
            >
              <div class="ax_default_pic color-disk"></div>
              <div><div class="ax_default_text">磁盘 {{ k }}</div>
              <div class="ax_default_subtext">
                {{ v.info.total | byteConver }}
              </div></div>
              <div>
                <div class="ax_default_text">磁盘 {{ k }}</div>
                <div class="ax_default_subtext">
                  {{ v.info.total | byteConver }}
                </div>
              </div>
            </div>
          </div>

@@ -268,9 +280,14 @@
          <span class="iconfont icon">&#xe944;</span>
          服务</span
        >
        <el-table :data="vasystemServicesData">
        <el-table :data="vasystemServicesData"
        :header-cell-style="'color: #333333;height: 40px;font-size: 16px;'"
            stripe
            class="tableBox" 
        >
          <el-table-column label="名称" show-overflow-tooltip>
            <template slot-scope="scope">
                <span class="iconfont icon">&#xe74d;</span>
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
@@ -357,6 +374,7 @@
          left: "1%",
          right: "4%",
          bottom: "3%",

          containLabel: true,
          borderWidth: 2,
          borderColor: "#000",
@@ -470,8 +488,7 @@
      showProcesses()
        .then((rsp) => {
          if (rsp && rsp.success) {
            if (rsp.data.algos)
              this.algoProcessData = [...rsp.data.algos, ...rsp.data.algos];
            if (rsp.data.algos) this.algoProcessData = rsp.data.algos;

            if (rsp.data.apps) this.appProcessData = rsp.data.apps;
          }
@@ -708,7 +725,6 @@
    color: #fff;
  }
  .el-table th.el-table__cell > .cell {
   
    text-align: center;
  }
  .tableBox {
@@ -732,6 +748,7 @@
      padding: 0 !important;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .el-tabs--top {
@@ -812,17 +829,17 @@
        margin-bottom: 4px;
      }
      .subtitle {
           font-size: 12px;
    line-height: 17px;
    z-index: 99;
    position: absolute;
        font-size: 12px;
        line-height: 17px;
        z-index: 99;
        position: absolute;
      }
      .icon{
    color: #6da3f3;
    font-size: 60px;
    position: absolute;
    bottom: 4px;
    right: 4px;
      .icon {
        color: #6da3f3;
        font-size: 60px;
        position: absolute;
        bottom: 4px;
        right: 4px;
      }
    }
    .tab-item-active {
@@ -894,8 +911,7 @@
  }

  .column-right {
    //overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
    overflow-x: auto;
  }

@@ -906,8 +922,8 @@
  }

  .resize-bar {
       width: 285px;
height: 600px;
    width: 285px;
    // height: 600px;
  }

  /* 拖拽线 */
@@ -922,7 +938,7 @@
  }

  .ax_default {
   width: 270px;
    width: 270px;
    height: 70px;
    padding: 10px;
    font-size: 14px;
@@ -932,15 +948,19 @@
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    color: #333333;
  }

  .ax_default:hover {
    color: #333333;
    background: #f8f8ff;
  }
  .selected {
    // background: inherit;
    // background-color: #cde8ff;
    // border: none;
    // border-radius: 8px;
      background: inherit;
    background-color: #4E94FF;
    background: inherit;
    background-color: #4e94ff;
    border: none;
    border-radius: 8px;
    color: #fff;
@@ -950,7 +970,7 @@
    // position: absolute;
    border-width: 0px;
    width: 66px;
       height: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 153, 0, 1);
    background-color: #fff;
@@ -985,15 +1005,17 @@

  .ax_default_text {
    position: relative;
    text-align: left;
  font-size: 16px;
    text-align: right;

    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
  }

  .ax_default_subtext {
    font-size: 13px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
  }

  .ax_default_label {