Project_yhfu/src/components/TVWalls.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
               @close="cancelEventLocationShow()">

      <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
      <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
      <!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
      <!--<span v-for="(item,index) in cameraList" :key="index">-->
      <!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
      <!--<div class="d-l-l-text">-->
      <!--<i class="i-small"></i>-->
      <!--<h4>{{ item.cameraName }}</h4>-->
      <!--</div>-->
      <!--</div>-->
      <!--</span>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div style="width:70%;height:400px;position:absolute;">-->
      <!--&lt;!&ndash;视频窗口展示-&#45;&#45;大华&ndash;&gt;-->
      <!--<div id="dom1" class="dom1"></div>-->
      <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
      <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
      <!--</div>-->
      <div style="display: flex;">

        <div id="dom1" class="dom1"></div>
        <div class="leader-info-container" v-if="userDataShow">
          <div class="leader-info-list-con" v-for="user in userData">
            <h4 style="">{{user.position}}：{{user.name}}</h4>
            <h4>电话：{{user.phone}}</h4>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {getDahuaVideoServer, getTVWallList} from '@/api/dahua/dahua'
  import {tvCameraList} from '@/api/haikang/haikang'
  import {findCameraByEventCoordinate, rotation} from '@/api/monitor'
  import DHWs from '@/dahua/lib/DHWs'
