<template>
  <div class="kbleft" @click="videoShow=false">
    <CbgCpm>
      <template v-slot:leftTit>
        <div>
          风险等级
        </div>
      </template>
      <template v-slot:rightTit>
        <!--        <div>-->
        <!--          <span>当月</span>-->
        <!--          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--          <span>累计</span>-->
        <!--          &nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--        </div>-->
      </template>
      <template v-slot:content>
        <div class="fxdj">
          <div class="fxdjContent" ref="fxdjdom">
            <div class="er">{{resultDataRisk.lv2}}</div>
            <div class="san">{{resultDataRisk.lv3}}</div>
            <div class="si">{{resultDataRisk.lv4}}</div>
            <div class="wu">{{resultDataRisk.lv5}}</div>
          </div>
        </div>
      </template>
    </CbgCpm>
    <CbgCpm>
      <template v-slot:leftTit>
        <div>
          视频信息
        </div>
      </template>
      <template v-slot:rightTit>
        <!--        <div style="width: 400px">-->
        <!--          <span>在建</span>-->
        <!--          &nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--          <span>待建</span>-->
        <!--          &nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--          <span>投产</span>-->
        <!--          &nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--        </div>-->
      </template>
      <template v-slot:content>
        <div class="spxx">
          <div class="spxxContent" ref="spxxdom">
            <div class="tableHead">
              <div></div>
              <div>单项名称</div>
              <div>视频位置</div>
              <div>风险等级</div>
            </div>
            <div class="tableData" :scrollTop="scrollTop">
              <div v-for="(item,index) in splist" class="dataList" @click.stop="getVideoPlay(item)">
                <div class="icon">
                  <img src="../../../../assets/bdscreenImg/bBg/videoIcon.png" alt="">
                </div>
                <div>
                  <el-tooltip
                      :teleported="false"
                      effect="dark"
                      :content="item.singleProjectName"
                      placement="top-start"
                  >
                    {{ (12<1*item.singleProjectName.length)? (item.singleProjectName.substring(0,12)+'...'):item.singleProjectName}}
                  </el-tooltip>
                </div>
                <div>
                  <el-tooltip
                      :teleported="false"
                      effect="dark"
                      :content="item.toolBoxTalkAddress"
                      placement="top-start"
                  >
                    {{(12<1*item.toolBoxTalkAddress.length)? (item.toolBoxTalkAddress.substring(0,12)+'...'):item.toolBoxTalkAddress}}
                  </el-tooltip>
                </div>
                <div>
                  {{(12<1*item.reAssessmentRiskLevel.length)? (item.reAssessmentRiskLevel.substring(0,12)+'...'):item.reAssessmentRiskLevel}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </CbgCpm>
    <CbgCpm>
      <template v-slot:leftTit>
        <div>
          环水保问题管理
        </div>
      </template>
      <template v-slot:rightTit>
        <div @click="openImg" v-show="showStatus">
          影像资料
        </div>
      </template>
      <template v-slot:content>
        <div class="wzxx">
          <div class="tableHead">
            <div>单项名称</div>
            <div>问题来源</div>
            <div>问题类型</div>
            <div>问题分类</div>
            <div>整改状态</div>
          </div>
          <div class="tableData">
            <div class="onerow" v-for="(item,index) in hsblistArr" :style="{backgroundColor:index%2!=0?'':'#142D3E'}">
              <el-tooltip
                  :teleported="false"
                  effect="dark"
                  :content="item.singlePrjName"
                  placement="top-start"
              >
                <span class="item" v-if="item.singlePrjName">
                  {{ (6<1*item.singlePrjName.length)? (item.singlePrjName.substring(0,6)):item.singlePrjName}}
                </span>
              </el-tooltip>
              <div class="item">{{item.questionSource}}</div>
              <div class="item">{{item.questionType}}</div>
              <div class="item">{{item.questionClassification}}</div>
              <div class="item">{{item.status}}</div>
            
            </div>
          </div>
        </div>
      </template>
    </CbgCpm>
    <CbgCpm>
      <template v-slot:leftTit>
        <div>
          物资信息
        </div>
      </template>
      <template v-slot:rightTit>
        <div @click="openWzybz">
          物资一本帐
        </div>
      </template>
      <template v-slot:content>
        <div class="wzxx">
          <div class="tableHead">
            <div>物资类型</div>
            <div>厂家</div>
            <div>计划</div>
            <div>招标</div>
            <div>履约</div>
            <div>入账数量</div>
            <div>入账金额</div>
          </div>
          <div class="tableData">
            <div class="onerow" v-for="(item,index) in qqzlyjList" :style="{backgroundColor:index%2!=0?'':'#142D3E'}">
              <el-tooltip
                  :teleported="false"
                  effect="dark"
                  :content="item.name"
                  placement="top-start"
              >
                <span class="item" v-if="item.name">
                  {{ (6<1*item.name.length)? (item.name.substring(0,6)):item.name}}
                </span>
              </el-tooltip>
              <div class="item">{{item.manufacturer}}</div>
              <div class="item">
                <div class="circlewz" :style="{backgroundColor: item.jh==true?'#00FFA8':'grey'}">
                </div>
              </div>
              <div class="item">
                <div class="circlewz"  :style="{backgroundColor: item.zb==true?'#00FFA8':'grey'}">
                </div>
              </div>
              <div class="item">
                <div class="circlewz"  :style="{backgroundColor: item.ly==true?'#00FFA8':'grey'}">
                </div>
              </div>
              <div class="item">
                {{item.receivedQuantity}}
              </div>
              <div class="item">
                {{item.receivedAmount}}万元
              </div>
            </div>
          </div>
        </div>
      </template>
    </CbgCpm>
    
    <div class="videoArea" v-show="videoShow">
<!--      <div class="buttonArea">-->
<!--       收起-->
<!--      </div>-->
      <div id="videoAreaC">
      </div>
    </div>
  
    <el-dialog style="transform: translateY(-5vh)" v-model="imageShow" @close="daClose" :showClose="false" :close-on-click-modal="true" :close-on-press-escape="false">
      <div v-show="imageShow" class="imageShow" id="ccgh">
        <div class="listArea" >
          <el-tree
              :indent="0"
              :data="treeData"
              :props="treeProps"
              :height="1400"
              node-key="id"
              :default-expanded-keys=defaultArr
              :default-checked-keys=defaultSelected
              icon="icon-tree"
              @node-click="handleNodeClick"
          >
            <template #default="scope">
              <div style="width: 100%;overflow:visible!important;">
                <el-tooltip
                    popper-class="popperClass"
                    effect="dark"
                    append-to-body
                    :content="scope.node.label"
                    placement="top-start"
                >
                  <div class="custom-node">
                    <span v-if="scope.node.level==1">{{scope.node.label}}</span>
                    <span v-else class="zy">{{scope.node.label}}</span>
                  </div>
                </el-tooltip>
              </div>
          
            </template>
          </el-tree>
        </div>
        <div class="imageArea">
          <div v-show="isImgUrlShow" :style="{
            width:'3190px',height: '1900px',position: 'absolute',zIndex: '100',
            backgroundColor:currentType=='1'?'rgba(0,0,0,0.8)':''
          }"   @click="isImgUrlShow=false">
            <img :src="imgUrl" alt=""   :style="{width: '100%',height: '100%',objectFit: currentType=='1'?'contain':''}">
          </div>
          <div class="imgArea" ref="scrollArea">
            <div :style="{
              position:'relative',
              height: percentHeight,
              width: percentWidth,
            }" v-for="item in xlpics">
              <div style="position: absolute;top:10px;left:27px;height:100px;width: 100%;display: flex;justify-content: flex-start;align-items: flex-start;color:#22f8e6;font-size: 60px">{{item.name}}</div>
              <img :src="'data:image/jpeg;base64,'+item.base64" alt=""   :style="{width: '100%',height: '100%',objectFit: currentType=='1'?'contain':''}" @click="setImageUrl(item.base64)">
            </div>
          </div>

        </div>
      </div>
    </el-dialog>
    <el-dialog style="transform: translate(-1600px,-100px)"  v-model="wzybz" @close="wzybzClose" :showClose="false" :close-on-click-modal="true" :close-on-press-escape="false">
      <diyTable :columnProps="wzybzProps"
                @close="dialogClose"
                :ispagion="false"
                :title="kTitle"
                :tableData="kgList"
                :pagionProp="pagionProp"
                @currentChange="currentChange"
                v-model:dialogShow="wzybz"
      >
      </diyTable>
    </el-dialog>



  </div>
