hi-ucs/front/src/views/home/infrastructurePage.vue

<!-- 基础设施 -->
<template>
  <div class="infrastructrueBox">
    <!-- 选项卡 -->
    <div class="infrastructrue-tab">
      <div v-for="(item, index) in tabList" :key="index" class="tabBox">
        <b class="leftType">{{ item.title }}</b>
        <el-button
          @click="nullClick"
          v-if="item.title == '视频标签'"
          type="small"
        >
          清空
        </el-button>
        <span
          v-for="itemContent in item.content"
          :key="itemContent"
          @click="tabClick(index, itemContent)"
          :class="
            clickList[index].content.indexOf(itemContent.labelName) != -1 ||
            clickList[index].content.indexOf(itemContent) != -1
              ? 'down'
              : ''
          "
        >
          {{ itemContent.labelName || itemContent }}
        </span>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map-contain" v-if="showMap">
      <video-surveillance></video-surveillance>
    </div>
    <!-- 功能行 -->
    <div class="infrastructrue-content" v-if="!wrjFlag">
      <!-- 表格数据统计 -->
      <div class="contentNum">
        <p>
          备选
          <span>{{ pagination.total }}</span>
          个
        </p>
        <!-- <i class="boundary"></i> -->
        <p>
          已选
          <span>{{ selectedRowKeys.length }}</span>
          个
        </p>
      </div>
      <!-- 右侧 -->
      <div class="contentRight">
        <!-- 搜索@search="onSearch" -->
        <div class="searchInput">
          <a-input-search
            v-model:value="mapSearchParam.cameraName"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @change="getCamera"
          />
          <a-button
            type="primary"
            style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
            @click="clean"
          >
            重置
          </a-button>
        </div>
        <i class="boundary"></i>
        <!-- 添加至申购车 -->
        <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
          添加至申购车
        </a-button>
        <!-- 一键申请 -->
        <a-button type="primary" @click="apply" class="buttonAdd">
          一键申请
        </a-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="infrastructrue-table" v-if="!wrjFlag">
      <a-table
        class="ant-table-striped"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ y: tableHeight }"
        rowKey="channelId"
        :rowClassName="
          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          // onChange: onSelectChange,
          onSelect: onSelectChange,
          onSelectAll: onSelectAll,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a
              @click="
                openVideo(
                  record.channelCode ||
                    record.channelId ||
                    record.channelCode.channelId
                )
              "
            >
              预览
            </a>
          </template>
        </template>
      </a-table>
    </div>
    <div class="infrastructrue-table" v-else-if="isXiHaiAn && wrjFlag">
      <a-table
        class="ant-table-striped"
        :dataSource="dataSource2"
        :columns="columns2"
        :scroll="{ y: tableHeight }"
        rowKey="channelId"
        :rowClassName="
          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :pagination="dataSource2.length"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a
              @click="goToWrj(record)"
              style="margin-right: 10px"
              v-if="record.type !== '单兵设备'"
            >
              控制台
            </a>
            <a @click="goToApply(record)" style="margin-right: 10px" v-else>
              申请
            </a>
            <a @click="showWrj(record)">详情</a>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="visible"
      title="视频预览"
      :width="950"
      destroyOnClose
    >
      <template #footer></template>
      <div style="width: 100%; display: flex; justify-content: center">
        <div style="width: 100%; height: 100%">
          <vue3VideoPlay v-bind="options" />
        </div>
      </div>
    </a-modal>
    <a-modal
      wrapClassName="wrj"
      v-model:visible="wrjVisible"
      :width="1000"
      :title="wrjName + '详情'"
      @ok="wrjVisible = false"
    >
      <template v-if="dataSource2[0].type !== '单兵设备'">
        <div v-for="wrj in wrjData" :key="wrj.name">
          <div
            style="
              font-size: 20px;
              font-weight: 600;
              margin: 10px 0;
              text-align: center;
            "
          >
            {{ wrj.name }}
          </div>
          <div
            style="padding: 0 30px"
            v-for="(value, key) in wrj.attribute"
            :key="value"
          >
            {{ key + '：' + value }}
          </div>
        </div>
      </template>
      <template v-else>
        <div v-for="(db, key) in wrjData" :key="key">
          <template v-if="typeof db == 'object'">
            <div
              style="
                font-size: 20px;
                font-weight: 600;
                margin: 10px 0;
                text-align: center;
              "
            >
              {{ key }}
            </div>
            <div
              style="padding: 0 30px"
              v-for="(value, key2) in db"
              :key="value"
            >
              {{ key2 + '：' + value }}
            </div>
          </template>
          <template v-else>
            <div style="padding: 0 30px">
              {{ key + '：' + db }}
            </div>
          </template>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
  import VideoSurveillance from '@/views/home/videoSurveillance'
  // import { getCategoryTreePage } from '@/api/personalCenter'
  // import { dataType } from 'element-plus/es/components/table-v2/src/common'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import { ref, reactive, onMounted } from 'vue'
  import {
    getCameraByParentId,
    getStreamByChannelCode,
    getCameraAllLabel,
  } from '@/api/videoSurveillance'
  import { getCameraByCondition } from '@/api/file'
  import { sgcInsert } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const whoShow1 = ref(whoShow)
  const options = reactive({
    width: '700px', //播放器宽度
    height: '400px', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    type: 'm3u8', // 视频源类型
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ], //显示所有按钮,
  })
  let visible = ref(false)
  const jcssType = ref(router.currentRoute.value.query.type)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 300, //每页中显示10条数据
    showSizeChanger: true,
  })
  const mapSearchParam = ref({
    // 地图搜索初始化数据
    parentId: '',
    cameraName: '',
    checkStatus: '1',
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    gpsX: '',
    gpsY: '',
    radius: '',
    labelCodes: [],
  })
  const showMap = ref(true)
  onMounted(() => {
    if (jcssType.value) {
      tabClick(0, jcssType.value)
      if (jcssType.value == '视频资源') {
        getCamera()
      }
    } else {
      tabClick(0, '视频资源')
      getCamera()
    }

    mybus.off('getListByParentId')
    mybus.on('getListByParentId', (parentId) => {
      mapSearchParam.value.parentId = parentId
      getCamera()
    })
    mybus.off('getListByMap')
    mybus.on('getListByMap', (param) => {
      mapSearchParam.value.gpsX = param.gpsX
      mapSearchParam.value.gpsY = param.gpsY
      mapSearchParam.value.radius = param.radius
      getCamera()
    })
  })
  const selectedList = ref([])
  const selectedRowKeys = ref([])
  const tabList = ref([
    {
      title: '设施类型',
      content: ['视频资源', '云资源', '感知资源'],
    },
    {
      title: '视频标签',
      content: [],
    },
  ])
  const wrjVisible = ref(false)
  const wrjName = ref('')
  const wrjData = ref([])
  const showWrj = (data) => {
    wrjName.value = data.wrjName
    wrjData.value = data.details
    wrjVisible.value = true
  }
  const goToWrj = (data) => {
    window.open(data.url)
  }
  const goToApply = (data) => {
    console.log(data, dept)
    let arr = [
      {
        arr: [
          {
            description:
              '申请单兵手持便携终端，提告前端人员执法透明度，加强执法人员与指挥中心实时沟通。',
            resourceId: 'dbsb',
            resourceName: data.wrjName,
            type: '单兵设备',
          },
        ],
        deptId: dept.deptId,
        deptName: dept.deptName,
      },
    ]
    localStorage.setItem('applyList', JSON.stringify(arr))
    router.push({
      path: '/apply',
    })
  }
  if (whoShow1.value.itShowXiHaiAn) {
    tabList.value[0].content.push('无人机')
    tabList.value[0].content.push('单兵设备')
  }
  const openVideo = (id) => {
    console.log('打开视频', id)
    const param = {
      key: id,
    }
    getStreamByChannelCode(param).then((res) => {
      console.log(res)
      visible.value = true
      options.src = res.data.data
    })
  }
  // const dataTypeList = () => {
  //   if (tabList.value[0].content.indexOf('视频资源') != -1) {
  //     tabList.value[1].content = ['123344', '213124']
  //   }else if(tabList.value[0].content.indexOf('云资源') != -1){
  //     tabList.value[1].content = ['5555', '666']

  //   }
  // }
  // dataTypeList()
  //初始化数据
  const init = () => {
    tabList.value.map((item) => {
      let params = {
        title: item.title,
        content: [],
      }
      clickList.value.push(params)
    })
    mybus.off('tranferToList')
    mybus.on('tranferToList', () => {
      console.log('获取到的列表数据')
    })
  }
  let clickList = ref([]) //存储点击的tab
  init()
  //表格的高度
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name) => {
    console.log(
      '点击tab================>',
      indexFather,
      name,
      clickList.value[indexFather]
    )
    selectedRowKeys.value = []
    selectedList.value = []
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (name == '视频资源') {
        tableHeight.value = 330
        showMap.value = true
        tabList.value[1].title = '视频标签'
      } else if (name == '云资源') {
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        tabList.value[1].title = '云资源分类'
      } else if (name == '感知资源') {
        tableHeight.value = 330
        showMap.value = true
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
        1
      )
    } else {
      if (name == '视频资源') {
        wrjFlag.value = false
        tableHeight.value = 330
        showMap.value = true
        tabList.value[1].content = []
        clickList.value[1].content = []
        tabList.value[1].title = '视频标签'
        clickList.value[indexFather].content[0] = name
        dataSource.value = []
        dataSource2.value = []
        getCameraAllLabel().then((res) => {
          res.data.data.forEach((val) => {
            tabList.value[1].content.push({
              labelCode: val.labelCode,
              labelName: val.labelName,
            })
          })
        })
        // 改变查询摄像头接口的labelCode数组
        mapSearchParam.value.labelCodes = []
        clickList.value[1].content.map((item) => {
          mapSearchParam.value.labelCodes.push(item.labelCode)
        })
        console.log('选中的标签code', mapSearchParam.value)
        mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
        getCamera()
      } else if (name == '云资源') {
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        tabList.value[1].title = '云资源分类'
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = [
          '云主机',
          '算力主机',
          '对象存储',
          '堡垒机',
          '防火墙',
          '网闸',
          '负载均衡',
          '公网IP',
        ]
        wrjFlag.value = false
      } else if (name == '感知资源') {
        tableHeight.value = 330
        showMap.value = true
        clickList.value[1].content = []
        pagination.value.total = 0
        tabList.value[1].title = '感知资源分类'
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = []
        dataSource.value = []
        dataSource2.value = []
        wrjFlag.value = false
      } else if (name == '无人机') {
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].title = ''
        tabList.value[1].content = []
        uavAndIndividualSoldier.uavList.map((wrj) => {
          dataSource2.value.push({
            wrjName: wrj.name,
            wrjState: '已申请',
            url: wrj.url,
            details: wrj.details,
          })
        })
        wrjFlag.value = true
      } else if (name == '单兵设备') {
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].title = ''
        tabList.value[1].content = []
        uavAndIndividualSoldier.individualSoldier.map((db) => {
          dataSource2.value.push({
            wrjName: db.name,
            wrjState: '未申请',
            details: db.details,
            type: db.type,
          })
        })
        wrjFlag.value = true
      } else {
        clickList.value[indexFather].content.push(name)
      }
    }
    // 改变查询摄像头接口的labelCode数组
    mapSearchParam.value.labelCodes = []
    clickList.value[1].content.map((item) => {
      mapSearchParam.value.labelCodes.push(item.labelCode)
    })
    console.log('选中的标签code', mapSearchParam.value)
    mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
    // let fatherName = ref('视频资源')
    // if (name == '视频资源' || name == '云资源' || name == '感知资源') {
    //   fatherName.value == name
    // }
    // if (fatherName.value == '视频资源') {
    //   getCamera()
    // } else {
    //   dataSource.value = []
    //   pagination.value.total = 0
    // }
    if (name == '云资源' || name == '感知资源') {
      dataSource.value = []
      dataSource2.value = []
      pagination.value.total = 0
    } else {
      if (name !== '无人机' && name !== '单兵设备') {
        getCamera()
      }
    }
  }
  // 清空
  const nullClick = () => {
    clickList.value[1].content = []
    mapSearchParam.value.labelCodes = ''
    getCamera()
    console.log('hhhhhhhh')
  }
  // 重置
  const clean = () => {
    mapSearchParam.value.cameraName = ''
    getCamera()
  }
  // 一键申请
  const dept = reactive({})
  // eslint-disable-next-line no-undef
  if (infrastructure) {
    // eslint-disable-next-line no-undef
    dept.deptId = infrastructure.deptId
    // eslint-disable-next-line no-undef
    dept.deptName = infrastructure.deptName
  }
  const apply = () => {
    if (selectedRowKeys.value.length != 0) {
      console.log('一键申请', selectedList.value)
      let arr = [
        {
          arr: [
            {
              description: '',
              note1: JSON.stringify(selectedList.value),
              resourceId: '1522550195055828996',
              resourceName: '摄像头列表',
              type: '基础设施',
            },
          ],
          deptId: dept.deptId,
          deptName: dept.deptName,
        },
      ]
      localStorage.setItem('applyList', JSON.stringify(arr))
      router.push({
        path: '/apply',
      })
    } else {
      message.error('请选择需要申请的数据')
    }
  }
  // // 添加至购物车
  // const addShopCar = () => {
  //   console.log('添加至购物车')
  // }
  const isXiHaiAn = whoShow1.value.itShowXiHaiAn
  const wrjFlag = ref(false)
  const getCamera = () => {
    console.log('初始化调用')
    console.log('不选左侧树的时候不调用接口', mapSearchParam.value)
    if (!whoShow1.value.itShowXiHaiAn) {
      getCameraByParentId(mapSearchParam.value).then((res) => {
        console.log('RRRRRRRRRR', res.data.data)
        dataSource.value = res.data.data
        pagination.value.total = res.data.count
      })
    } else {
      let params = {
        regionId:
          mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
        pageNum: mapSearchParam.value.pageNum,
        pageSize: mapSearchParam.value.pageSize,
        name: mapSearchParam.value.cameraName || '',
        longitude: mapSearchParam.value.gpsX || '',
        latitude: mapSearchParam.value.gpsY || '',
        radius: mapSearchParam.value.radius || '',
      }
      let paramsFather = ''
      let i = 1
      for (var key in params) {
        if (params[key] === '') {
          delete params[key]
        } else {
          if (i != 1) {
            paramsFather += `&${key}=` + params[key]
            i += 1
          } else if (i == 1) {
            paramsFather += `${key}=` + params[key]
            i += 1
          }
        }
      }
      getCameraByCondition(paramsFather).then((res) => {
        dataSource.value = res.data.data
        pagination.value.total = res.data.count
        console.log('根据parent查询摄像头', res.data.data)
      })
    }
  }
  //加入申购车
  const addShoppingCart = () => {
    if (selectedList.value.length > 0) {
      sgcInsert({
        delFlag: '0',
        resourceId: '8888888880000000001',
        note1: selectedList.value,
        // userId: userId.value,
      }).then((res) => {
        console.log(res)
        message.success('添加申购车成功！')
        mybus.emit('getSgcNum')
      })
    } else {
      message.error('请选择需要添加申购车的数据')
    }
  }
  // 表格
  const dataSource = ref([])
  const dataSource2 = ref([])
  const columns = ref([
    {
      title: '名称',
      dataIndex: 'channelName',
      key: 'channelName',
    },
    {
      title: '归属',
      dataIndex: 'nodeName',
      width: '60%',
      key: 'nodeName',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '10%',
      key: 'channelId',
    },
  ])
  const columns2 = ref([
    {
      title: '名称',
      dataIndex: 'wrjName',
      key: 'wrjName',
    },
    {
      title: '申请状态',
      dataIndex: 'wrjState',
      width: '60%',
      key: 'wrjState',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '20%',
      key: 'wrjName',
    },
  ])
  // const allClick = ref([])
  const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
    console.log('hahhahah', record, selected, selectedRows, nativeEvent)
    if (selected) {
      if (selectedRowKeys.value.length == 300) {
        message.warning('最多只能添加300个摄像头！')
      } else {
        selectedList.value.push(record)
        selectedRowKeys.value.push(record.channelCode || record.channelId)
      }
    } else {
      selectedList.value = selectedList.value.filter(
        (item) => item.idtCameraChannel !== record.idtCameraChannel
      )
      selectedRowKeys.value.splice(
        selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
        1
      )
    }
    console.log('已选中======================>', selectedList.value)
    // selectedList.value = selectedRows
    // allClick.value = selectedRowKeys
  }
  const onSelectAll = (selected, selectedRows, changeRows) => {
    if (selected) {
      changeRows.map((val) => {
        selectedList.value.push(val)
        selectedRowKeys.value.push(val.channelCode || val.channelId)
      })
      if (selectedRowKeys.value.length > 300) {
        message.warning('最多只能添加300个摄像头！')
        changeRows.map((val) => {
          selectedList.value = selectedList.value.filter(
            (item) => item.idtCameraChannel !== val.idtCameraChannel
          )
          selectedRowKeys.value.splice(
            selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
            1
          )
        })
      }
    } else {
      changeRows.map((val) => {
        selectedList.value = selectedList.value.filter(
          (item) => item.idtCameraChannel !== val.idtCameraChannel
        )
        selectedRowKeys.value.splice(
          selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
          1
        )
      })
    }
    console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
  }
  const handleTableChange = (val) => {
    pagination.value.current = val.current
    pagination.value.pageSize = val.pageSize
    mapSearchParam.value.pageNum = val.current
    mapSearchParam.value.pageSize = val.pageSize
    getCamera()
    // this.getTableList()
  }
