<template>
   <div class="w-full h-full flex manageGS">
    <div class="workbench" @click="goWorkbench">经营工作台</div>
    <div class="letfContent" :style="{ width: '450px' }">
      <way-filter class="selectBox"/>
      <operatingCosts class="operating" ></operatingCosts>
      <middleCost class="middle" ></middleCost>
      <singleKmCost class="singleKm" ></singleKmCost>
     
    </div>
    <div class="content" :style="{ width: 'calc(100% - 840px)' }">
     
      <profitRental class="hendSrc"> </profitRental>
      <incomeCost class="content-bottom"></incomeCost>
    </div>
    <div class="rightContent" :style="{ width: '450px' }">
      <pikeInconme class="pike-Income" ></pikeInconme>
      <manageIncome class="manage-Income" ></manageIncome>
      <singleKmIncome class="singleKm-Income" ></singleKmIncome>
    </div>
  </div>

 
</template>

<script>
import WayFilter from '@/components/wayFilter/index.vue';
import operatingCosts from './component/operatingCosts.vue'
import middleCost from './component/middleCost.vue'
import singleKmCost from './component/SingleKmCost.vue'
import incomeCost from './component/incomeCost.vue'
import pikeInconme from './component/pikeIncome.vue'
import manageIncome from './component/manageIncome.vue'
import singleKmIncome from './component/singKmIncome.vue'
import profitRental from "./component/profitRental.vue"
import { generateKey } from '@/api/operation';
export default {
components:{
  WayFilter,
    operatingCosts,
    middleCost,
    singleKmCost,
    incomeCost,
    pikeInconme,
    manageIncome,
    singleKmIncome,
    profitRental
},
methods:{
      // 跳转经营工作台
      goWorkbench(){
      generateKey().then((res)=>{
      console.log("跳转经营工作台",res.data);
      if(res.data){
     window.open(`http://183.64.175.153:28880/#/QXGL/manage/data?tokenKey=${res.data}`)
      }
    }) 
}
}
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.manageGS{
  padding-top: 50px;
  /* 底色 */
	background-color: #063053;
	/* 标准写法 */
    background: linear-gradient(to right,#040c15, #091c2f, #040c14);
}
.letfContent{
  width: vw(400);
  height: 100%;
}

.operating{
   width: 100%;
   height: vh(340);
   margin-top: 20px;
  //  margin-bottom: 10px;
}
.middle{
   width: 100%;
   height: vh(270)
}
.singleKm{
  width: 100%;
  height: vh(390);
}
.content{
 width:vw(840) ;
 height: 100%;

  

}

.content-bottom{
  width: 100%;
  height: vh(350);
}

.rightContent{
  width:vw(420);
  height: 100%
}
.pike-Income{
  width: 100%;
  height: vh(340);
  margin-top: 20px;

}
.manage-Income{
   width: 100%;
  height:vh(275);
}
.singleKm-Income{
   width: 100%;
  height:vh(390);
}
.selectBox{
  position: absolute;
  top: 15px;
  z-index: 99;
}
.workbench{
  position: absolute;
  top: 15px;
  right:0;
  margin-right: 300px;
  width: vw(90);
  height: vh(30);
  line-height: vh(28);
  text-align: center;
  background-color: #2b5d99;
  border: 1px solid #418dd6;
  border-radius: 15px;
  z-index: 999;
  cursor:pointer;
}
</style>