import Cookies from "js-cookie"

  /** ----------------------------------摄像头预览结束------------------------------------- */
  export default {
    dicts: ['event_source'],
    components: {},
    data() {
      return {
              title:['365','369','371','373','372','370'].includes(Cookies.get("deptId"))?"电视墙":"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录，请谨慎操作。",
        tvListJson: [
          {
            'switchTab': '1',
            'treeLabels': [
              {
                'labelCode': '123456',
                'labelName': '视频场景',
                'parentLabelCode': null
              },
              {
                'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
                'labelName': '标签2',
                'parentLabelCode': 123456
              },
              {
                'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
                'labelName': '标签1',
                'parentLabelCode': 123456
              }
            ],
            'labelChannels': [{
              'channelDates': [{
                'channelCode': '6044981090191552',
                'channelName': '复兴大桥中段-交通事故',
                'channelSn': null,
                'cameraType': 0,
                'online': 1
              },
                {
                  'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
                  'channelName': '北京7青羊东二路77号2通道1',
                  'channelSn': null,
                  'cameraType': 1,
                  'online': 1
                }
              ],
              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
            },
              {
                'channelDates': [{
                  'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                  'channelName': '北京7青羊东二路77号2通道2',
                  'channelSn': null,
                  'cameraType': 2,
                  'online': 0
                }],
                'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
              }
            ]
          },
          {
            'switchTab': '2',
            'labelChannels': [{
              'channelDates': [{
                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
                'channelName': '北京7青羊东二路77号2通道1',
                'channelSn': null,
                'cameraType': 1,
                'online': 1
              },
                {
                  'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                  'channelName': '北京7青羊东二路77号2通道2',
                  'channelSn': null,
                  'cameraType': 2,
                  'online': 0
                }
              ]
            }]
          }
        ],
        TVWallVisible: false,
        activeName: 'tv',
        channelId: ['ZgVzqsjwA1DTF561VHG69F'],
        /** ----------------------------------摄像头预览开始------------------------------------- */
        showModal: true,
        activePanel: 'key1',
        isLogin: false,
        loginType: '1',
        token: '',
        ctrlType: 'playerWin',
        https: 1,
        httpsList: [
          {
            value: 0,
            label: 0
          },
          {
            value: 1,
            label: 1
          }
        ],
        ctrlTypeList: [{
          value: 'playerWin',
          label: '播放控件'
        }, {
          value: 'realMonitorUI',
          label: '带设备树实时预览控件'
        }, {
          value: 'playbackUI',
          label: '带设备树视频回放控件'
        }, {
          value: 'TVWallUI',
          label: '视频上墙'
        }],
        ctrlList: [
          {
            value: 'ctrl1',
            label: '控件1'
          },
          {
            value: 'ctrl2',
            label: '控件2'
          },
          {
            value: 'ctrl3',
            label: '控件3'
          }
        ],
        splitList: [
          {
            value: 1,
            label: '1 * 1'
          },
          {
            value: 4,
            label: '2 * 2'
          },
          {
            value: 9,
            label: '3 * 3'
          }
        ],
        displayModeList: [
          {
            value: 1,
            label: '播放器预览模式'
          },
          {
            value: 2,
            label: '播放器回放模式'
          }
        ],
        mixedVideoDisplayModeList: [
          {
            value: 1,
            label: '播放实时视频'
          },
          {
            value: 2,
            label: '播放回放视频'
          }
        ],
        ctrl: 'ctrl1',
        splitNum: 1,
        displayMode: 1,
        displayTimeRange: [],
        modalDisplayTimeRange: [],
        mixedVideoTime: null,
        recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
        downloadName: '',
        downTimeRange: [],
        downloadFormat: 0,
        downloadFormatList: [{
          value: 0,
          label: 'dav'
        },
          {
            value: 1,
            label: 'avi'
          }, {
            value: 2,
            label: 'mp4'
          }],
        downloadSource: 3,
        downloadSourceList: [
          {
            value: 3,
            label: '中心录像'
          }, {
            value: 2,
            label: '设备录像'
          }],
        showDownloadStreamType: false,
        downloadStreamType: 1,
        downloadStreamTypeList: [{
          value: 1,
          label: '主码流'
        },
          {
            value: 2,
            label: '辅码流'
          },
          {
            value: 3,
            label: '三码流'
          }],
        downloadIsShow: true,
        downloadIsShowList: [{
          value: true,
          label: '是'
        },
          {
            value: false,
            label: '否'
          }],
        crtPosX: 0,
        crtPosY: 0,
        crtWidth: 1148,
        crtHeight: 650,
        domId: 'dom1',
        mixedVideoDisplayMode: 2,
        isShowTipe: true,
        autoList: [],
        stringList: [],
        data: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        cameraList: [],
        initCount: 0,
        pubKey: '',
        oWebControl: null,
        userData:[],
        userDataShow:false,
      }
    },
    created() {
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
    },
    methods: {
      cancelEventLocationShow() {
        // this.activeName = 'tv'
        this.TVWallVisible = false
        this.destroy()

        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
            },
            function () {  // 断开与插件服务连接失败
            })
        }
      },
      showTVWall(data, val, item) {
        if(item != null){
          this.userData = item;
          this.userDataShow=true;
        }
        this.tvListJson = data
        this.data = val
        this.autoList = []
        this.stringList = []
        let length = data[0].treeLabels.length > 4 ? 5 : data[0].treeLabels.length
        for (let i = 1; i < length; i++) {
          this.autoList.push({"channelId": data[0].treeLabels[i].labelCode})
          this.stringList.push(data[0].treeLabels[i].labelCode)
        }
        console.log("this.autoList",this.autoList);
        console.log("this.stringList",this.stringList);
        // let that=this;
        /** ----------------------------------大华摄像头预览开始------------------------------------- */
        this.ws.addEventListener('connectStateChange', data => {
          if (data) {
            console.log('连接成功')
          } else {
            console.log('连接失败，下载客户端')
            this.alertReinstall()
          }
        })
        this.preview()
        /** ----------------------------------大华摄像头预览结束------------------------------------- */
        /** ----------------------------------海康摄像头预览开始------------------------------------- */
        // tvCameraList().then(response => {
        //   this.cameraList=response.data
        // })
        // that.initPlugin()
        // setTimeout(function() {
        //   that.playhk();
        // }, 5000)
        // /** ----------------------------------海康摄像头预览结束------------------------------------- */
        this.TVWallVisible = true
      },
      /** ----------------------------------大华摄像头预览开始------------------------------------- */
      alertLogin: function () {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function () {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function () {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function () {
        this.$modal.msgWarning('请重新安装客户端')
      },
      /** 预览按钮操作 */
      preview() {
        getDahuaVideoServer().then(newResponse => {
          this.ws.detectConnectQt().then(res => {
            if (res) { // 连接客户端成功
              this.alertLogin()
              this.ws.login({
                loginIp: newResponse.loginIp,
                loginPort: newResponse.loginPort,
                userName: newResponse.userName,
                userPwd: newResponse.userPwd,
                // loginIp: '192.168.100.100',
                // loginPort: 8314,
                // userName: 'system',
                // userPwd: 'Admin@123',
                token: '',
                https: 1
              })
              this.ws.on('loginState', (res) => {
                this.isLogin = res
                console.log('---res-----', res)
                if (res) {
                  this.alertLoginSuccess()
                  this.activePanel = 'key2'
                  this.create(this.tvListJson)
                } else {
                  this.alertLoginFailed()
                }
              })
            } else { // 连接客户端失败
              this.alertReinstall()
            }
          })
        })
      },
      playRealMonitorVideo() { // 自定义设备树自动播放指定通道编码视频
        const config = this.ws.config
        const {loginIp, userCode} = config
        this.ws.postMessage('playRealMonitorVideo', {
          loginIp,
          userCode,
          params: {
            ctrlCode: "ctrl1",
            array: this.autoList
          }
        })
      },
      realTimeVideoDialog(cameraParams) {
        // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info("正在登陆客户端，请稍等......");
          return false;
        }
        this.ws.openVideo(cameraParams);
      },
      create(tvListJson) { // 调用创建控件接口
        let _this = this
        const params = [
          {
            'ctrlType': 'realMonitorUI',
            'ctrlCode': 'ctrl1',
            'ctrlProperty': {
              'displayMode': 1,
              'splitNum': 1,
              'channelList': [
                {
                  'channelId': ''
                }
              ]
            },
            'visible': true,
            'domId': 'dom1'
          }
        ]
        this.setPos()
        this.customizeTree(tvListJson);
        if(_this.stringList.length == 1){
          _this.realTimeVideoDialog([_this.stringList[0]]);
        }else{
          _this.ws.createCtrl(params);
          _this.playRealMonitorVideo();
        }
        if (_this.data != undefined && _this.data != null) {
          setTimeout( _this.rotation(_this.data.longitude, _this.data.latitude, _this.stringList),5000)
        }
      },
      rotation(lng,lat,list){
        rotation(lng,lat,list);
      },
      setPos() {
        let target = document.getElementById(this.domId)
        console.log(target, 'target')
        target.style.right = `${this.crtPosX}px`
        target.style.top = `${this.crtPosY}px`
        target.style.width = `${this.crtWidth}px`
        target.style.height = `${this.crtHeight}px`
        if (document.createEvent) {
          var event = document.createEvent('HTMLEvents')
          event.initEvent('resize', true, true)
          window.dispatchEvent(event)
        } else if (document.createEventObject) {
          window.fireEvent('onresize')
        }
      },
      destroy() { // 调用销毁控件接口
        if (!this.isLogin) {
          this.$modal.msgWarning('正在登陆客户端，请稍等......')
          return false
        }
        const ctrls = this.ws.ctrls.map(i => {
          if (i.ctrlCode === this.ctrl) {
            return i.ctrlCode
          }
        })
        this.ws.destroyCtrl(ctrls)
      },
      customizeTree(tvListJson) { // 调用控件接口树
        const config = this.ws.config
        const {loginIp, userCode} = config
        this.ws.postMessage('customizeTree', {
          loginIp,
          userCode,
          params: {
            array: tvListJson
          }
        })
      },
      /** ----------------------------------大华摄像头预览结束------------------------------------- */
      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // 创建播放实例
      initPlugin() {
        let that = this
        that.oWebControl = new WebControl({
          szPluginContainer: 'playWnd',                       // 指定容器id
          iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
          iServicePortEnd: 15909,
          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function () {                     // 创建WebControl实例成功
            that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
              dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
            }).then(function () {                           // 启动插件服务成功
              that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                cbIntegrationCallBack: cbIntegrationCallBack
              })

              that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                that.init()  // 创建播放实例成功后初始化
              })
            }, function () { // 启动插件服务失败
            })
          },
          cbConnectError: function () { // 创建WebControl实例失败
            that.oWebControl = null
            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
            initCount++
            if (initCount < 3) {
              setTimeout(function () {
                that.initPlugin()
              }, 3000)
            } else {
              $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            }
          },
          cbConnectClose: function (bNormalClose) {
            // 异常断开：bNormalClose = false
            // JS_Disconnect正常断开：bNormalClose = true
            console.log('cbConnectClose')
            that.oWebControl = null
          }
        })
      },
      //初始化
      init() {
        let that = this
        this.getPubKey(function () {
          ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
          var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
          var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
          var ip = '36.49.108.22'                           //综合安防管理平台IP地址，必填
          var playMode = 0                                  //初始播放模式：0-预览，1-回放
          var port = 1443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
          var snapDir = 'D:\\SnapDir'                       //抓图存储路径
          var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
          var layout = '3x3'                                //playMode指定模式的布局
          var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
          var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
          var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
          var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
          ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

          that.oWebControl.JS_RequestInterface({
            funcName: 'init',
            argument: JSON.stringify({
              appkey: appkey,                            //API网关提供的appkey
              secret: secret,                            //API网关提供的secret
              ip: ip,                                    //API网关IP地址
              playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
              port: port,                                //端口
              snapDir: snapDir,                          //抓图存储路径
              videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
              layout: layout,                            //布局
              enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
              encryptedFields: encryptedFields,          //加密字段
              showToolbar: showToolbar,                  //是否显示工具栏
              showSmart: showSmart,                      //是否显示智能信息
              buttonIDs: buttonIDs                       //自定义工具条按钮
            })
          }).then(function (oData) {
            that.oWebControl.JS_Resize(850, 615)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          })
        })
      },
      //获取公钥
      getPubKey(callback) {
        let that = this
        that.oWebControl.JS_RequestInterface({
          funcName: 'getRSAPubKey',
          argument: JSON.stringify({
            keyLength: 1024
          })
        }).then(function (oData) {
          console.log(oData)
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data
            callback()
          }
          125
        })
      },