</script>
<style lang="less" scoped>
  .infrastructrueBox {
    padding: 0.2rem;
    // background: #f3f5f9;
    background: #ffffff;
    /* padding: 0.16rem; */
    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
    .infrastructrue-tab {
      // background: #ffffff;
      // padding: 0.2rem;
      // border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
      span {
        display: inline-block;
        height: 0.24rem;
        font-size: 0.14rem;
        line-height: 0.24rem;
        border: 0;
        border-radius: 0.12rem;
        margin-left: 0.1rem;
        text-align: center;
        color: #666666;
        cursor: pointer;
        padding: 0 0.08rem;
      }
      .leftType {
        margin: 0.2rem 0;
        margin-right: 0.06rem;
      }
      .down {
        background: #0087ff;
        color: #ffffff;
      }
      .tabBox {
        margin-bottom: 0.16rem;
      }
      .tabBox:last-of-type {
        margin-bottom: 0;
      }
    }
    .infrastructrue-content {
      display: flex;
      justify-content: space-between;
      padding: 0.14rem 0.2rem 0.1rem;
      background: #ffffff;
      .contentNum {
        position: relative;
        display: flex;
        p {
          color: #666666;
          padding: 0;
          margin: 0;
          span {
            color: #0087ff;
            font-size: 0.2rem;
            font-weight: 500;
          }
        }
        p:first-of-type {
          padding-right: 0.16rem;
          margin-right: 0.16rem;
        }
        .boundary {
          position: absolute;
          left: 0.9rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
      }
      .contentRight {
        position: relative;
        display: flex;
        justify-content: space-between;
        .boundary {
          position: absolute;
          left: 3.74rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
        .searchInput {
          display: flex;
          margin-right: 0.2rem;
          .ant-input-search {
            max-width: 4rem;
          }
          :deep(.ant-input) {
            width: 2rem;
            height: 0.36rem;
            font-size: 0.14rem;
            color: #b2b2b2;
            background: #f5f5f5;
          }
          :deep(.ant-input-group-addon) {
            display: inline-block;
            margin-left: 0.1rem;
            .ant-input-search-button {
              width: 0.8rem;
              height: 0.36rem;
              background: #0558e1;
              border-radius: 0.04rem;
              font-size: 0.14rem;
            }
          }
          :deep(.ant-btn) {
            background: #0558e1;
            border-radius: 0.04rem;
          }
        }
        .buttonAdd {
          background: #0558e1;
          border-radius: 0.04rem;
          height: 0.36rem;
          border-color: #0558e1;
          margin-left: 0.1rem;
        }
      }
    }
    .infrastructrue-table {
      .ant-table-striped :deep(.table-striped) td {
        background-color: #fafafa;
      }
    }
    .map-contain {
      // width: 9.46rem;
      height: 4.1rem;
      margin-left: 0.16rem;
      position: relative;
    }
  }
</style>
<style lang="less">
  .wrj {
    .ant-modal-body {
      height: 700px !important;
      overflow-y: scroll !important;
    }
  }
</style>