</template>

<script setup name="bgright">
import CbgCpm from "../../CbgCpm";
import * as echarts from 'echarts'
import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
import { riskLevel as xLRiskLevel,listTdythInfo,getVideoInformation as getXLVideoInformation,eWCInfo as xLEWCInfo,listMaterials as listXLMaterials,getCameraInfo} from "@/api/pageC/sbd";
import useAppStore from "@/store/modules/app.js";
const $store = useAppStore();
import { getPicInfo } from '@/api/pageB/environmental/index'
import {prjInfo,oneAccountMaterials} from '../../../../api/pageC/sbd'
//物资一本账
import diyTable from '@/components/common/diytable/indexCopy'
let kTitle=ref('物资一本账')
let wzybz=ref(false)
const kgList = ref([])
const pagionProp = ref({})
let pageNum=ref(1)
const currentChange = (val) => {
  pageNum.value = val
  // queryList()
}
const openWzybz=()=>{
  oneAccountMaterials().then(res=>{
    console.log(res,'一本账')
    kgList.value=res.data
  })
  wzybz.value = true;
}
const wzybzClose=()=>{
  wzybz.value=false
}
const wzybzProps = [
  {label: "物料号", prop: "wlh", minWidth: "180px"},
  {label: "物料描述", prop: "wlms", minWidth: "120px"},
  {label: "单位", prop: "dw", minWidth: "120px"},
  {label: "设计数量", prop: "sjsl", minWidth: "100px"},
  {label: "采购数量", prop: "cgsl", width: "200px"},
  {label: "采购批次", prop: "cgpc", width: "150px"},
  {label: "采购申请号行号", prop: "cgsqhhh", minWidth: "100px"},
  {label: "采购订单号行号", prop: "cgddhhh", minWidth: "70px"},
  {label: "厂家名称", prop: "cjmc", minWidth: "100px"},
  {label: "采购误差检验", prop: "cgwcjy", minWidth: "100px"},
  {label: "计划采购进度", prop: "jhcgjd", minWidth: "100px"},
  {label: "实际采购进度", prop: "xtcgjd", minWidth: "100px"},
  {label: "进度预警", prop: "juyj", minWidth: "100px"},
];
const dialogClose= () => {
  wzybz.value = false;
}
//物资一本账----------------------