//RSA加密
      setEncrypt(value) {
        var encrypt = new JSEncrypt()
        encrypt.setPublicKey(this.pubKey)
        return encrypt.encrypt(value)
      },
      //播放海康摄像头
      playhk(channelCode) {
        var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
        var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
        var transMode = 1                                      //传输协议：0-UDP，1-TCP
        var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

        this.oWebControl.JS_RequestInterface({
          funcName: 'startPreview',
          argument: JSON.stringify({
            cameraIndexCode: cameraIndexCode,                //监控点编号
            streamMode: streamMode,                         //主子码流标识
            transMode: transMode,                           //传输协议
            gpuMode: gpuMode,                               //是否开启GPU硬解
            wndId: wndId                                     //可指定播放窗口
          })
        })
      }
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
    }
  }

  // 推送消息
  function cbIntegrationCallBack(oData) {
    console.log(JSON.stringify(oData.responseMsg))
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .event-info-con {
    width: 100%;
    display: flex;

    .e-left {
      width: 32%;
    }

    .e-center {
      width: 30%;
      margin-left: 1%;

      .img-company {
        width: 100%;
        height: 18.3vh;

        img {
        }
      }
    }

    .e-right {
      margin-left: 1%;
      width: 45%;
    }

    .e-location-left {
      width: 28%;
      margin-top: 1rem;
    }

    .e-location-right {
      width: 71%;
      margin-top: 1.3rem;
      margin-left: 1rem;
    }
  }

  .el-dialog:not(.is-fullscreen) {
    margin-top: 5.5vh !important;
  }

  .bottom-menu-normal {
    max-width: 90%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 100000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
    background-size: cover;
    overflow: hidden;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      white-space: nowrap;

      i {
        font-size: 1rem;
        color: $inBlue;
        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
        margin-right: 0.2rem;
      }
    }

    .btm-m-con:hover {
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      filter: brightness(2.3);
      -webkit-transform: translateX(0.2rem);
      transform: translateX(0.2rem);
      transition: all 0.2s ease-in-out;

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }

    .m-l-none {
      .el-input__inner {
        margin-left: 0 !important;
      }
    }

  }

  /*海康*/
  html, body {
    padding: 0;
    margin: 0;
  }

  .playWnd {
    margin: -13px 0 0 255px;
    width: 850px; /*播放容器的宽和高设定*/
    height: 615px;
    border: 1px solid red;
  }

  .operate {
    margin-top: 24px;
  }

  .operate::after {
    content: '';
    display: block;
    clear: both;
  }

  .module {
    float: left;
    width: 340px;
    /*min-height: 320px;*/
    margin-left: 16px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
  }

  .module .item {
    margin-bottom: 4px;
  }

  .module input[type="text"] {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
  }

  .module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 100px;
    margin-left: 80px;
  }
  //电视墙视频摄像头预览弹层样式chuanSet
  .TVWallCustomWidth {
    width: 1500px !important;
    height: 750px !important;
    background: #04080c !important;
    box-shadow: $barShadow !important;
    border: 1px $barBorder !important;
    .el-dialog__header {
      padding: 15px 20px !important;
      background-image: -moz-linear-gradient($GradualGreen) !important;
      background-image: -webkit-linear-gradient($GradualGreen) !important;
      background-image: linear-gradient($GradualGreen) !important;
      box-shadow: $shadowTitle !important;

      .el-dialog__title {
        font-weight: bolder !important;
        color: #3cd7ef !important;
      }
    }
    .leader-info-container{
      // padding: .5rem;
      display: flex;
      height: 650px;
      width: 20rem;
      overflow-y: scroll;
      flex-direction: column;
      padding: 0 1rem;
      .leader-info-list-con{
        width: 100%;
        padding: 1rem;
        margin-bottom: .5rem;
        background-image: -moz-linear-gradient($GradualGreen)!important;
        background-image: -webkit-linear-gradient($GradualGreen) !important;
        background-image: linear-gradient($GradualGreen)!important;
        border: solid 1px #7dc2eb;
        box-shadow: $shadowListHover !important;
        border-radius: 5px;
        h4{
          margin: .4rem 0;
          color: $white;
        }
      }
      .leader-info-list-con:hover{
        background-image: -moz-linear-gradient($popupBG)!important;
        background-image: -webkit-linear-gradient($popupBG) !important;
        background-image: linear-gradient($popupBG)!important;
      }
    }
  }
</style>