websocket连接案例+汽车过闸动画案例

<template>
  <div class="content" :class="{ screenfull: isScreenfull }">
    <el-container class="content basesearch-wrap" ref="content">
      <!--table 区域-->
      <el-main style="overflow: hidden" ref="mains" class="myMain">
        <ul
          v-show="visibleMenu"
          :style="{ left: left + 'px', top: top + 'px' }"
          class="contextmenu"
        >
          <button
            :disabled="status != 'Closed'"
            @click="closeTags('openChannel')"
            class="openChannel"
            v-if="channelManagement"
          >
            开通道
          </button>
          <button
            :disabled="status != 'Idle'"
            @click="closeTags('closeChannel')"
            class="closeChannel"
            v-if="channelManagement"
          >
            关通道
          </button>
          <button
            :disabled="status == 'Closed'"
            @click="closeTags('resetChannel')"
            class="resetChannel"
            v-if="channelManagement"
          >
            复位
          </button>
          <button
            :disabled="!isAlarm"
            @click="closeTags('closeAlarm')"
            class="closeAlarm"
            v-if="channelManagement"
          >
            关闭报警
          </button>
          <button
            @click="closeTags('openRail')"
            class="openRail"
            v-if="channelManagement"
          >
            抬栏杆
          </button>
          <!-- <button
            :disabled="channelState"
            @click="closeTags('downRail')"
            class="downRail"
            v-if="channelManagement"
          >
            落路障
          </button> -->
          <button
            :disabled="channelState"
            @click="closeTags('emergencyManagement')"
            class="emergencyManagement"
            v-if="emergencyManagement"
          >
            应急管理
          </button>
        </ul>
        <el-row v-if="isShow" class="row">
          <el-col
            :span="Animation.length == 0 ? 0 : 7"
            style="z-index: 1"
            class="col"
            ><div
              class="myDiv"
              v-for="(item, index) in Animation"
              :key="index"
              :style="divHeight"
              @contextmenu.prevent="openMenu($event, item)"
            >
              <h2 class="myTitle">{{ item.LED._Info }}</h2>
              <div class="channel">
                {{ item._ChannelName }}
              </div>
              <!-- 报警器动画 -->
              <img
                :src="baojingGif"
                :style="tabelHeight < 997 ? 'bottom:39%' : 'bottom:33%'"
                class="baojingGif"
                alt=""
                v-show="item.Alarm._Status == 'On'"
              />
              <img
                :src="grayImg"
                :style="tabelHeight < 997 ? 'bottom:39%' : 'bottom:33%'"
                class="baojingGif"
                alt=""
                v-show="item.Alarm._Status == 'Off'"
              />
              <img
                :src="carImg"
                alt=""
                :class="[
                  { carImg: true },
                  {
                    'car-stop':
                      item._Status == 'Idle' ||
                      item._Status == 'Closed' ||
                      item._Status == 'Null',
                  },
                  {
                    'car-leving': item._Status == 'Leaving',
                  },
                  {
                    'car-in':
                      item._Status == 'Gathering' || item._Status == 'Entering',
                  },
                ]"
              />
              <!-- 红绿灯动画 -->
              <img
                :src="greenImg"
                alt=""
                class="lightImg"
                v-show="item.TrafficLight._Status == 'Green'"
              />
              <img
                :src="redImg"
                alt=""
                class="lightImg"
                v-show="item.TrafficLight._Status == 'Red'"
              />

              <img :src="pillarImg" alt="" class="pillarImg" />
              <!-- 栏杆动画 -->
              <img
                :src="railImg"
                alt=""
                :style="tabelHeight < 854 ? 'bottom:43%' : 'bottom:41%'"
                :class="[
                  { railImg: true },
                  { 'open-rail': item.Parapet._Status == 'Up' },
                  {
                    'close-rail':
                      item.Parapet._Status == 'Down' ||
                      item.Parapet._Status == 'Downing',
                  },
                ]"
              />
              <img :src="roadImg" alt="" class="roadImg" />
            </div>
          </el-col>
          <el-col
            :span="Animation.length == 0 ? 24 : 17"
            class="myCol"
            :style="{ height: tabelHeight + 'px' }"
          >
            <el-row :style="{ height: tabelHeight / 2 + 'px' }">
              <div style="height: 30px" class="titel1">
                正常数据
                <!-- <div class="outPut">
                  <c-excel-export
                    :tableData="tableData"
                    ref="export"
                    :tHeader="tHeader"
                    :filterVal="filterVal"
                    @getAllData="getAllData"
                    filename="正常数据"
                    style="margin: 0 10px"
                  ></c-excel-export>
                </div> -->
              </div>
              <c-tabel-totalpass
                @showScreenfull="showScreenfull"
                :isOrder="true"
                :isSuccess="true"
                type="success"
                :tabelData="tableData"
                :dataType="dataType"
                :scrollHeight="tabelHeight / 2 - 30"
                @changePage="changePage"
              >
              </c-tabel-totalpass>
            </el-row>

            <el-row :style="{ height: tabelHeight / 2 + 'px' }">
              <div style="height: 30px" class="titel1">异常数据</div>
              <c-tabel-totalpass
                :isOrder="true"
                :isSuccess="false"
                :tabelData="errTableData"
                :dataType="dataType"
                :scrollHeight="tabelHeight / 2 - 30"
                @changePage="changePage"
              >
              </c-tabel-totalpass>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
      <el-dialog
        title="应急管理"
        :visible.sync="EmformDialogVisible"
        class="c-control-sdmin-dialog"
        :modal-append-to-body="false"
        width="30%"
        center
        @close="EmClose"
      >
        <el-form :model="Emform" ref="Emform">
          <el-row>
            <!-- <el-col :span="24"
              ><el-form-item
                label="路障机:"
                label-width="100px"
                style="margin-top: 5px; font-weight: 600"
              >
                <el-switch
                  style="display: block; margin-top: 6px"
                  v-model="Emform.barricade"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="关闭"
                  inactive-text="开启"
                >
                </el-switch>
              </el-form-item>
            </el-col> -->
            <el-col :span="24"
              ><el-form-item
                label="地磅:"
                label-width="100px"
                style="margin-top: 5px; font-weight: 600"
              >
                <el-switch
                  style="display: block; margin-top: 6px"
                  v-model="Emform.loadometer"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="关闭"
                  inactive-text="开启"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24"
              ><el-form-item
                label="红外对射:"
                label-width="100px"
                style="margin-top: 5px; font-weight: 600"
              >
                <el-switch
                  style="display: block; margin-top: 6px"
                  v-model="Emform.fr"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="关闭"
                  inactive-text="开启"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="EmformDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="EmformSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        ref="choseChannel"
        title="通道选择"
        :visible.sync="choseChannelDialogVisible"
        style="margin-top: 5%"
        :close-on-click-modal="false"
        width="40%"
        :show-close="false"
        center
        :append-to-body="true"
        @opened="dialogOpen"
      >
        <el-form :model="ccForm" ref="ccform" v-loading="loading">
          <el-row>
            <el-col :span="24" v-if="channelOptions.code == 200"
              ><el-form-item
                label="通道名称:"
                label-width="100px"
                style="margin-top: 5px"
              >
                <!-- <el-checkbox-group v-model="ccForm.checkedCities" :min="1">
                  <el-checkbox
                    v-for="item in channelOptions.data"
                    :label="item.channelNo"
                    :key="item.channelNo"
                    >{{ item.channelName }}</el-checkbox
                  >
                </el-checkbox-group> -->
                <el-checkbox-group
                  v-model="ccForm.checkedCities"
                  :min="1"
                  :max="6"
                >
                  <el-checkbox
                    v-for="item in channelOptions.data"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center; padding: 15px" v-else>
              <span style="color: red">{{ channelTipsTitle }}</span>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="ccFormSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