let infoData=ref('')
let showStatus=ref(false)
const getprjInfo=()=>{
  prjInfo(appStore.currentJumpInfo.prjCode).then(res=>{
    console.log(res,'项目工程列表1')
    infoData.value=res.data
    showStatus.value =  (/武清北马庄220千伏输变电工程|天津北辰南麻瘩220kV输变电工程|宝坻望都220kV输变电工程/).test(infoData.value.prjName)
    console.log(showStatus.value,'匹配')
  })
}
// onMounted(()=>{
//   ()
// })
let defaultArr=ref([])
let defaultSelected=ref([])

let imageShow=ref(false)
let treeData=ref([])
let treeProps=ref({
  value: 'id',
  label: 'name',
  children: 'childInfo',
})

const openImg=()=>{
  listTdythInfo({
    prjId:'',
    type:typeFild.value
  }).then(res=>{
    console.log(res,'数据列表')
    defaultArr.value=[treeData.value[0].id]
    defaultSelected.value=[treeData.value[0].childInfo[0].id]
    treeData.value=res.data
    handleNodeClick(treeData.value[0].childInfo[0])
    showImg()
  })
}
let gg=ref(1)
let percentWidth=ref('100%')
let percentHeight=ref('1876px')
let xlpics=ref([])
let imgSrc=ref('')
let scrollArea=ref(null)
let imgUrl=ref('')
let imageRef=ref(null)
let isImgUrlShow=ref(false)
const setImageUrl=(base)=>{
  imgUrl.value =  'data:image/jpeg;base64,'+base
  isImgUrlShow.value=true
}
let daClose=()=>{
  currentType.value='0'
  isImgUrlShow.value=false
}
let currentType=ref('0')
const handleNodeClick = (data) => {
  console.log(data)
  isImgUrlShow.value=false
  xlpics.value =[]
  if(data.name.includes('通知单')){
    currentType.value='1'
  }else {
    currentType.value='0'
  }
  if (data.id) {
    defaultSelected.value = [data.id]
    getPicInfo(data.id).then(res => {
      console.log(res,'系列图')
      // var blob = new Blob([res], {type: 'image/jpeg'});
      // var url = URL.createObjectURL(blob);
      // document.querySelector("#img_show").src = url;
      // imgSrc.value = url
      console.log(Math.floor(res.data.length%2),'做种宽度')
      //最终一行几个
      res.data.length%2==0?gg.value=Math.floor(res.data.length/2):gg.value=Math.ceil(res.data.length/2)
      percentWidth.value=100/gg.value+'%'
      res.data.length==1?percentHeight.value='1876px':percentHeight.value=1876/2+'px'
      console.log(percentWidth.value,'做种宽度')
      xlpics.value = res.data
      
    })
    
  } else {
    return
  }
}
const closeImg=()=>{
  imageShow.value=false
  imgSrc.value=ref('')
}
const showImg=()=>{
  imageShow.value=true
}


