<template>
  <div class="w-full h-full charginfo-index">
    <div class="charglink" @click="toSf">收费工作台</div>
    <div class="charglink" @click="tozh" v-if="showZhBtn" style="right: 100px;">智慧收费站</div>
    <!-- <div class="chargtoptext">全部高速公路</div> -->
    <div class="chargselect">
      <way-filter />
    </div>
    <div class="charginfo-left">
      <div class="charginfo-left-t">
        <important-data></important-data>
      </div>
      <div class="charginfo-left-b">
        <traffic-volumetb></traffic-volumetb>
      </div>
    </div>
    <div class="charginfo-right">
      <div class="charginfo-right-cell-t">
        <div class="ch-ri-it">
          <day-toll></day-toll>
        </div>
        <div class="ch-ri-it">
          <gantry-upstate></gantry-upstate>
        </div>
      </div>
      <div class="charginfo-right-cell-b">
        <div class="ch-ri-it">
          <gantry-surate></gantry-surate>
        </div>
        <div class="ch-ri-it">
          <day-pay></day-pay>
        </div>
      </div>
      <div class="charginfo-right-bottom">
        <traffic-volumehb></traffic-volumehb>
      </div>
    </div>
  </div>
</template>

<script>
// 收费重点数据
import importantData from "./component/importantData.vue";
// 通行量同比
import trafficVolumetb from "./component/trafficVolumetb.vue";
// 当日通行费/量排行
import dayToll from "./component/dayToll.vue";
// 门架数据上传状态
import gantryUpstate from "./component/gantryUpstate.vue";
// 门架成功率
import gantrySurate from "./component/gantrySurate.vue";
// 当日支付方式及客货对比
import dayPay from "./component/dayPay.vue";
// 通行量环比
import trafficVolumehb from "./component/trafficVolumehb.vue";
// 组织机构下拉
import WayFilter from "@/components/wayFilter/index.vue";

import { getLinke } from "@/api/chargeInfo.js";
import { generateKey } from "@/api/operation";
import { set, get } from "js-cookie";
export default {
  components: {
    WayFilter,
    importantData,
    trafficVolumetb,
    dayToll,
    gantryUpstate,
    gantrySurate,
    dayPay,
    trafficVolumehb
  },
  data() {
    return {
      link: ""
    };
  },
  computed: {
    showZhBtn() {
      const userList = ['18184778859', 'tjys']
      return userList.includes(this.$store.state.auth?.userInfo?.userCode)
    }
  },
  async mounted() {
    const data = await getLinke();

    const arr = data.msgContent.filter(item => item.sysCode == "SF");
    this.link = arr[0].url;
  },
  methods: {
    toSf() {
      generateKey().then(res => {
        window.open(
          `http://183.64.175.153:6005/platform.html?tokenKey=${res.data}`
        );
      });
    },
    tozh() {
      generateKey().then(res => {
        window.open(
          `http://183.230.176.125:8808/fvue/login?tokenKey=${res.data}`
        );
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
div {
  box-sizing: border-box;
}
.charginfo-index {
  background: url("@/assets/images/ChargeInfo/charginfobg.png");
  background-size: 100% 100%;
  padding-top: 55px;
  padding-bottom: 40px;
  display: flex;
}
.charginfo-left {
  width: vw(850);
}
.charginfo-left-t {
  width: 100%;
  height: vh(644);
  // background: palevioletred;
}
.charginfo-left-b {
  width: 100%;
  height: vh(350);
  // background: green;
}
.charginfo-right {
  width: vw(1070);
  // height: vh(955);
  // background: peachpuff;
}
.charginfo-right-cell-t {
  display: flex;
  width: 100%;
  height: vh(353);
}
.charginfo-right-cell-b {
  display: flex;
  width: 100%;
  height: vh(291);
}
.ch-ri-it {
  width: 50%;
  height: 100%;
  // border: 1px solid blue;
}
.charginfo-right-bottom {
  width: 100%;
  height: vh(350);
  // background: cadetblue;
}
.charglink {
  position: absolute;
  top: 10px;
  right: 0;
  margin-right: 300px;
  width: vw(90);
  height: vh(38);
  background: url("@/assets/images/ChargeInfo/sfgzttz.png");
  background-size: 100% 100%;
  font-size: 13px;
  text-align: center;
  line-height: vh(38);
  z-index: 999;
  cursor: pointer;
}
.chargtoptext {
  position: absolute;
  top: 15px;
  right: 380px;
  font-size: 16px;
  font-family: "TRENDS";
}
.chargselect {
  position: absolute;
  top: 2px;
  left: 10px;
  z-index: 999;
}
</style>