<template lang="pug">
  <div class="animation">
    <div class='info-title'>当前资源点关联摄像头
      <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
    </div>
    <div style="height:40px; width:100%;padding-top:10px">
      <div style="width:80px; float:left; line-height:40px; padding-left:10px;">关联监控:</div>
      <div style="float:left">
        <el-select v-model="camera" placeholder="请选择" @change="cameraChange">
          <el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class='info-video'>
      <img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
      <video v-if="video1 == 1" class="video" ref="video" muted autoplay controls></video>
    </div>
    <div class="info-form">
      <div class="operate">
        <div class="btns">
          <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
          <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
          <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
          <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
          <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
          <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
          <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
          <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
          <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
          <div class="fx">方向</div>
          <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
          </div>
          <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
          </div>
          <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
          </div>
          <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
          </div>
          <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
          </div>
          <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
          </div>
          <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
          </div>
          <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
          </div>
        </div>
        <div class="ytBox ytBox2">
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
              <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
              <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
              <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
              <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
              <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
              <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
              <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
              <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
              <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
              <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
              <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
              <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='info-title'>资源点信息查询</div>
    <div class='info-form'>
      <el-button type="primary" style='margin-left:30px;' @click="dialogList1">出入记录查询</el-button>
      <el-button type="primary" @click="dialogList2">历史指令查询</el-button>
    </div>
    <el-dialog :title="dataForm.name" width="1200px" :close-on-click-modal='false' :visible.sync='visible1' :modal-append-to-body='false'>
      div(slot='title')
        span.title-bold {{dataForm.name}}
      <div class="instuctions_content">
        <el-form :inline="true" :model="formData1" size="mini" style="margin:20px 0 20px 17px ">
          <el-form-item label="人员姓名:">
            <el-input v-model="formData1.name"  placeholder="请输入人员姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="门禁设备:">
            <el-select v-model="formData1.id" placeholder="请选择">
              <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id" placeholder="请选择"> </el-option>
            </el-select>
            //- <el-autocomplete class="inline-input" v-model="formData1.username" :fetch-suggestions="querySearch1" placeholder="请输入内容"></el-autocomplete>
          </el-form-item>
          <el-form-item label="查询时间:">
            <el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="formData1.startTime" placeholder="选择日期时间" clearable ></el-date-picker>
          </el-form-item>
          <el-form-item label="至">
            <el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="formData1.endTime" placeholder="选择日期时间" clearable ></el-date-picker>
          </el-form-item>
          <el-button @click="getDataList1()" type="primary"  size="mini" icon="el-icon-search">查询</el-button>
        </el-form>
        <el-table :data="dataList1" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#D5D9E0',color:'#fff'}" style="width: 100%;">
          <el-table-column type="index" header-align="center" align="center" width='80' label="序号">
            <template scope="scope"><span>{{scope.$index+(pageIndex1 - 1) * pageSize1 + 1}} </span></template>
          </el-table-column>
          <el-table-column prop="instruction" header-align="center" align="center" label="姓名"></el-table-column>
          <el-table-column prop="resourceName" header-align="center" align="center" label="部门"></el-table-column>
          <el-table-column prop="type" header-align="center" align="center" label="岗位"></el-table-column>
          <el-table-column prop="actionName" header-align="center" align="center" label="卡序列号"></el-table-column>
          <el-table-column prop="createUser" header-align="center" align="center" label="刷卡时间"></el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <div>{{scope.row.result==1?'成功':'失败'}}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle1" @current-change="currentChangeHandle1" :current-page="pageIndex1" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize1" :total="totalPage1" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
      </div>
    </el-dialog>

    <el-dialog width="1200px" :close-on-click-modal='false' :visible.sync='visible2' :modal-append-to-body='false'>
      div(slot='title')
        span.title-bold 历史指令
      <div class="instuctions_content">
        <el-form :inline="true" :model="formData2" size="mini" style="margin:20px 0 20px 17px ">
          <el-form-item label="操作ID:">
            <el-input v-model="formData2.instruction"  placeholder="请输入内容" clearable></el-input>
          </el-form-item>
          <el-form-item label="门禁设备:">
            <el-select v-model="formData2.resourceId" placeholder="请选择">
              <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id" placeholder="请选择"> </el-option>
            </el-select>
            //- <el-autocomplete class="inline-input" v-model="formData1.username" :fetch-suggestions="querySearch1" placeholder="请输入内容"></el-autocomplete>
          </el-form-item>
          <el-form-item label="执行时间:">
            <el-date-picker type="datetime" class="inputWidth" style="width:175px;" value-format="yyyy-MM-dd HH:mm:ss" v-model="formData2.startTime" placeholder="选择日期时间" clearable ></el-date-picker>
          </el-form-item>
          <el-form-item label="至">
            <el-date-picker type="datetime" class="inputWidth" style="width:175px;" value-format="yyyy-MM-dd HH:mm:ss" v-model="formData2.endTime" placeholder="选择日期时间" clearable ></el-date-picker>
          </el-form-item>
          <el-button @click="getDataList2()" type="primary"  size="mini" icon="el-icon-search">查询</el-button>
        </el-form>
        <el-table :data="dataList2" @sort-change='sortChange2' v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#D5D9E0',color:'#fff'}" style="width: 100%;">
          <el-table-column type="index" header-align="center" align="center" width='100' label="序号">
            <template scope="scope"><span>{{scope.$index+(pageIndex2 - 1) * pageSize2 + 1}} </span></template>
          </el-table-column>
          <el-table-column prop="instruction" width='200' sortable="custom" header-align="center" align="center" label="指令ID">
            <template slot-scope="scope">
              <font :title="scope.row.instruction">{{scope.row.instruction}}</font>
            </template>
          </el-table-column>
          <el-table-column prop="resourceName" sortable="custom" width='150' column-key='resource_name' header-align="center" align="center" label="资源点名称"></el-table-column>
          <el-table-column prop="deployLocation" sortable="custom" width='150' header-align="center" align="center" label="部署位置"></el-table-column>
          <el-table-column prop="actionName" sortable="custom" column-key='action_name' header-align="center" align="center" label="动作"></el-table-column>
          <el-table-column prop="createUser" sortable="custom" column-key='create_user' header-align="center" align="center" label="操作人"></el-table-column>
          <el-table-column prop="createTime" sortable="custom" width='200' column-key='create_time' header-align="center" align="center" label="操作时间">
            <template slot-scope="scope">
              <font :title="scope.row.createTime">{{scope.row.createTime}}</font>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" column-key='result' width='100' header-align="center" align="center" label="执行结果">
            <template slot-scope="scope">
              <div>{{scope.row.result==1?'成功':'失败'}}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle2" @current-change="currentChangeHandle2" :current-page="pageIndex2" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize2" :total="totalPage2" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      video1: 0,
      flvPlayer: null,
      options: [],
      stationId: '',
      //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
      //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
      actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
        '上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
      imgUrl: '',
      imgRightUrl11: false,
      imgRightUrl12: false,
      imgRightUrl13: false,
      imgRightUrl14: false,
      imgRightUrl15: false,
      imgRightUrl16: false,
      monitorList: [{
        value: '1',
        label: '监控1'
      }, {
        value: '2',
        label: '监控2'
      }],
      monitorValue: '监控1',
      videoSrc: '',
      clickFlag: false,
      visible1: false,
      visible2: false,
      sysOrgList: [],
      dataListLoading: false,
      dataList1: [],
      dataList2: [],
      formData1: {},
      formData2: {},
      dataListSelections: [],
      lineList: [],
      stationList: [],
      typeList: [],
      systemList: [],
      tierList: [],
      camera: '',
      pageIndex1: 1,
      pageSize1: 10,
      totalPage1: 0,
      pageIndex2: 1,
      pageSize2: 10,
      totalPage2: 0,
      order2: '',
      sort2: '',
      restaurants: [],
      cameraCur: {},
      dataForm: { id: 0, name: '', type: 1, lineId: '', lineName: '', stationId: '', stationName: '', tierId: '', subSystem: '', code: '', subCode: '', addressCode: '', port: '', username: '', password: '', remark: '', status: 1 }
    }
  },
  watch: {
    totalPage1() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage1 / this.pageSize1)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex1) {
          this.pageIndex1 = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    },
    totalPage2() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage2 / this.pageSize2)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex2) {
          this.pageIndex2 = pages || 1
          this.getDataList2()//获取表格数据的方法
      }
    }
  },
  created() {

  },
  methods: {
    init (id, stationId) {
      this.stationId = stationId
      this.getAllEq()
      this.clickFlag = false
      this.dataForm.id = id
      this.formData1.id = id
      this.cameraCur = {}
      this.camera = ''
      this.initResource()
      this.dataForm.operatorName = this.info.name
    },
    //门禁查询
    getDataList1() {
      console.log('门禁出入记录查询')
    },
    //历史指令查询
    getDataList2() {
      // console.log('历史指令查询')
      // if (new Date(this.formData2.startTime).getTime() > new Date(this.formData2.endTime).getTime()) {
      //   this.$message.warning('开始时间不能大于结束时间')
      //   return false
      // }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/orGate/list'),
        method: 'post',
        data: {
          stationId: this.stationId,
          page: this.pageIndex2,
          rows: this.pageSize2,
          startTime: this.formData2.startTime,
          endTime: this.formData2.endTime,
          instruction: this.formData2.instruction,
          resourceId: this.formData2.resourceId,
          sort: this.sort2,
          order: this.order2
        }
      }).then(data => {
        //console.log('data', data)
        if (data && data.code === 0) {
          this.dataList2 = data.page.rows
          this.totalPage2 = data.page.total
        } else {
          this.dataList2 = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    initResource() {
      this.video1 = 0//初始化显示默认图片
        this.$http({
          url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(data => {
          if (data && data.code === 0) {
            this.dataForm = data.bean
            console.log(this.dataForm, '---------')
            if (this.dataForm.list && this.dataForm.list.length > 0) {
              this.cameraCur = this.dataForm.list[0]
              this.camera = this.cameraCur.id
              this.video1 = 1
              //视频直播
              var src = ''
              this.$http({
                url: this.$http.adornUrlEq('/camera/camerasPlay'),
                method: 'post',
                data: {
                  id: this.cameraCur.id,
                  stationId: data.bean.stationId,
                  userId: localStorage.getItem('userId'),
                  levelType: 1,
                  controlType: 3
                }
              }).then(data => {
                if (data && data.code === 0) {
                  src = data.url
                  //视频连接
                  if (flvjs.isSupported()) {
                    this.flvPlayer = flvjs.createPlayer({
                      type: 'flv',
                      enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                      isLive: true, //直播模式
                      hasAudio: false, //关闭音频
                      hasVideo: true,
                      stashInitialSize: 128,
                      enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                      url: src
                    })
                    this.$nextTick(function () {
                      this.flvPlayer.attachMediaElement(this.$refs.video)
                      try {
                        this.flvPlayer.load()
                        this.flvPlayer.play()
                      } catch (error) {
                        console.log(error)
                      }
                    })
                  }
                }
              })
            }
          }
        })
    },
    //查询所有设备
    getAllEq() {
      // console.log('---', this.stationId)
      this.$http({
        url: this.$http.adornUrlEq('/liResource/getAllEq'),
        method: 'get',
        params: {
          stationId: this.stationId,
          subCode: '02'
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.options = data.list
          // console.log('所有设备', data.list)
        }
      })
    },
    closeQueryDetailVisible() {
      this.$emit('closeQ')
    },
    querySearch1(queryString, cb) {
      let restaurants = this.restaurants
      let results = queryString ? restaurants.filter(this.createFilter1(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter1(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    querySearch2(queryString, cb) {
      let restaurants = this.restaurants
      let results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter2(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    dialogList1() {
      this.visible1 = true
      this.getDataList1()
    },
    dialogList2() {
      this.visible2 = true
      this.$set(this.formData2, 'resourceId', this.dataForm.id)
      this.getDataList2()
    },
    //排序
    sortChange2 (column) {
      if (column.order === 'descending') {
        this.order2 = 'desc'
      } else {
        this.order2 = 'asc'
      }
      if (column.column.columnKey) {
        this.sort2 = column.column.columnKey
      } else {
        this.sort2 = column.prop
      }
      this.getDataList2()
    },
    // 每页数
    sizeChangeHandle1(val) {
      this.pageSize1 = val
      this.pageIndex1 = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle1(val) {
      this.pageIndex1 = val
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle2(val) {
      this.pageSize2 = val
      this.pageIndex2 = 1
      this.getDataList2()
    },
    // 当前页
    currentChangeHandle2(val) {
      this.pageIndex2 = val
      this.getDataList2()
    },
    clickPTZControl(ptz, dwStop, img) {
      if (!this.camera || (this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16))) {
        return
      }
      if (!isAuth('access:point:corona')) {
        this.$message({
          type: 'warning',
          message: '没有操作权限，请联系管理员',
          duration: 1000
        })
        return
      }
      if (img && img != 'right') {
        this.imgUrl = img
      }
      if (dwStop) {
        this.imgUrl = ''
      }
      if (img && img == 'right') {
        this['imgRightUrl' + ptz] = true
      }
      if (dwStop && img == 'right') {
        this['imgRightUrl' + ptz] = false
      }

      this.$http({
        url: this.$http.adornUrlEq('/camera/ptzControl'),
        method: 'post',
        data: {
          ip: this.cameraCur.addressCode, //ip地址
          port: this.cameraCur.port, //端口
          username: this.cameraCur.username, //账号
          password: this.cameraCur.password, //密码
          channel: this.cameraCur.byx1, //通道
          stream: 'main', //主码流
          dwPtzCommand: ptz, //云台控制命令
          dwStop: dwStop //云台控制0开始和1结束
        }
      }).then(data => {
        if (data && data.code === 0) {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(1, ptz)// 执行结果 成功 1  失败 2
            this.$message.success(data.msg)
          }
        } else {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(2, ptz)// 执行结果 成功 1  失败 2
            this.$message.error(data.msg)
          }
        }
      })
    },
    //调用日志保存记录操作指令
    saveLog (result, ptz) {
      this.$http({
        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
        method: 'post',
        data: {
          source: 1,
          actionName: this.actionList[ptz],
          resourceId: this.cameraCur.id,
          stationId: this.stationId,
          type: this.cameraCur.type,
          result: result
        }
      }).then(data => {

      })
    },
    cameraChange (id) {
      if (id) {
        this.camera = id
        this.dataForm.list.forEach(res => {
          if (res.id === id) {
            this.cameraCur = res
          }
        })
        if (this.flvPlayer) {
          this.flvPlayer.pause()
          this.flvPlayer.unload()
          this.flvPlayer.detachMediaElement()
          this.flvPlayer.destroy()
          this.flvPlayer = null
        }
        this.$http({
          url: this.$http.adornUrlEq('/camera/camerasPlay'),
          method: 'post',
          data: {
            id: this.cameraCur.id,
            stationId: this.cameraCur.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3
          }
        }).then(data => {
          //视频直播
          var src = data.url
          // var src = 'ws://10.20.72.26:8000/live/' + this.cameraCur.byx1 + '.flv'
          //视频连接
          if (flvjs.isSupported()) {
            this.flvPlayer = flvjs.createPlayer({
              type: 'flv',
              enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
              isLive: true, //直播模式
              hasAudio: false, //关闭音频
              hasVideo: true,
              stashInitialSize: 128,
              enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
              url: src
            })
            this.$nextTick(function () {
              this.flvPlayer.attachMediaElement(this.$refs.video)
              try {
                this.flvPlayer.load()
                this.flvPlayer.play()
              } catch (error) {
                console.log(error)
              }
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.info-title{
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  background-color: #e1edf4;
  border-bottom: 1px solid #cccccc;
  font-size:16px;
  font-family:Microsoft YaHei;
  font-weight:bold;
}
.info-video{
  padding: 10px; height: 160px;
}
.info-form{
  padding: 10px;
}
.info-block{
  border: 1px solid #cccccc;
}
.el-select{
  width: 100%;
}
.video{
  width: 100%;height: 180px;
}
.animation{
  animation: myfirst 1s; position: absolute; top: 50px;right: 0; width: 330px; background-color: #F4F4F4; z-index: 11; border: 1px solid rgba(195, 195, 195, 1);
  box-shadow:0 2px 8px 8px rgba(0,0,0,0.2)
}
@keyframes myfirst{
  from {right: -500px}
  to {right: 0}
}
.quDetailM{
  width: 100%;

}
.leftP{
    height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px;
    span{
      color: #46b6f9;
    }
}
.operate{
  padding:5px 0;
  font-size:14px;
  font-family:Microsoft YaHei;
  font-weight:400;
  color:rgba(0,0,0,1);
  border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
  border-radius:10px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  .btns{
    width:194px;
    height:194px;
    position:relative;
    img{
      width:100%;
      height:100%;

    }
    div{
      cursor: pointer;
      padding: 10px;
    }
    .s{
      position: absolute;
      top:10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .x{
      position: absolute;
      bottom:10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .z{
      position: absolute;
      top:75px;
      left: 10px;
      width: 24px;
      height: 24px;
    }
    .y{
      position: absolute;
      top:75px;
      right:10px;
      width: 24px;
      height: 24px;
    }
    .zs{
      position: absolute;
      top:32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .zx{
      position: absolute;
      bottom:32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .ys{
      position: absolute;
      top:32px;
      right:32px;
      width: 24px;
      height: 24px;
    }
    .yx{
      position: absolute;
      bottom:32px;
      right:32px;
      width: 24px;
      height: 24px;
    }
    .fx{
      position: absolute;
      padding: 0;
      cursor: default;
      top: 50%;
      left: 50%;
      width: 65px;
      height: 65px;
      background:#ececec;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      color: #969696;
      transform: translate(-50%,-50%);
    }
  }
  .ytBox{
    width:90px;
    font-size: 16px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .mllx{
      display: flex;
      justify-content: space-between;
      width: 90%;
      span{
        line-height: 40px;
        text-align: center;
        width: 35%;
      }
    }
    .bbBtn{
      height: 40px;
      display: flex;
      margin-left: 10px;
      justify-content: flex-start;
      div{
        width: 40px; height: 40px; cursor: pointer;
        img{
          width: 100%; height: 100%;
        }
      }
    }
  }
}

.el-icon-wq-r1{
    background: url(~@/assets/images/r1.png) center no-repeat;
    background-size: 65%;
}
.el-icon-wq-r1:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r2{
    background: url(~@/assets/images/r2.png) center no-repeat;
    background-size: 65%;
}
.el-icon-wq-r2:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r3{
    background: url(~@/assets/images/r3.png) center no-repeat;
    background-size: 65%;
}
.el-icon-wq-r3:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r5{
    background: url(~@/assets/images/r5.png) center no-repeat;
    background-size: 65%;
}
.el-icon-wq-r5:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r6{
    background: url(~@/assets/images/r6.png) center no-repeat;
    background-size: 65%;
}
.el-icon-wq-r6:before{
    content: "";
    font-size: 16px;
}

.el-icon-wq-r1b{
    background: url(~@/assets/images/r1b.png) center no-repeat;
    height: 35px;
    width: 35px;
    background-size: 65%;
}
.el-icon-wq-r1b:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r2b{
    background: url(~@/assets/images/r2b.png) center no-repeat;
    height: 35px;
    width: 35px;
    background-size: 65%;
}
.el-icon-wq-r2b:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r3b{
    background: url(~@/assets/images/r3b.png) center no-repeat;
    height: 35px;
    width: 35px;
    background-size: 65%;
}
.el-icon-wq-r3b:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r5b{
    background: url(~@/assets/images/r5b.png) center no-repeat;
    height: 35px;
    width: 35px;
    background-size: 65%;
}
.el-icon-wq-r5b:before{
    content: "";
    font-size: 16px;
}
.el-icon-wq-r6b{
    background: url(~@/assets/images/r6b.png) center no-repeat;
    height: 35px;
    width: 35px;
    background-size: 65%;
}
.el-icon-wq-r6b:before{
    content: "";
    font-size: 16px;
}
</style>
<style  lang="scss">
  .instuctions_content{
    table{
      th{
        background: #eef8ff !important;
        color: #333333 !important;
      }
    }
  }
</style>