//监控
let pageIndex = 0;
let currentVideoId = ref("");
let selected = ref("");
let token = "";
let env = import.meta.env.MODE;
//统一视频平台的网关ip
let videoIp = env == "production" ? "20.34.32.7" : "";
let videoPort = env == "production" ? "80" : "";
let ak = env == "production" ? "piadmin" : "";
//base64加密后的密码sk
let sk = env == "production" ? "Q3FteWcxc2RzcyE=" : "";
let videoShow=ref(false)
const getVideoPlay=(item)=>{
  if (!item.cameraId){
    ElMessage.error('无布控球信息')
  }
  console.log(item,'摄像头')
  videoShow.value=true
  getCameraInfo(item.cameraId).then(res=>{
    console.log(res,'摄像头查找')
    demo.videoPlay(
        1,
        1,
        res.data.id,
        "",
        res.data.name,
        1
    );
  })
}
// let videoIp =''
// let videoPort=''
// let ak =''
// let sk =''
let obj = {
  ak,
  sk,
};
let demo;
let onEventNotifyss = function (eventType, eventContext, info) {
  if (eventType == 102) {
    selected.value = eventContext.windowIndex;
    console.log(selected.value)
    currentVideoId.value = eventContext.devCode;
  }
  if (eventType == 100) {
    currentVideoId.value = eventContext.devCode;
  }
};
import EventBus from "@/common/eventBus";
onMounted(() => {
  $.ajax({
    async: false,
    data: JSON.stringify(obj),
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    url: `http://${videoIp}:${videoPort}/uvp-backend-common/api/v1/authorization?timestamp=${new Date().getTime()}`,
    success: function (result) {
      token = result.resultValue.token;
    },
    error: function (err) {
      console.log(err.statusText);
      console.log("视频ip异常");
      ElMessage.error("视频ip端口异常");
    },
  });
  demo = new VideoObj(
      "videoAreaC",
      1 ,
      videoIp,
      +videoPort,
      token,
      "video",
      onEventNotifyss,
      true,
      ak
  );
  // demo.videoPlay(1, 1, "031550000003100248", '', '单项名称', 1)
  // demo.videoPlay(2, 1, "031510000003010960", '', '110kV朝阳路1-1#变-南-球机2', 1)
  // demo.videoPlay(3, 1, "030110000003020075", '', '110kV朝阳路1-1#变-南-球机3', 1)
  // demo.videoPlay(4, 1, "030110000003020081", '', '110kV朝阳路1-1#变-北-球机4', 1)
  // demo.videoPlay(5, 1, "030110000003020154", '', '110kV朝阳路1-1#变-北-球机5', 1)
  // demo.videoPlay(6, 1, "030110000003020159", '', '110kV朝阳路1-1#变-北-球机6', 1)
  // demo.videoPlay(7, 1, "030110000003020158", '', '110kV朝阳路1-1#变-北-球机7', 1)
  // demo.videoPlay(8, 1, "030110000003020157", '', '110kV朝阳路1-1#变-北-球机8', 1)
  // demo.videoPlay(9, 1, "030110000003020156", '', '110kV朝阳路1-1#变-北-球机9', 1)
  demo.getWindowInfo(1);
  for (let key = 0; key < 9; key++) {
    demo.setRightClickMenuShow(key * 1 + 1, "rightMenu01", false);
    demo.setRightClickMenuShow(key * 1 + 1, "rightMenu02", true);
    demo.setRightClickMenuShow(key * 1 + 1, "rightMenu03", true);
    demo.setRightClickMenuShow(key * 1 + 1, "rightMenu04", false);
    demo.setRightClickMenuShow(key * 1 + 1, "rightMenu05", false);
  }
  // EventBus.on("nodeInfo", (node) => {
  //   console.log(demo, "demo", node, node.nodePro.data.id);
  //   // if(isopen.value){
  //   demo.videoPlay(
  //       selected.value,
  //       1,
  //       node.nodePro.data.id,
  //       "",
  //       node.nodePro.data.name,
  //       1
  //   );
  //   console.log(
  //       "播放了第" +
  //       selected.value +
  //       "个窗口" +
  //       "工程id是" +
  //       node.nodePro.data.id +
  //       "工程名称是" +
  //       node.nodePro.data.name
  //   );
  //   // }else {
  //   //   demo.videoPlay(3, 1, "030110000003020075", '', '110kV朝阳路1-1#变-南-球机3', 1)
  //   //   console.log('播放了第'+3+'个窗口'+'工程id是'+"030110000003020075"+'工程名称是'+'110kV朝阳路1-1#变-南-球机3')
  //   // }
  // });
  // EventBus.on("jieBtn", (node) => {
  //   dialogVisible.value = node.diaFlag;
  // });
  //测试截图代码
  // // 获取 id 为 ailabel1 的元素
  // var ailabel = document.getElementById("ailabel1");
  
  // // 设置背景图像
  // ailabel.style.backgroundImage = "url(/public/common.png)";
  // ailabel.style.backgroundRepeat = "no-repeat";
  // ailabel.style.backgroundSize = "100%";
});