/*引入组件*/
import CTabelTotalpass from "@/common/componemts/c-tabel-totalPass";
import screenfull from "screenfull";
import {
  history,
  channels,
  getUserIp,
  getSysChannels,
  openRail,
  getGateHisInfos,
  operaChannel,
  getChannelsByIp,
} from "@/api/cloudcard.js";
export default {
  name: "totalPass",
  props: {},
  data() {
    return {
      loading: true,
      left: 0,
      top: 0, //鼠标右键元素定位
      carImg: require("@/assets/car/car.png"),
      baojingGif: require("@/assets/car/baojing.gif"),
      grayImg: require("@/assets/car/gray_01.png"),
      greenImg: require("@/assets/car/green.png"),
      redImg: require("@/assets/car/red.png"),
      roadImg: require("@/assets/car/road.png"),
      pillarImg: require("@/assets/car/pillar_01.png"),
      railImg: require("@/assets/car/rail_02.png"),
      visibleMenu: false,
      emergencyManagement: false,
      channelManagement: false,
      isAlarm: false,
      status: "Idle",
      look: false,
      EmformDialogVisible: false,
      choseChannelDialogVisible: false,
      channelOptions: [],
      webStatus: "等待连接",
      channelTipsTitle: "",
      isShow: true,
      ccForm: {
        checkedCities: [],
      },
      websock: null,
      tabelHeight: 500,
      tabelWidth: 700,
      Emform: { barricade: true, loadometer: true, fr: true },
      channelNo: null, //通道索引
      channelState: false, //通道状态
      Animation: [], //测试过车动画
      dataType: [
        {
          id: 1,
          title: "通道编号",
          key: "channelNo",
          width: "120",
          sortable: false,
        },
        {
          id: 4513241,
          title: "区域编号",
          key: "areaId",
          width: "120",
          sortable: false,
        },
        // {
        //   id: 123123,
        //   title: "通道名称",
        //   key: "channelName",
        //   width: "150",
        //   sortable: false,
        // },
        {
          id: 4,
          title: "车牌号",
          key: "carNo",
          width: "120",
          sortable: false,
        },
        // {
        //   id: 12311123,
        //   title: "进出区类型",
        //   key: "inoutType",
        //   width: "",
        //   sortable: false,
        // },
        {
          id: 98713,
          title: "放行结果",
          key: "opHint",
          width: "",
          sortable: false,
        },
        {
          id: 981713,
          title: "放行提示",
          key: "LedTips",
          width: "",
          sortable: false,
        },
        {
          id: 212514,
          title: "放行时间",
          key: "intTime",
          width: "160",
          sortable: false,
        },
      ], //tabel映射数据
      tableData: [], //正常数据
      errTableData: [], //异常数据
      isScreenfull: false,
    };
  },
  computed: {
    //vuex State 数据源
    ...mapState(["winHeight", "winWidth", "areaList"]),
    /*导出电子表格表头数据*/
    divHeight() {
      return { height: this.tabelHeight / 6 + "px" };
    },
    tHeader() {
      let names = [];
      this.dataType.forEach((item) => {
        names.push(item.title);
      });
      return names;
    },
    /*导出电子表格 对应字段*/
    filterVal() {
      let names = [];
      this.dataType.forEach((item) => {
        names.push(item.key);
      });
      return names;
    },
  },
  watch: {
    visibleMenu(value) {
      if (value) {
        //如果是打开
        window.addEventListener("click", this.closeMenu);
      } else {
        //如果是关闭
        window.removeEventListener("click", this.closeMenu);
      }
    },
    winHeight: {
      //监听窗口变化 计算tabel高度
      handler() {
        this.$nextTick(() => {
          this.tabelHeight = this.$refs.mains.$el.offsetHeight;
          console.log(this.tabelHeight);
          //console.log(this.tabelHeight < 854);
        });
      },
      immediate: true,
    },
    winWidth: {
      handler() {
        this.$nextTick(() => {
          this.tabelWidth = this.$refs.mains.$el.offsetWidth;
          //console.log(this.tabelWidth);
        });
      },
      immediate: true,
    },
  },
  //注册组件
  components: { CTabelTotalpass },
  methods: {
    //vuex Mutations 同步方法
    ...mapMutations([]),
    //vuex Mutations 异步方"check",法
    ...mapActions(["getAreaList", "getSysChannelsList"]),
    // 执行右键菜单
    closeTags(type) {
      console.log(type);
      console.log(this.channelNo);
      let userNameM = localStorage.getItem("token");
      let parameters = {
        channelNo: this.channelNo,
        type: "",
        userName: userNameM,
      };
      if (type == "emergencyManagement") {
        console.log("应急管理");
        this.EmformDialogVisible = true;
      }
      if (type == "openChannel") {
        console.log("开通道");
        parameters.type = "openChannel";
        this.reconfirm(parameters, "开通道");
      }
      if (type == "closeChannel") {
        console.log("关通道");
        parameters.type = "closeChannel";
        this.reconfirm(parameters, "关通道");
      }
      if (type == "resetChannel") {
        console.log("复位");
        parameters.type = "resetChannel";
        this.reconfirm(parameters, "复位");
      }
      if (type == "closeAlarm") {
        console.log("关闭报警");
        parameters.type = "closeAlarm";
        this.reconfirm(parameters, "关闭报警");
      }
      if (type == "openRail") {
        console.log("抬栏杆");
        parameters.type = "openRail";
        parameters.areaCode = this.getAreaByChannel(parameters.channelNo);
        this.$confirm(`确认抬栏杆?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            openRail(parameters)
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("下发指令成功！");
                } else {
                  this.$message.error(res.message);
                }
              })
              .catch((err) => {
                console.error(err);
                this.$message.error("操作失败！");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
      if (type == "downRail") {
        console.log("落路障");
        parameters.type = "downRail";
        this.reconfirm(parameters, "落路障");
      }
    },
    reconfirm(parm, text) {
      this.$confirm(`确认${text}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.operaChannelM(parm);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    operaChannelM(parameters) {
      operaChannel(parameters)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("下发指令成功！");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("操作失败！");
        });
    },
    headerClick() {
      console.log("1");
    },
    // 关闭右键菜单
    closeMenu() {
      this.visibleMenu = false;
    },
    resetTimer(timer) {
      if (!timer) {
        return "";
      }
      let date = new Date(timer);
      let y = date.getFullYear(); //获取当前年份
      let m = date.getMonth() + 1; //获取当前月份（0——11）
      let d = date.getDate();
      let h = date.getHours();
      let mm = date.getMinutes();
      let ss = date.getSeconds();
      return (
        y +
        "-" +
        m +
        "-" +
        d +
        " " +
        this.toNum(h) +
        ":" +
        this.toNum(mm) +
        ":" +
        this.toNum(ss)
      );
    },
    toNum(value) {
      return value >= 10 ? value : "0" + value;
    },
    //历史验放结果报文查询
    getHistory(channelNos) {
      history({ channelNos }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          let data = res.data || [];
          data.forEach((item, index) => {
            item = this.$x2js.xml2js(item);
            console.log(item);
            if (item.GATHER_FEEDBACK.CHECK_RESULT == "Y") {
              this.tableData.push({
                channelNo: item.GATHER_FEEDBACK.CHNL_NO,
                areaId: item.GATHER_FEEDBACK.AREA_ID,
                carNo: item.GATHER_FEEDBACK.VE_INFO.VE_LICENSE_NO,
                intTime: item.GATHER_FEEDBACK.FEEDBACK_TIME,
                opHint: item.GATHER_FEEDBACK.OP_HINT,
                LedTips: item.GATHER_FEEDBACK.LED_HINT,
              });
            } else {
              this.errTableData.push({
                channelNo: item.GATHER_FEEDBACK.CHNL_NO,
                areaId: item.GATHER_FEEDBACK.AREA_ID,
                carNo: item.GATHER_FEEDBACK.VE_INFO.VE_LICENSE_NO,
                intTime: item.GATHER_FEEDBACK.FEEDBACK_TIME,
                opHint: item.GATHER_FEEDBACK.OP_HINT,
                LedTips: item.GATHER_FEEDBACK.LED_HINT,
              });
            }
          });
        }
      });
    },
    //获取最近30分钟内的过车记录
    getGateHisInfosM(channelNos) {
      let nowDate = this.resetTimer(new Date().getTime() - 1800000);
      console.log(nowDate);
      let searchParm = {
        areaName: "",
        areaIds: "",
        pageIndex: 1,
        pageSize: 20,
        channelNos: channelNos, //通道编号数组，String类型
        carNo: "", //
        contaNo: "", //箱号
        startTime: nowDate, //进卡开始时间
        endTime: "", //进卡结束时间
        declareNo: "", //declareNo
        sessionId: "", //过车SESSIONID
        result: "", //放行结果，0放行，1验放中，2待处理，3人工补录，4已人工抬杠，5已退车},
      };
      getGateHisInfos(searchParm)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data.list || [];
            console.log('30分钟内的过车记录',data);
            if (data.length > 14) {
              data.length = 15;
            }
            // const newData = [];
            // data.forEach((item, index) => {
            //   newData[index] = {
            //     channelName: item.channelName,
            //     intTime: item.intTime,
            //     customsNo: item.AREA_ID,
            //     carNo: item.carNo,
            //     OperationTips: "",
            //     LedTips: "",
            //   };
            // });
            // this.tableData = newData;
            this.tableData = data;
            this.total = res.data.total || 0;
          } else {
            this.$message.error("请求失败，请刷新页面");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },

    //右键开启菜单
    openMenu($event, item) {
      if (item._Status == "Null") {
        this.$message.warning("暂未获取到通道状态时不能操作通道");
      } else {
        console.log(item);
        this.channelNo = item._ChannelID;
        const menuMinWidth = 105;
        const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
        //this.$el.getBoundingClientRect().left是指当前视图元素左侧到窗口左侧的长度，同样.top是当前视图元素上侧到窗口上侧的长度
        //.right是当前视图元素右侧到当前窗口左侧的 长度，.boottom是当前视图元素到当前窗口上侧的长度。

        // $event.clientX是当前鼠标对于窗口左侧来说的长度
        //所以$event.clientX - offsetLeft的长度就相当于此时鼠标对于该视图元素左侧的长度。
        const offsetWidth = this.$el.offsetWidth; // container width
        const maxLeft = offsetWidth - menuMinWidth; // left boundary
        const left = $event.clientX - offsetLeft; // 15: margin right
        let menuHeight = 123.2; //鼠标右键菜单高度
        const maxtop = this.tabelHeight - menuHeight; //maxtop:菜单顶部最大显示的高度
        const top = $event.clientY - this.$el.getBoundingClientRect().top;
        if (top > maxtop) {
          this.top = top - menuHeight;
        } else {
          this.top = top;
        }
        if (left > maxLeft) {
          this.left = maxLeft;
        } else {
          this.left = left;
        }
        if (
          this.look != true ||
          this.emergencyManagement == true ||
          this.channelManagement == true
        ) {
          this.visibleMenu = true;
        } else {
          this.$message({ message: "暂无操作权限", type: "error" });
        }
        console.log(item);
        this.status = item._Status;
        // if (item._Status == "Idle") {
        //   this.channelState = false;
        // } else {
        //   this.channelState = true;
        // }
        console.log(this.status);
        if (item.Alarm._Status == "Off") {
          this.isAlarm = false;
        } else if (item.Alarm._Status == "On") {
          this.isAlarm = true;
        }
      }
    },
    //全屏
    showScreenfull() {
      //isEnabled为false时不支持全屏
      if (!screenfull.isEnabled) {
        this.$message({
          message: "您的浏览器不支持全屏，请升级您的浏览器!",
          type: "warning",
        });
        return false;
      }
      //切换全屏
      screenfull.toggle();
    },
    changeScreenfull() {
      //用来监测是否是全屏
      this.isScreenfull = screenfull.isFullscreen;
      console.log(this.isScreenfull);
    },
    initScreenfull() {
      //如果支持全屏,添加监听器
      if (screenfull.isEnabled) {
        screenfull.on("change", this.changeScreenfull);
      }
    },
    //摧毁前注销监听器
    destroyScreenfull() {
      if (screenfull.isEnabled) {
        screenfull.off("change", this.changeScreenfull);
      }
    },
    //提交表单并关闭对话框
    EmformSubmit() {
      this.EmformDialogVisible = false;
    },
    //提交通道选择表单，并关闭对话框
    ccFormSubmit() {
      if (this.channelOptions.code == 200) {
        console.log(this.channelOptions.code);
        if (this.ccForm.checkedCities.length < 1) {
          this.$message({
            message: "请至少选择一条通道",
            type: "error",
            showClose: true,
            center: true,
          });
        } else {
          console.log(this.ccForm.checkedCities);
          //this.getGateHisInfosM(this.ccForm.checkedCities);
          this.getHistory(this.ccForm.checkedCities);
          this.choseChannelDialogVisible = false;
          this.ccForm.checkedCities.forEach((item) => {
            console.log(item);
            let channelName = this.getChannelNameById(item);
            console.log(channelName);
            this.Animation.push({
              Alarm: { _Info: "", _Status: "Off" },
              Barricade: { _Info: "", _Status: "" },
              LED: { _Info: "暂未获取到通道状态", _Status: "" },
              Parapet: { _Info: "", _Status: "Down" },
              TrafficLight: { _Info: "", _Status: "Red" },
              Vehicle: { _Info: "", _Status: "" },
              _Status: "Null",
              _ChannelID: item,
              //_ChannelName: channelName,

              _ChannelName: item,
            });
          });
          this.initWebSocket();
        }
      } else {
        this.choseChannelDialogVisible = false;
      }
    },
    //关闭应急管理对话框,重置表单
    EmClose() {
      this.$refs.Emform.resetFrom();
    },
    ccDialongClose() {
      this.$refs.ccForm.resetFrom();
    },
    getChannelNameById(value) {
      let channelOptions = this.channelOptions.data;
      for (let i = 0; i < channelOptions.length; i++) {
        if (channelOptions[i].channelNo == value) {
          return channelOptions[i].channelName;
        }
      }
    },
    //对话框渲染完毕后加载获取通道
    dialogOpen() {
      //this.getChannelsByIpM();
      this.getLocalIp();
    },
    //导出获取所有数据
    getAllData() {},
    //改变页数
    changePage() {
      console.log("改变页数");
    },
    //数组栈
    arrStack(arr, data) {
      if (arr.length > 14) {
        arr.pop(); //先删除尾部的数据
        arr.unshift(data); //再添加头部的数据
      } else {
        arr.unshift(data);
      }
    },
    //初始化websocket
    initWebSocket() {
      console.log("初始化weosocket");
      //初始化weosocket
      //const wsuri = "ws://8.129.56.247:8889";
      const wsuri = "ws://10.5.135.100:53333";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      console.log("发送数据");
      this.websocketsend(
        JSON.stringify({
          type: "",
          data: {
            channelNo: this.ccForm.checkedCities,
            from: "web",
            areaId: "",
            MsgId: "",
            frame: "",
          },
        })
      );
    },
    websocketonerror(e) {
      console.log(e);
      console.log(this.websock.readyState);
      //连接建立失败重连
      console.log("连接建立失败重连");
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log("收到数据");
      if (e) {
        const data = this.$x2js.xml2js(e.data);
        console.log(data);
        let myData = this.$x2js.xml2js(data.BusMessage.Body.Data);
        if (myData.FEStatusInfo) {
          console.log(myData);
          console.log(myData.FEStatusInfo.ChannelInfo._Status);
          let channelInfo = myData.FEStatusInfo.ChannelInfo;

          if (this.Animation.length > 0) {
            this.Animation.forEach((element, index) => {
              if (element._ChannelID == channelInfo._ChannelID) {
                channelInfo._ChannelName = this.getChannelNameById(
                  channelInfo._ChannelID
                );
                this.$set(this.Animation, index, channelInfo);
              }
            });
          } else {
            this.Animation.push(channelInfo);
          }
        } else if (myData.GATHER_FEEDBACK) {
          const res = myData.GATHER_FEEDBACK;
          console.log("82放行报文");
          let channelName = this.getChannelNameById(res.CHNL_NO);
          const newData = {
            channelName: channelName,
            intTime: res.FEEDBACK_TIME,
            customsNo: res.AREA_ID,
            carNo: res.VE_INFO.VE_LICENSE_NO,
            OperationTips: res.CHECK_RESULT,
            LedTips: res.LED_HINT,
          };
          console.log(res);
          if (res.CHECK_RESULT == "Y") {
            this.arrStack(this.tableData, newData); //向正常数组里添加数据
            // this.Animation.forEach((item, index) => {
            //   if (item._ChannelID == res.CHNL_NO) {
            //     this.$set(this.Animation[index], "_Status", "Leaving");
            //   }
            // });
          } else {
            this.arrStack(this.errTableData, newData); //向异常数组里添加数据
          }
        }
      } else {
        this.$message({
          message: "websocket连接已建立，但未接收到数据",
          type: "warning",
        });
      }
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    //获取区域和通道
    getSysChannelsM() {
      let parm = {
        areaId: "", //场站ID
        channelNo: "", //通道号
        pageIndex: 1, //页码
        pageSize: 20, //页面容量
      };
      getSysChannels(parm)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data.list || [];
            this.sysChanenls = data;
            console.log(res);
          } else {
            console.log("获取失败");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getAreaByChannel(channel) {
      for (let i = 0; i < this.sysChanenls.length; i++) {
        if (this.sysChanenls[i].channelNo == channel) {
          return this.sysChanenls[i].areaId;
        }
      }
    },
    //获取本机IP
    getLocalIp() {
      getUserIp({})
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            console.log(res.data);
            this.getChannelsByIpM({
              ip: res.data,
              operator: localStorage.getItem("userName"),
            });
          } else {
            this.$mssage.warning(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$mssage.error("获取本机IP失败，请刷新页面重试");
        });
    },
    //根据IP获取通道(以后使用海关接口)
    getChannelsByIpM(parm) {
      channels(parm)
        .then((res) => {
          this.channelOptions = res;
          console.log(this.channelOptions);
          if (res.code == 200) {
          } else {
            this.channelTipsTitle = "本机暂无可选通道，请联系管理员";
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log("错误");
          this.channelTipsTitle = "获取通道失败，请刷新页面重试";
          this.loading = false;
          console.error(err);
        });
    },
    //根据IP获取通道
    // getChannelsByIpM() {
    //   getChannelsByIp({})
    //     .then((res) => {
    //       this.channelOptions = res;
    //       console.log(this.channelOptions);
    //       if (res.code == 200) {
    //       } else {
    //         this.channelTipsTitle = "本机暂无可选通道，请联系管理员";
    //       }
    //       this.loading = false;
    //     })
    //     .catch((err) => {
    //       console.log("错误");
    //       this.channelTipsTitle = "获取通道失败，请刷新页面重试";
    //       this.loading = false;
    //       console.error(err);
    //     });
    // },
    setRoles() {
      if (
        this.$route.meta &&
        this.$route.meta.data &&
        this.$route.meta.data.children &&
        this.$route.meta.data.children.length > 0
      ) {
        let data = this.$route.meta.data.children;
        data.forEach((item) => {
          if (item.authNo) {
            if (item.authNo == "@emergencyManagement") {
              this.emergencyManagement = true;
            }
            if (item.authNo == "@channelManagement") {
              this.channelManagement = true;
            }
            if (item.authNo == "@look") {
              this.look = true;
            }
          }
        });
      }
    },
  },
  created() {
    /*获取区域数据*/
    this.getSysChannelsM();
    this.setRoles();
    this.initScreenfull();
    //this.initWebSocket();
  },
  mounted() {
    this.choseChannelDialogVisible = true;
  },
  beforeDestroy() {
    if (this.websock) {
      this.websock.close(); //离开路由之后断开websocket连接
    }
  }
};
</script>
<style scoped lang="scss">
.screenfull {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  background: #ffffff;
}
.el-switch {
  margin-left: 25%;
}
.base-info {
  padding: 10px 20px 10px 10px;
  border: 1px solid #d4f0f0;
  margin-bottom: 10px;
}
.content {
  width: 100%;
  height: 100%;
  .rate {
    font-size: 14px;
  }
}
.myMain {
  padding: 0;
  height: 100%;
  .row {
    height: 100%;
    .col {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    button {
      display: block;
      width: 100%;
      border: none;
      padding: 2px 0;
      background-color: white;
    }
    .closeChannel {
      &:hover {
        background: #f56c6c;
        color: #eee;
      }
    }
    .resetChannel {
      &:hover {
        background: #e6a23c;
        color: #eee;
      }
    }
    .openChannel {
      &:hover {
        background: #67c23a;
        color: #eee;
      }
    }
    .closeAlarm {
      &:hover {
        background: #f56c6c;
        color: #eee;
      }
    }
    .openRail {
      &:hover {
        background: #1e90ff;
        color: #eee;
      }
    }
    .emergencyManagement {
      &:hover {
        background: #f60604;
        color: #eee;
      }
    }
  }
  .myCol {
    background-color: white;
    z-index: 10;
    position: relative;
    padding: 0 0 0 8px;
    .export {
      text-align: right;
    }
    .titel1 {
      position: relative;
      font-size: 18px;
      text-align: left;
      padding-left: 10px;
      margin: 0 auto;
      line-height: 30px;
      .outPut {
        float: right;
      }
      .export {
        float: right;
      }
      &::before {
        content: "";
        display: block;
        width: 5px;
        height: 80%;
        position: absolute;
        top: 10%;
        left: 0;
        background-color: #2169fc;
      }
    }
    .titel2 {
      line-height: 30px;
      font-size: 20px;
      text-align: center;
      color: #f56c6c;
    }
  }
  .myDiv {
    background: url("../../../assets/car/bg_01.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    .myTitle {
      text-align: center;
      z-index: 99;
      position: relative;
    }
    .channel {
      z-index: 99;
      position: absolute;
      top: 0;
      right: 10px;
    }
    .baojingGif {
      position: absolute;
      z-index: 8;
      transform: scale(0.2);
      left: 9.5%;
    }

    //栏杆
    .railImg {
      z-index: 7;
      position: absolute;
      left: 21%;
      animation-duration: 2s; //动画时间
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
    .open-rail {
      animation-name: rail; //动画名称
    }
    @keyframes rail {
      0% {
        transform: rotate(0deg);
        transform-origin: 0 0;
      }

      100% {
        transform: rotate(-90deg);
        transform-origin: 0 0;
      }
    }
    .close-rail {
      animation-delay: 2s;
      animation-name: closeActive;
      transform: rotate(-90deg);
      transform-origin: 0 0;
    }
    @keyframes closeActive {
      0% {
        transform: rotate(-90deg);
        transform-origin: 0 0;
      }

      100% {
        transform: rotate(0deg);
        transform-origin: 0 0;
      }
    }

    //过车动画
    .carImg {
      position: absolute;
      z-index: 9;
      transform: scale(0.8);
      left: 30%;
      bottom: 12%;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
    .car-stop {
      transform: translate(130%, -35%) scale(0.8) !important;
    }
    .car-leving {
      animation-name: car-leving; //动画名称
      animation-duration: 2s; //动画时间
      animation-timing-function: ease-in; //动画类型
    }
    @keyframes car-leving {
      0% {
      }
      100% {
        transform: translate(-180%, 45%);
      }
    }
    .car-in {
      animation-name: car-in; //动画名称
      animation-duration: 4s; //动画时间
    }
    @keyframes car-in {
      0% {
        transform: translate(130%, -35%) scale(0.7);
      }
      100% {
      }
    }

    .lightImg {
      position: absolute;
      transform: scale(0.7);
      z-index: 11;
      top: -3%;
    }
    .pillarImg {
      z-index: 8;
      transform: scale(0.5);
      position: absolute;
      bottom: 11%;
      left: 14%;
    }
    .roadImg {
      position: absolute;
      bottom: 8%;
      left: 4%;
      transform: scale(1.3);
    }
  }
}
</style>