const splist=ref([])
//视频信息
let scrollTop=ref(0)
let inter=ref(null);
const getVideoInfo=()=>{
  clearInterval(inter.value)
  getXLVideoInformation(
    appStore.currentJumpInfo.prjCode
  ).then((res) => {
    splist.value = res.data;
    let length=splist.value.length
    let allTop=length*81-81
    inter.value = setInterval(()=>{
      scrollTop.value>=allTop?scrollTop.value=0:scrollTop.value+=81
    },2000)
  })
}
let riskData=ref({})

onMounted(()=>{
})
onUnmounted(()=>{
  clearInterval(inter.value)
  clearInterval(setTimer.value)
  clearInterval(setWzTimer.value)
})

import usestore  from '@/store/modules/screenA'
import {ElMessage} from "element-plus";
const appStore=usestore()
let currentJumpInfo= computed(() => {
  return appStore.currentJumpInfo
});
let resultDataRisk=ref({
  lv2:'0',
  lv3:'0',
  lv4:'0',
  lv5:'0',
})
const getxLRiskLevel=()=>{
  xLRiskLevel(
      appStore.currentJumpInfo.prjCode
  ).then(res=>{
    console.log(res,'gcgk11')
    resultDataRisk.value=res.data
  })
}
//环水保
let hsblist = ref([])
let hsblistArr = ref([])
let setTimer = ref(null)
let index=0
const getxLEWCInfo=()=>{
  clearInterval(setTimer.value)
  xLEWCInfo(
      appStore.currentJumpInfo.prjCode
  ).then(res=>{
    console.log(res,'gcgetxLEWCInfogk11')
    hsblist.value=res.data
    hsblistArr.value=hsblist.value.slice(0,2)
    setTimer.value = setInterval(()=>{
      let result = hsblist.value.slice(index, index + 2);
      if (result.length < 2) {
        result = result.concat(hsblist.value.slice(0, 2 - result.length));
      }
      console.log(result,'定时');
      hsblistArr.value=result
      console.log(hsblistArr.value[0])
      index = (index + 2) % hsblist.value.length;
    }, 3000);
  })
}
//物资信息
let wzxxList=ref([])
let setWzTimer = ref(null)
let indexWz=0
const qqzlyjList=ref([
  {a:'xxx物资',b:'xx厂家',h:true,c:false,e:false,f:100,g:'10,000'},
  {a:'xx物资',b:'xxx厂家',h:true,c:true,e:false,f:100,g:'10,000'},
])
const getlistXLMaterials=()=>{
  clearInterval(setWzTimer.value)
  listXLMaterials(appStore.currentJumpInfo.prjCode).then(res=>{
    console.log(res,'物资信息')
    wzxxList.value=res.data
    qqzlyjList.value=wzxxList.value.slice(0,2)
    setWzTimer.value = setInterval(()=>{
      let result = wzxxList.value.slice(indexWz, indexWz + 2);
      if (result.length < 2) {
        result = result.concat(wzxxList.value.slice(0, 2 - result.length));
      }
      console.log(result,'定时');
      qqzlyjList.value=result
      console.log(qqzlyjList.value[0])
      indexWz = (indexWz + 2) % wzxxList.value.length;
    }, 3000);
  })
}
let typeFild=ref('')
watch(currentJumpInfo,(a,b)=>{
  console.log(a,b,'变了一')
  console.log('变了1');
  if(a.name.includes('北马庄')){
    typeFild.value=1
  }else if(a.name.includes('南麻瘩')){
    typeFild.value=2
  }else if(a.name.includes('望都')){
    typeFild.value=3
  }else(
      typeFild.value=''
  )
  listTdythInfo({
    prjId:'',
    type:typeFild.value
  }).then(res=>{
    console.log(res,'数据列表')
    treeData.value=res.data
  })
  //风险
  getxLRiskLevel()
  //视频
  getVideoInfo()
  //环水保
  getxLEWCInfo()
  //物资信息
  getlistXLMaterials()
  //
  getprjInfo()
})
</script>

<style scoped lang="less">
@import "./css/index";
.videoArea{
  width:1200px;
  height: 1200px;
  position: absolute;
  z-index: 999999;
  left: -1200px;
}
/deep/.el-dialog{
  background-color: transparent;
}
.buttonArea{
  width: 100%;
  height: 100px;
  background-color: #0E9CFF;
  display: flex;
  align-items: center;
  padding-right: 20px;
  justify-content: flex-end;
  
}
#videoAreaC{
  width:1200px;
  height: 1200px;
  //background-color: #002aff;
}
.imageShow{
  width: 3900px;
  height: 1700px;
  background-image: url("@/assets/images/tcdt1.png");
  background-size: 100%;
  position:absolute ;
  z-index: 999;
  display: flex;
  .listArea{
    position: relative;
    overflow-y: auto;
    width: 600px;
    height: 1900px;
    margin-top: 40px;
    margin-left: 20px;
    background-color: transparent;
    padding-left: 40px;
    scrollbar-width: none;
    
    
    
    /* 滚动条整体 */
    ::-webkit-scrollbar {
      display: none;
    }
    
    .el-tree{
      position: relative;
      background-color: transparent;
      /* 自定义滚动条样式 */
      --el-tree-node-hover-bg-color: rgba(0, 255, 205, 0.5);
      /deep/.el-popper{
        font-size: 32px;
        float: right;
      }
      
    }
    .el-tree::before{
      content: '';
      margin-top: 50px;
      height: calc(100% - 100px);
      position: absolute;
      width: 30px;
      border-right: 1px dashed  rgba(0, 255, 205, 0.5);
    }
    .zy{
      position: relative;
    }
    .zy:before{
      position: absolute;
      content: '';
      height: 40px;
      width: 48px;
      transform: translate(-65px,-17px);
      border-bottom: 1px dashed  rgba(0, 255, 205, .7);
    }
    ///deep/.el-tree-node__expand-icon {
    //  padding-right: 20px;
    //  font-size: 32px;
    //  color: #00FFCC;
    //}
    /deep/.el-tree-node__content{
      height: 100px;
      
      .el-tree-node__label{
        font-size: 32px;
        color: #00FFCC;
        padding-left: 10px;
      }
    }
  }
  /deep/.el-tree-node__children{
    padding-left: 30px;
    .el-tree-node__content{
      height: 100px;
      display: flex;
      .el-icon{
        width: 40px;
        height: 40px;
      }
      .el-tree-node__label{
        font-size: 30px;
        width: 450px;
        color: white;
      }
    }
    
  }
  .imageArea{
    width:  3190px;
    height: 100%;
    margin-top: 40px;
    margin-left: 30px;
    .closeArea{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      padding-top: 20px;
      img{
        width: 50px;
        height: 50px;
      }
    }
    .imgArea {
      height: 1900px;
      width: 3190px;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-content: space-between;
      flex-wrap: wrap;
    }
  }
}
/deep/.el-icon{
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-left: 10px;
  background: url('@/assets/images/ss.png');
  background-size: 100% 100% !important;
}

/deep/ .expanded{
  background: url('@/assets/images/zk.png');
  background-size: 100% 100% !important;
}
/deep/ .is-leaf{
  background-image: none;
  background-size: 100% 100% !important;
}
/deep/ .el-tree-node__expand-icon {
  transform: initial;
  transition: auto;
}

</style>
