<template>
  <!-- background-color: #020814; -->
  <div class="big-container" style="background-color: rgb(1, 19, 70);">
    <div class="box" ref="box">
      <div class="home">
        <div class="container">
          <!-- 头部内容 -->
          <el-row class="top">
            <el-col :span="4">
              <div class="top-left">
                <el-radio-group v-model="timer" size="small" @change="timerChange(timer)">
                  <el-radio-button label="day">本日</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="quarter">本季</el-radio-button>
                  <el-radio-button label="year">本年</el-radio-button>
                  <el-radio-button label="all">开累</el-radio-button>
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="top-search">
                <TreeSelect :options="org" :props="{ label: 'name', value: 'id', children: 'child', icon: 'icon' }" :value="selectedTreeStr" @input="updateSelectedTree" @id-change="handleIdChange" @name-change="handleNameChange" @level-change="handleLevelChange"></TreeSelect>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="top-title">
                <div class="t-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;山西路桥智能物料数据平台</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="top-right">
                <div class="time">{{ timeNow }}</div>
              </div>
            </el-col>
          </el-row>
          <!-- echarts图表位置划分 -->
          <div class="center">
            <div class="c-left">
              <div class="c-left-one" @click="toReceipt('receipt')">
                <div class="content">
                  <TitleCmp />
                  <div class="myBorder" style="height: 87%;">
                    <div class="hz-top">
                      <NumberCmp class="number" :numAttr="{ num: this.Rnowtrains, big: 0.3,  styleColer: '#fefefe', }" />
                      <div class="times">次</div>
                    </div>
                    <div class="hz-center">
                      上期收料车次 &nbsp;<span> {{ this.Rlasttrains }}</span>&nbsp;次
                    </div>
                    <div class="hz-bottom">
                      同比增长
                      <span>
                        {{ this.Rnum }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="c-left-two" @click="toDelivery('delivery')">
                <div class="content">
                  <TitleCmp content="发料车次" />
                  <div class="myBorder" style="height: 87%;">
                    <div class="hz-top">
                      <NumberCmp class="number" :numAttr="{
                    num: this.Dnowtrains,
                    big: 0.3,
                    styleColer: '#fefefe',
                    }" />
                      <div class="times">次</div>
                    </div>
                    <div class="hz-center">
                      上期收料车次 &nbsp;<span>{{ this.Dlasttrains }}</span>&nbsp;次
                    </div>
                    <div class="hz-bottom">
                      同比增长
                      <span>
                        {{ this.Dnum }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="c-left-three">
                <div class="content">
                  <TitleCmp content="材料种类" />
                  <div class="myBorder">
                    <ul class="materials">
                      <li v-for="(item, index) in list" :key="index" :class="{ active: activeIndex === index }" @click="handleItemClick(item, index)">
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="c-left-four" @click="toDetailOne('detailone')">
                <div class="content">
                  <TitleCmp :content="selectedContent" />
                  <div class="myBorder" style="height: 91%;">
                    <div class="gj" style="padding-left: 40px">
                      <div class="gj-left">
                        <!-- <div class="gj-yong">设计施工量&nbsp;(吨)</div>
                        <div class="gj-yong-number" style="margin-bottom: -50px;">
                          {{  Number(this.designsum).toFixed(2) }}
                        </div> -->
                        <div class="gj-yong">计划用量&nbsp;(吨)</div>
                        <div class="gj-yong-number">
                          {{  Number(this.planuse).toFixed(2) }}
                        </div>
                        <div class="gj-ru">验收入库&nbsp;(吨)</div>
                        <div class="gj-ru-number">
                          {{ Number(this.accept ).toFixed(2) }}
                        </div>
                      </div>
                      <div class="gj-right"></div>
                      <div class="check">完成比例</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 项目金额 各种站数量 质检组件 -->
            <div class="c-center">
              <map-container :mergedData="mergedData" class="container"></map-container>
            </div>
            <div class="c-right">
              <div class="c-right-one" @click="toHnt('hnt')">
                <div class="content right-transform">
                  <TitleCmp content="混凝土" />
                  <div class="myBorder" style="height: 89%;">
                    <div class="c-right-one-content" style="padding-left: 40px">
                      <div class="one-content-left">
                        <div class="plan-use">设计用量&nbsp;(吨)</div>
                        <div class="plan-use-number">
                          {{  Number(isNaN(this.earth.planweight) ? 0 : this.earth.planweight).toFixed(2) }}&nbsp;万
                        </div>
                        <div class="plan-use" style="margin-top: 80px;">实际用量&nbsp;(吨)</div>
                        <div class="plan-use-number">
                          {{ isNaN(Number(this.acc.proweigh / 10000)) ? 0 : Number(this.acc.proweigh / 10000).toFixed(2) }}&nbsp;万
                          <!-- {{ Number(isNaN(this.earth.realweight) ? 0 : this.earth.realweight ).toFixed(2) }}&nbsp;万 -->
                        </div>
                      </div>
                      <div class="concrete"></div>
                      <div style="width: 182px;height: 80px;position: fixed;right: 18%;top: 14%;font-size: 44px;">使用比例</div>
                    </div>
                  </div>
                  <!-- <div style="height: 89%;" class="myBorder">
                    <div style="display: flex; justify-content: space-transform: translateY(20%);">
                      <p class="bottom-second-message">
                        设计用量&nbsp;(方)
                        <span style="font-size: 40px">
                          {{ this.earth.planweight }}
                          万
                        </span>
                      </p>
                      <p class="bottom-second-message">
                        实际用量&nbsp;(方)
                        <span style="font-size: 40px">
                          {{ this.earth.realweight }}
                          万
                        </span>
                      </p>
                    </div>
                    <div class="right-one-number">
                      {{ Number(this.HPercent).toFixed(0) }}
                      %
                    </div>
                    <div class="concrete"></div>
                  </div> -->
                </div>
              </div>
              <div class="c-right-two" @click="toProduct('product')">
                <div class="content">
                  <TitleCmp content="混凝土生产" />
                  <div style="height: 89%;" class="myBorder">
                    <div class="produce"></div>
                  </div>
                </div>
              </div>
              <div class="c-right-three" @click="toWater('water')">
                <div class="content right-transform">
                  <TitleCmp content="水稳" />
                  <div class="myBorder" style="height: 89%;">
                    <div class="c-right-one-content" style="padding-left: 40px">
                      <div class="one-content-left">
                        <div class="plan-use">设计用量&nbsp;(吨)</div>
                        <div class="plan-use-number">
                          {{  Number(isNaN(this.water.planweight) ? 0 : this.water.planweight).toFixed(2) }}&nbsp;万
                        </div>
                        <div class="plan-use" style="margin-top: 80px;">实际用量&nbsp;(吨)</div>
                        <div class="plan-use-number">
                          {{ Number(isNaN(this.water.realweight) ? 0 : this.water.realweight ).toFixed(2) }}&nbsp;万
                        </div>
                      </div>
                      <div class="stability"></div>
                      <div style="width: 182px;height: 80px;position: fixed;right: 11%;top: 20%;font-size: 44px;">使用比例</div>
                    </div>
                  </div>
                  <!-- <div style="height: 89%;" class="myBorder">
                    <div style="display: flex; justify-content: spacetransform: translateY(20%)">
                      <p class="e-font" style="width:264px">
                        设计用量&nbsp;(吨)
                        <span style="font-size: 40px">
                          {{ this.water.planweight }}万
                        </span>
                      </p>
                      <p class="e-font" style="width:264px">
                        实际用量&nbsp;(吨)
                        <span style="font-size: 40px">
                          {{ this.water.realweight }}万
                        </span>
                      </p>
                    </div>
                    <div class="bottom-four-number">
                      {{ this.WPercent }}
                      %
                    </div>
                    <div class="stability"></div>
                  </div> -->
                </div>
              </div>
              <div class="c-right-four" @click="toAccounting('accounting')">
                <div class="content">
                  <TitleCmp content="混凝土签收" />
                  <div style="height: 89%;" class="myBorder">
                    <div class="payless"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-one" @click="toDetailTwo('detailtwo')">
              <div class="content">
                <TitleCmp :content="selectedContent" />
                <div style="height: 89%;" class="myBorder">
                  <div class="rebar"></div>
                </div>
              </div>
            </div>
            <div class="bottom-two" @click="toDetailThree('detailthree')">
              <div class="content">
                <TitleCmp :content="selectedContent" />
                <div style="height: 89%;" class="myBorder">
                  <div class="c-right-one-content" style="margin-left: 30px;">
                    <div class="one-content-left">
                      <!-- <div>
                        <p style="font-size: 14px">验收入库量&nbsp;(吨)</p>
                        <p style="font-size: 14px; font-weight: 700; transform: translateY(25%)">
                          {{ Number(this.accept ).toFixed(2) }}
                        </p>
                      </div> -->
                      <div class="plan-use">出库数量&nbsp;(吨)</div>
                      <div class="plan-use-number">{{ Number(isNaN(this.deliverysum) ? 0 : this.deliverysum).toFixed(2) }}</div>
                      <div class="plan-use" style="margin-top: 80px;">库存数量&nbsp;(吨)</div>
                      <div class="plan-use-number">{{ Number(isNaN(this.goods.inventorysum) ? 0 : this.goods.inventorysum).toFixed(2) }}</div>
                    </div>
                    <div class="bottom-tow-photo"></div>
                    <div style="position: fixed;bottom: 24.4%;left: 25.5%;font-size: 44px;color: #fff;">库存占比</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-three">
              <div class="content">
                <TitleCmp content="实时过磅数据" />
                <div style="height: 89%;" class="myBorder">
                  <div class="bt-message">
                    <!-- 下三表格 换成ul li -->
                    <div class="bt-title">
                      <ul class="bt-title-ul">
                        <li style="transform: translateX(-10%);">项目名称</li>
                        <li style="transform: translateX(-20%);">材料名称</li>
                        <li>规格型...</li>
                        <li>确认量</li>
                        <li>车牌号</li>
                        <li>收料时间</li>
                      </ul>
                    </div>
                    <div class="bt-table-message">
                      <ul v-for="(item, index) in this.overData" :key="index" class="bt-table-message-ul scroll-container">
                        <li class="truncate">{{ item.org_name }}</li>
                        <li class="truncate">{{ item.material_name }}</li>
                        <li class="truncate">{{ item.material_model }}</li>
                        <li class="truncate">{{ item.confirm_net_quantity }}</li>
                        <li class="truncate">{{ item.plate_number }}</li>
                        <li class="truncate">{{ item.recorded_date }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-four" @click="toLiqing('liqing')">
              <div style="transform: translateX(-1%)" class="content right-transform">
                <TitleCmp content="沥青混凝土" />
                <div class="myBorder" style="height: 89%;">
                  <div class="c-right-one-content" style="padding-left: 40px">
                    <div class="one-content-left">
                      <div class="plan-use">设计用量&nbsp;(吨)</div>
                      <div class="plan-use-number">
                        {{  Number(isNaN(this.bitumen.planweight) ? 0 : this.bitumen.planweight).toFixed(2) }}&nbsp;万
                      </div>
                      <div class="plan-use" style="margin-top: 80px;">实际用量&nbsp;(吨)</div>
                      <div class="plan-use-number">
                        {{ Number(isNaN(this.bitumen.realweight) ? 0 : this.bitumen.realweight).toFixed(2) }}&nbsp;万
                      </div>
                    </div>
                    <div class="bitumen"></div>
                    <div style="width: 182px;height: 80px;position: fixed;right: 11%;top: 20%;font-size: 44px;">使用比例</div>
                  </div>
                </div>
                <!-- <div style="height: 89%;" class="myBorder">
                  <div style="display: flex; justify-content: space-between; tratranslate(6%,20%)">
                    <p class="e-font" style="width:264px">
                      设计用量&nbsp;(吨)
                      <span style="font-size: 40px">
                        {{ this.bitumen.planweight }}万
                      </span>
                    </p>
                    <p class="e-font" style="transform:translateX(-17%); width: 264px;">
                      实际用量&nbsp;(吨)
                      <span style="font-size: 40px">
                        {{ this.bitumen.realweight }}万
                      </span>
                    </p>
                  </div>
                  <div class="bottom-four-number" style=" transform: scale(3);position: fixed;top: 64%; right: 44%;">
                    {{ this.BPercent }}
                    %
                  </div>
                  <div class="bitumen"></div>
                </div> -->
              </div>
            </div>
            <div class="bottom-five">
              <div class="content">
                <TitleCmp content="预警信息" />
                <div style="height: 89%;" class="myBorder">
                  <div class="yujingCharts" style="margin-top: 15px;">
                    <div class="yujing-item" v-for="(item,index) in counters" :key="index" @click="toWarning('warning',item.type)">
                      <div class="yujing-item-title">
                        <div class="yujing-item-title-icon" :style="{ backgroundColor: item.color }"></div>
                        <div style="margin-left: 10px;">{{item.name}}</div>
                      </div>
                      <div class="yujing-item-number">{{item.value}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleCmp from "@/components/TitleCmp.vue";
import NumberCmp from "@/components/NumberCmp.vue";
import TreeSelect from "@/components/TreeSelect.vue";
// 引入地图子组件
import MapContainer from "@/components/MapContainer.vue";
import * as echarts from "echarts";
import { countHunNingTu, countFinsh, countHNt, countMore, enterNumberName, enterBottomNumberName } from "@/utils/count"
// 引入后端接口
import {
  tree,      // 组织id
  getRDInfo, // 收发料
  getHSLInfo, // 混凝土沥青水稳
  getMaterialInfo,  // 材料集
  getMaterialDescon, // 设计施工量
  geConcreteInfo, // 混凝土生产核算
  getQualityInfo, // 质检
  getRealtimeInfo, // 过磅
  getWarnInfo, // 预警接口
  getToken
} from "../api";
import "echarts-liquidfill";
export default {
  name: "HomeView",
  components: {
    TitleCmp,
    NumberCmp,
    MapContainer,
    TreeSelect,
  },
  data () {
    return {
      // 左三数据
      list: [
        "钢筋",
        "钢板",
        "型钢",
        "钢绞线",
        "钢管",
        "水泥",
        "碎石",
        "砂子",
        "粉煤灰",
        "锚具",
        "防水板",
        "油料",
        "桥梁支座",
        "止水带",
        "沥青",
        "砼外如剂",
        "中空锚杆",
        "路面外加剂",
      ],
      timeNow: "2023-8-23 15:14:29",
      timer: "day",
      // 左3被选中li的角标
      activeIndex: 0,
      // 保存左3被选择内容
      selectedContent: "钢筋",
      // 收发车次数据
      Rnowtrains: null,
      Rlasttrains: null,
      Dnowtrains: null,
      Dlasttrains: null,
      Rnum: null,
      Dnum: null,
      // 混凝土沥青水稳
      righttw: [],
      earth: {},
      water: {},
      bitumen: {},
      HPercent: null,
      WPercent: null,
      BPercent: null,
      overData: [], // 过磅信息
      all: {},
      pro: {},
      acc: {},
      goods: {},
      designsum: 0, // 设计施工量
      planuse: null, // 录入计划量
      accept: 0, // 验收入库量
      deliverysum: 0, // 实际出库量
      plansum: 0,// 库存量
      yearPlanUse: 0, //年录入计划量
      acceptance: 0, //验收率
      treeData: [],
      // 公司搜索部分
      selectedTreeStr: '',
      org: [],
      id: 1,
      level: 1,
      name: "山西路桥建设集团有限公司",
      orgDefaultId: 1,
      number5: null,  // 混凝土
      number4: null,  // 沥青
      number3: null,  // 水稳
      qualityData: [
        { gradationPass: 0, gradationFail: 0 },
        { densityPass: 0, densityFail: 0 },
        { rebarPass: 0, rebarFail: 0 },
      ], // 质检信息
      enterNumber: '本日计划施工量',
      enterBottomNumber: '本日计划',
      counters: [
        { name: '设备异常预警', value: 0, type: 1, color: '#5c7bd9' },
        { name: '收料方式预警', value: 0, type: 2, color: 'orange' },
        { name: '超量预警', value: 0, type: 3, color: '#008c8c' },
        { name: '超合同量预警', value: 0, type: 4, color: '#ffdc60' },
        { name: '缺合同预警', value: 0, type: 5, color: 'yelow' },
        { name: '无申请预警', value: 0, type: 6, color: '#f1d92e' }
      ],
    };
  },
  async created () {
    this.getToken();
    this.getCurrentTime();
  },
  computed: {
    // 使用计算属性合并父组件的数据
    mergedData () {
      return { id: this.id, timer: this.timer, level: this.level };
    },
  },
  async mounted () {
    // 页面挂载完 计算缩放比例
    this.$refs.box.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`
    window.addEventListener('resize', () => {
      this.$refs.box.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`
    });

    // 访问接口部分
    this.StartRD();
    this.StartHSL();
    this.StartCon(); // 获取混凝土生产核算信息
    this.getQualityInfo(); // 获取质检信息
    this.handleItemClick("钢筋", 0);
    this.showtree();
    this.StartRealTime();

    // 图标部分
    this.useFan(); // 下二图例
    this.useRebar();
    localStorage.setItem("id", this.id)
    localStorage.setItem("name", this.name)
    localStorage.setItem("selectedContent", this.selectedContent)

  },
  methods: {
    // 获取token接口()
    async getToken () {
      // var res = await getToken({})
      // console.log("拿到token了", res.data);
      // localStorage.setItem("Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ3ZWJtYW4udGlueXdhbi5jbiIsImF1ZCI6IndlYm1hbi50aW55d2FuLmNuIiwiaWF0IjoxNzAyNDM2MjAyLCJuYmYiOjE3MDI0MzYyMDIsImV4cCI6MTcwMzA0MTAwMiwiZXh0ZW5kIjp7ImlkIjoiMTY5MjAyODYxNSIsIm5hbWUiOiJzaGFueGlsdXFpYW9jZXNoaSIsIm5pY2tuYW1lIjoic2hhbnhpbHVxaWFvY2VzaGkiLCJzYWx0IjoicTNsYmEyMyMkTU95MTAiLCJhdmF0YXIiOiIiLCJyb2xlX2lkIjoxMDAwMDksImxhc3RfbG9naW5faXAiOiIiLCJsYXN0X2xvZ2luX3RpbWUiOiIyMDIzLTEyLTEzIDEwOjU2OjAyIiwibGFzdF9sb2dpbl9hZ2VudCI6IiIsInN0YXR1cyI6MSwiY3JlYXRlX3RpbWUiOiIyMDIzLTA4LTE0IDIzOjU2OjU1IiwidXBkYXRlX3RpbWUiOiIyMDIzLTEyLTEzIDEwOjU2OjA0IiwicGVyc29uSWQiOm51bGwsIm1vYmlsZSI6bnVsbCwiZWxlY3Ryb25pY19TaWduYXR1cmUiOiJodHRwOi8vc3hscS1pbmZvLmtzMy1jbi1iZWlqaW5nLmtzeXVuY3MuY29tL3N0b3JhZ2UvcmViYXIvMjAyMzEyMDUyMTU0MzI4NTAyODIucG5nIiwicm9sZXMiOjEwMDAwOSwic2Vzc2lvbl9sYXN0X3VwZGF0ZV90aW1lIjoxNzAyNDM2MjAyfX0.2Dx7O3cceZucCIMiWGD00VjawCMelBD9uQUxu_UXGQ8")

    },
    // 计算缩放比例
    getScale (w = 3840, h = 2160) {
      const ww = window.innerWidth / w
      const wh = window.innerHeight / h
      return ww < wh ? ww : wh
    },
    // 实时显示时间
    getCurrentTime () {
      setInterval(() => {
        const time = new Date();
        const year = time.getFullYear();
        const month = (time.getMonth() + 1 + "").padStart(2, 0);
        const day = (time.getDate() + "").padStart(2, 0);
        const hour = (time.getHours() + "").padStart(2, 0);
        const minute = (time.getMinutes() + "").padStart(2, 0);
        const second = (time.getSeconds() + "").padStart(2, 0);
        this.timeNow = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      }, 1000); // 每隔1秒更新一次时间
    },
    // 水滴
    useWaterImg () {
      //水滴图
      const ratio = parseInt(this.acceptance); //占比数值  总数为100
      const ratioLength = 2; //波浪数量
      const ratioArr = [];
      // 百分比数小于100 显示绿色
      // 百分比数小于大于100 显示红色
      let ratioColor
      if (ratio > 100) {
        ratioColor = ["#FF0000", "#B22222"]; //波浪内红色
      } else {
        ratioColor = ["#388383", "#61d9af"]; //波浪内绿色
      }
      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      const option = {
        title: {
          text: ratio + "%",
          textStyle: {
            fontSize: 25,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              color: "#011346",
            },
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: false,
            },
          },
          {
            //粗的外圈
            type: "pie",
            radius: ["100%", "95%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: ratioColor[1],
                    },
                    {
                      offset: 1,
                      color: ratioColor[1],
                    },
                  ]),
                  borderColor: this.acceptance > 100 ? "#FF0000" : ratioColor[1], // 根据条件设置边框颜色
                },
              },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".gj-right"));
      myChart.setOption(option);
    },
    //混凝土(右一)
    useSemicircle () {
      const ratio = parseInt(this.HPercent); //占比数值  总数为100
      const ratioLength = 2; //波浪数量
      const ratioArr = [];
      // 百分比数小于100 显示绿色
      // 百分比数小于大于100 显示红色
      let ratioColor
      if (ratio > 100) {
        ratioColor = ["#FF0000", "#B22222"]; //波浪内红色
      } else {
        ratioColor = ["#388383", "#61d9af"]; //波浪内绿色
      }
      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      const option = {
        title: {
          text: ratio + "%",
          textStyle: {
            fontSize: 25,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              color: "#011346",
            },
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: false,
            },
          },
          {
            //粗的外圈
            type: "pie",
            radius: ["100%", "95%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: ratioColor[1],
                    },
                    {
                      offset: 1,
                      color: ratioColor[1],
                    },
                  ]),
                  borderColor: this.acceptance > 100 ? "#FF0000" : ratioColor[1], // 根据条件设置边框颜色
                },
              },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".concrete"));
      myChart.setOption(option);
    },
    // 混凝土生产(右二)
    useProduce () {
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.pro.month,
          axisLabel: {
            color: "#FFFFFF",
            fontSize: 16,
            fontWeight: 800,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#FFFFFF",
            fontSize: 16,
            fontWeight: 800,
            margin: "-1",
            formatter: function (value) {
              return countHunNingTu(value)
            },
          },
        },
        series: [
          {
            data: this.pro.monthdata,
            type: "line",
            areaStyle: {},
            itemStyle: {
              color: "#0000FF", // 设置柱状图颜色为蓝色
            },
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".produce"));
      myChart.setOption(option);
    },
    // 水稳（右三）
    useWater () {
      const ratio = parseInt(this.WPercent); //占比数值  总数为100
      const ratioLength = 2; //波浪数量
      const ratioArr = [];
      // 百分比数小于100 显示绿色
      // 百分比数小于大于100 显示红色
      let ratioColor
      if (ratio > 100) {
        ratioColor = ["#FF0000", "#B22222"]; //波浪内红色
      } else {
        ratioColor = ["#388383", "#61d9af"]; //波浪内绿色
      }
      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      const option = {
        title: {
          text: ratio + "%",
          textStyle: {
            fontSize: 25,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              color: "#011346",
            },
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: false,
            },
          },
          {
            //粗的外圈
            type: "pie",
            radius: ["100%", "95%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: ratioColor[1],
                    },
                    {
                      offset: 1,
                      color: ratioColor[1],
                    },
                  ]),
                  borderColor: this.acceptance > 100 ? "#FF0000" : ratioColor[1], // 根据条件设置边框颜色
                },
              },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".stability"));
      myChart.setOption(option);
    },
    // 混凝土核算(右四)
    usePay () {
      var xDataArr = ["申请量", "生产量", "签收量"];
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: xDataArr,
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "18"
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16",
            margin: "-1",
            formatter: function (value) {
              return countHunNingTu(value);
            },
          },
        },
        series: [
          {
            type: "bar",
            data: [this.acc.planweigh, this.acc.proweigh, this.acc.sign],
            itemStyle: {
              color: "#0000FF", // 设置柱状图颜色为蓝色
            },
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".payless"));
      myChart.setOption(option);
    },
    // 数据一(下一)
    useRebar () {
      var option = {
        tooltip: {},
        xAxis: {
          axisLabel: {
            color: "#FFFFFF",
            fontSize: 15,
            // rotate: -45,
            formatter: function (value) {
              return countHunNingTu(value);
            }
          },
          nameTextStyle: {
            fontSize: 15
          },
        },
        yAxis: {
          type: "category",
          data: ["库存数量", "出库数量", "验收入库", "计划用量"],
          axisLabel: {
            color: "#FFFFFF",
            interval: 0, // 强制显示所有刻度标签
            fontSize: 16,
            fontWeight: 600,
            margin: 3,
            formatter: function (value) {
              var str = "";
              var num = 4; //每行显示字数 
              var valLength = value.length; //该项x轴字数  
              var rowNum = Math.ceil(valLength / num); // 行数  
              if (rowNum > 1) {
                for (var i = 0; i < rowNum; i++) {
                  var temp = "";
                  var start = i * num;
                  var end = start + num;
                  temp = value.substring(start, end) + "\n";
                  str += temp;
                }
                return str;
              } else {
                return value;
              }
            },
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            data: [
              {
                value: this.goods.inventorysum,
                itemStyle: {
                  color: "#f1d92e", // 设置第六根柱子的颜色为紫色
                },
              },
              {
                value: parseFloat(this.goods.deliverysum).toFixed(2),
                itemStyle: {
                  color: "#97abdf", // 设置第五根柱子的颜色为碧绿色
                },
              },
              {
                value: this.accept,
                itemStyle: {
                  color: "#7ad9b7", // 设置第四根柱子的颜色为蓝色
                },
              },
              {
                value: this.planuse,
                itemStyle: {
                  color: "#7e7fbb", // 设置第三根柱子的颜色为橙色
                },
              },
              // {
              //   value: this.yearPlanUse,
              //   itemStyle: {
              //     color: "#008c8c", // 设置第二根柱子的颜色为紫色
              //   },
              // },
              // {
              //   value: this.designsum,
              //   itemStyle: {
              //     color: "#008c8c", // 设置第一根柱子的颜色为橙色
              //   },
              // },
            ],
            label: {
              show: true,
              position: "top",
            },
            barCategoryGap: "50%",
          },
        ],
        grid: {
          left: '25%',  // 调整左边距
          top: '20%',   // 调整上边距
        },
      };
      const myChart = echarts.init(document.querySelector(".rebar"));
      myChart.setOption(option);
    },
    // 数据二(下二)
    useFan () {
      var option = {
        // 鼠标指向显示数据
        tooltip: {
          trigger: "item",
        },
        series: [
          // 第一条数据
          {
            name: "数据",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: [
              {
                value: Number(this.plansum).toFixed(2),
                name: "验收入库",
                itemStyle: {
                  color: "#ffdc60", // 设置出库数据的颜色为黄色
                },
              },
              // 第二条数据
              {
                value: Number(isNaN(this.deliverysum) ? 0 : this.deliverysum).toFixed(2),
                name: "出库数量",
                itemStyle: {
                  color: "#98B4E1", // 设置库存数据的颜色为紫色
                },
              },
              // 第三条数据
              // {
              //   value: this.goods.inventorysum < 0 ? 0 : this.goods.inventorysum,
              //   name: "库存数量",
              //   itemStyle: {
              //     color: "#FFA500", // 设置库存数据的颜色为橙色
              //   },
              // },
            ],
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".bottom-tow-photo"));
      myChart.setOption(option);
    },
    // 实时过磅数据
    async StartRealTime () {
      var res = await getRealtimeInfo({ org_id: this.id });
      this.overData = res.data.data;
    },
    // 沥青混凝土(下四)
    useBitumen () {
      const ratio = parseInt(this.BPercent); //占比数值  总数为100
      const ratioLength = 2; //波浪数量
      const ratioArr = [];
      // 百分比数小于100 显示绿色
      // 百分比数小于大于100 显示红色
      let ratioColor
      if (ratio > 100) {
        ratioColor = ["#FF0000", "#B22222"]; //波浪内红色
      } else {
        ratioColor = ["#388383", "#61d9af"]; //波浪内绿色
      }
      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      const option = {
        title: {
          text: ratio + "%",
          textStyle: {
            fontSize: 25,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              color: "#011346",
            },
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: false,
            },
          },
          {
            //粗的外圈
            type: "pie",
            radius: ["100%", "95%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: ratioColor[1],
                    },
                    {
                      offset: 1,
                      color: ratioColor[1],
                    },
                  ]),
                  borderColor: this.acceptance > 100 ? "#FF0000" : ratioColor[1], // 根据条件设置边框颜色
                },
              },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".bitumen"));
      myChart.setOption(option);
    },
    // 质检(下五)
    useGangJingCharts () {
      var option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#5c7bd9', 'orange', '#508bf8', '#ff7070', '#008c8c', '#ffdc60', 'yelow', '#f1d92e'], // 设置自定义颜色(第一个参数对应data第一个数据的)
        legend: {
          left: 'left',
          orient: 'vertical',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 800
          },
          formatter: function (name) {
            // 查找对应的数据项
            var dataItem = option.series[0].data.find(item => item.name === name);
            // 返回自定义的文本，包括名称和值
            return name + ' ' + dataItem.value;
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['35%', '55%'],
            center: ['72%', '45%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.counters[0].value, name: '设备异常预警' },
              { value: this.counters[1].value, name: '收料方式预警' },
              { value: this.counters[2].value, name: '超量预警' },
              { value: this.counters[3].value, name: '超合同量预警' },
              { value: this.counters[4].value, name: '无申请预警' },
              { value: this.counters[5].value, name: '缺合同预警' },
            ],
          }
        ]
      };
      // const myChart = echarts.init(document.querySelector(".yujingCharts"));
      myChart.setOption(option);
    },
    // 左三每个点击事件
    async handleItemClick (item, index) {
      this.activeIndex = index;
      this.selectedContent = this.list[index];
      localStorage.setItem("materialName", item);
      // 访问接口
      const res = await getMaterialDescon({
        onpage: 'all',
        org_id: this.id,
        name: item,
      });
      res.data.data.forEach((item, index) => {
        if (index == 0) {
          this.goods = item;
        }
      });
      // this.yearPlanUse = Number(this.goods.schedulesum).toFixed(2); //录入施工量(不显示此数据)
      // this.designsum = parseFloat(this.goods.designsum).toFixed(2); // 设计施工量(不显示此数据)
      this.planuse = parseFloat(this.goods.plansum).toFixed(2); // 计划用量
      this.accept = Math.abs(parseFloat(this.goods.acceptancesum).toFixed(2)); // 验收入库
      this.deliverysum = parseFloat(this.goods.deliverysum).toFixed(2); // 出库数量
      this.plansum = parseFloat(this.goods.inventorysum).toFixed(2); // 库存数量
      this.acceptance = countFinsh(this.accept, this.planuse) // 完成比例率
      this.useWaterImg();
      this.useRebar();
      this.useFan(); // 下二图例
    },
    // 时间段点击事件
    async timerChange (value) {
      this.timer = value;
      this.enterNumber = enterNumberName(value)
      this.enterBottomNumber = enterBottomNumberName(value)
      // 收发车料请求接口
      var timerless = await getRDInfo({
        onpage: value,
        org_id: this.id,
      });
      this.Rnowtrains = timerless.data.data.Rnowtrains;  // 本次收料
      this.Dnowtrains = timerless.data.data.Dnowtrains;  // 本次发料
      this.Rlasttrains = timerless.data.data.Rlasttrains; // 上次收料
      this.Dnowtrains = timerless.data.data.Dnowtrains;   // 上次发料
      this.Dlasttrains = timerless.data.data.Dlasttrains;
      this.Rnum = countMore(this.Rnowtrains, this.Rlasttrains, this.Rnum)
      this.Dnum = countMore(this.Dnowtrains, this.Dlasttrains, this.Rnum)
      // 混凝土水稳沥青接口
      // var HSL = await getHSLInfo({
      //   onpage: value,
      //   org_id: this.id,
      // });
      // this.righttw = HSL.data.data;
      // this.righttw.forEach((item) => {
      //   if (item.name == '混凝土') {
      //     this.earth = item;
      //     this.earth.planweight = (item.planweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //     this.earth.realweight = (item.realweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //     this.HPercent = countHNt(this.earth.planweight, this.earth.realweight)
      //     this.number5 = countHNt(this.earth.planweight, this.earth.realweight) / 100
      //   } else if (item.name == '水稳料') {
      //     this.water = item;
      //     this.water.planweight = (item.planweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //     this.water.realweight = (item.realweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //   } else if (item.name == '沥青') {
      //     this.bitumen = item;
      //     this.bitumen.planweight = (item.planweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //     this.bitumen.realweight = (item.realweight / 10000)
      //       .toFixed(2)
      //       .toLocaleString();
      //   }
      // });
      // 材料具体信息接口
      // var res = await getMaterialDescon({
      //   onpage: this.timer,
      //   org_id: this.id,
      //   name: this.selectedContent,
      // });
      // res.data.data.forEach((item, index) => {
      //   if (index == 0) {
      //     this.goods = item;
      //   }
      // });
      // this.yearPlanUse = Number(this.goods.schedulesum).toFixed(2); //录入施工量(不显示此数据)
      // this.designsum = parseFloat(this.goods.designsum).toFixed(2); // 设计施工量(不显示此数据)
      // this.planuse = parseFloat(this.goods.plansum).toFixed(2); // 计划用量
      // this.accept = Math.abs(parseFloat(this.goods.acceptancesum).toFixed(2)); // 验收入库
      // this.deliverysum = parseFloat(this.goods.deliverysum).toFixed(2); // 出库数量
      // this.plansum = parseFloat(this.goods.inventorysum).toFixed(2); // 库存数量
      // this.acceptance = countFinsh(this.accept, this.planuse) // 完成比例率
      // this.useWaterImg(); // 右四图例
      // this.useRebar(); // 下一图例
      // this.useFan(); // 下二图例
      // 生产核算    获取不到数据会报错
      const res2 = await geConcreteInfo({
        onpage: this.timer,
        org_id: 1,
      });
      res2.data.data.forEach((item, index) => {
        if (index == 0) {
          this.all = item;
        }
      });
      this.pro = this.all.production;
      this.acc = this.all.accounting;
      this.useProduce();
      // 获取质检信息
      // var quality = await getQualityInfo({
      //   onpage: this.timer,
      //   org_id: this.id,
      // });
      // if (quality.data.code === 0) {
      //   // 级配质检
      //   this.qualityData[0].gradationFail = quality.data.data[0]['0']
      //   this.qualityData[0].gradationPass = quality.data.data[0]['1']
      //   // 密度质检
      //   this.qualityData[1].densityFail = quality.data.data[1]['0']
      //   this.qualityData[1].densityPass = quality.data.data[1]['1']
      //   // 钢筋质检
      //   this.qualityData[2].rebarFail = quality.data.data[2]['0']
      //   this.qualityData[2].rebarPass = quality.data.data[2]['1']
      // }
      const res3 = await getWarnInfo({
        onpage: this.timer,
        org_id: this.id,
      });
      if (res3.data.code === 0) {
        const warningData = res3.data.data
        for (let i = 0; i < warningData.length && i < this.counters.length; i++) {
          this.counters[i].value = warningData[i].count
        }
        // this.useGangJingCharts()
      }
    },
    // 获取生产核算信息   (没有该数据会报错)  
    async StartCon () {
      var res = await geConcreteInfo({
        onpage: this.timer,
        org_id: this.id,
      });
      if (res.status === 200) {
        res.data.data.forEach((item, index) => {
          if (index == 0) {
            this.all = item;
          }
        });
        this.pro = this.all.production;
        this.acc = this.all.accounting;
        this.usePay();
        this.useProduce();
      }
    },
    // 挂载执行事件
    // 收发车次
    async StartRD () {
      var timerless = await getRDInfo({
        onpage: "day",
        org_id: this.id,
      });
      this.Rnowtrains = timerless.data.data.Rnowtrains;
      this.Rlasttrains = timerless.data.data.Rlasttrains;
      this.Dnowtrains = timerless.data.data.Dnowtrains;
      this.Dlasttrains = timerless.data.data.Dlasttrains;
      this.Rnum = countMore(this.Rnowtrains, this.Rlasttrains, this.Rnum)
      this.Dnum = countMore(this.Dnowtrains, this.Dlasttrains, this.Rnum)
    },
    // 混凝土，水稳，沥青
    async StartHSL () {
	  var _this = this
      var HSL = await getHSLInfo({
        onpage: "all",
        org_id: this.id,
      });
      this.righttw = HSL.data.data;
      this.righttw.forEach((item, index) => {
        if (item.name == '混凝土') {
          this.earth = item;
          this.earth.planweight = (item.planweight / 10000)
            .toFixed(2)
            .toLocaleString();
          this.earth.realweight = (item.realweight / 10000)
            .toFixed(2)
            .toLocaleString();
          // this.HPercent = countHNt(this.earth.planweight, this.earth.realweight)
		  var _hptime = setInterval(()=>{
			if(_this.acc.proweigh || _this.acc.proweigh!=undefined){
				_this.HPercent = countHNt(this.earth.planweight, (Number(this.acc.proweigh) / 10000))
				this.useSemicircle();
				clearInterval(_hptime)
			}
		  },2000)
          this.number5 = countHNt(this.earth.planweight, this.earth.realweight) / 100
        } else if (item.name == '水稳料') {
          this.water = item;
          this.water.planweight = (item.planweight / 10000)
            .toFixed(2)
            .toLocaleString();
          this.water.realweight = (item.realweight / 10000)
            .toFixed(2)
            .toLocaleString();
          if (this.water.planweight == 0 && this.water.realweight > 0) {
            this.WPercent = parseInt(this.water.realweight);
          } else if (this.water.planweight == 0 || this.water.realweight == 0) {
            this.WPercent = 0;
            this.number4 = 0;
          } else {
            if ((this.water.realweight / this.water.planweight).toFixed(1) > 1) {
              this.WPercent = 100;
              this.number4 = (this.WPercent) / 100
            } else {
              this.WPercent = (this.water.realweight / this.water.planweight).toFixed(1) * 100
              this.number4 = (this.water.realweight / this.water.planweight).toFixed(1)
            }
          }
        } else if (item.name == '沥青') {
          this.bitumen = item;
          this.bitumen.planweight = (item.planweight / 10000)
            .toFixed(2)
            .toLocaleString();
          this.bitumen.realweight = (item.realweight / 10000)
            .toFixed(2)
            .toLocaleString();
          if (this.bitumen.planweight == 0 && this.bitumen.realweight > 0) {
            this.BPercent = parseInt(this.bitumen.realweight);
          } else if (this.bitumen.planweight == 0 || this.bitumen.realweight == 0) {
            this.BPercent = 0;
            this.number3 = 0;
          } else {
            if ((this.bitumen.realweight / this.bitumen.planweight).toFixed(1) > 1) {
              this.BPercent = 100;
              this.number3 = (this.BPercent) / 100
            } else {
              this.BPercent = (this.bitumen.realweight / this.bitumen.planweight).toFixed(1) * 100
              this.number3 = (this.bitumen.realweight / this.bitumen.planweight).toFixed(1)
            }
          }
        }
      });
      this.useSemicircle(); // 混凝土
      this.useWater(); // 水稳
      this.useBitumen();
    },
    // 获取质检信息
    async getQualityInfo () {
      // var quality = await getQualityInfo({
      //   onpage: this.timer,
      //   org_id: this.id,
      // });
      // if (quality.data.code === 0) {
      //   // 级配质检
      //   this.qualityData[0].gradationFail = quality.data.data[0]['0']
      //   this.qualityData[0].gradationPass = quality.data.data[0]['1']
      //   // 密度质检
      //   this.qualityData[1].densityFail = quality.data.data[1]['0']
      //   this.qualityData[1].densityPass = quality.data.data[1]['1']
      //   // 钢筋质检
      //   this.qualityData[2].rebarFail = quality.data.data[2]['0']
      //   this.qualityData[2].rebarPass = quality.data.data[2]['1']
      // }
      // 获预警信息
      const res = await getWarnInfo({
        onpage: this.timer,
        org_id: this.id,
      });
      if (res.data.code === 0) {
        const warningData = res.data.data
        for (let i = 0; i < warningData.length && i < this.counters.length; i++) {
          this.counters[i].value = warningData[i].count
        }
      }
      this.usePay(); // 密度质检
      // this.useGangJingCharts(); // 钢筋质检
    },
    // 获取组织树
    async tree () {
      var res = await tree();
      this.treeData = res.data.data.org[0].child;
      this.compData[0].child.push(...this.treeData);
    },
    // 更改组织树选择
    updateSelectedTree (val, node) {
      Org.set(node)
      if (!node.disabled) {
        location.href = `/admin/index?org_id=${val}`
      }
    },
    // 组织树数据的点击事件
    showSub (item) {
      this.subMenu = item.child
      this.nowId = item.id
      this.title = item.name
    },
    // 加载组织树数据
    async showtree () {
      var res = await tree();
      this.org = res.data.data.org;
    },
    // 组织树组织id改变事件
    async handleIdChange (id) {
      // 在这里处理子组件传递的this.id
      this.id = id;
      localStorage.setItem("id", this.id)
      this.StartRD();
      this.StartHSL();
      this.StartCon();
      this.getQualityInfo();
      this.handleItemClick("钢筋", 0)
      this.StartRealTime();
    },
    async handleNameChange (name) {
      this.name = name;
      localStorage.setItem("name", this.name)
    },
    async handleLevelChange (level) {
      this.level = level;
      localStorage.setItem("level", this.level)
    },
    // 封装路由跳转方法
    routePush (route, level, id) {
      if (level == 1) {
        const routerJump = this.$router.resolve(`/${route}F`);
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (level == 2) {
        const routerJump = this.$router.resolve(`/${route}C`);
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (level == 3) {
        const routerJump = this.$router.resolve(`/${route}`);
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RSid", id)
      }
    },
    // 跳转收料界面
    toReceipt (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转发料界面
    toDelivery (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转混凝土界面
    toHnt (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转水稳界面
    toWater (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转沥青界面
    toLiqing (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转混凝土生产界面
    toProduct (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转混凝土核算界面
    toAccounting (route) {
      this.routePush(route, this.level, this.id)
    },
    // 跳转第一个详情页
    toDetailOne (route) {
      this.routePush(route, this.level, this.id)
      localStorage.setItem("selectedContent", this.selectedContent);
    },
    // 跳转第二个详情页
    toDetailTwo (route) {
      this.routePush(route, this.level, this.id)
      localStorage.setItem("selectedContent", this.selectedContent);
    },
    // 跳转第三个详情页
    toDetailThree (route) {
      this.routePush(route, this.level, this.id)
      localStorage.setItem("selectedContent", this.selectedContent)
    },
    // // 跳转质检详情页
    // toQuality (route) {
    //   if (this.level == 1) {
    //     this.$router.push(`/${route}F`);
    //     localStorage.setItem("RGid", this.id);
    //   } else if (this.level == 2) {
    //     localStorage.setItem("RGid", this.id);
    //     this.$router.push(`/${route}C`);
    //   } else if (this.level == 3) {
    //     localStorage.setItem("RGid", this.id);
    //     this.$router.push(`/${route}C`);
    //   }
    // },
    // 跳转预警详情页
    toWarning (route, info) {
      if (info) {
        localStorage.setItem("info", info);
      }
      if (this.level == 1) {
        const routerJump = this.$router.resolve(`/${route}F`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (this.level == 2) {
        const routerJump = this.$router.resolve(`/${route}C`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (this.level == 3) {
        const routerJump = this.$router.resolve(`/${route}C`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      }
      // this.routePush(route, this.level, this.id)
      // localStorage.setItem("info", info);
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.big-container {
  width: 100vw;
  height: 100vh;
  background: url("../photo/bg@2x.png");
  background-size: cover;
  .box {
    position: fixed;
    width: 3840px;
    height: 2160px;
    top: 50%;
    left: 50%;
    transform-origin: left top;
  }
}

.home {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;

  .container {
    width: 3840px;
    height: 2160px;

    .top {
      width: 100%;
      height: 10%;
      padding-top: 15px;
      display: flex;
      // background: url("./../photo/top.png");
      background: url("./../photo/大标题.png");
      background-size: contain;
      background-repeat: no-repeat;

      /* 防止平铺 */
      .top-left {
        width: 90%;
        margin-top: -15px;
      }

      .el-radio-button__inner {
        background-color: #011346;
        color: #fff;
        font-size: 40px;
      }

      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #ccd1dc;
        color: #000;
      }

      .top-title {
        display: flex;
        margin-top: -20px;

        .t-center {
          width: 70%;
          height: 5%;
          padding-bottom: 60px;
          color: #fff;
          text-align: center;
          font-size: 60px;
          line-height: 60px;
          font-family: "黑体";
          margin-top: 3%;
        }
      }

      .top-search {
        width: 180px;
        height: 22px;
        margin-top: 20px;
        margin-left: 24%;
        transform: scale(2);

        .el-cascader {
          width: 250px;
          height: 30px;
          background-color: #011346;

          .el-input {
            width: 100%;
            height: 100%;

            .el-input__inner {
              background-color: #011346;
              color: #fff;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .top-right {
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;

        .time {
          width: 35%;
          transform: translate(184%, 6%);
          font-size: 34px;
        }
      }
    }

    .center {
      width: 100%;
      height: 60%;
      display: flex;
      margin-top: -40px;

      .c-left {
        width: 32%;
        height: 100%;
        // background-color: #0cc;
        display: flex;
        flex-wrap: wrap;

        .c-left-one {
          width: 47%;
          height: 45%;
          cursor: pointer;

          .content {
            display: flow-root;
            width: 100%;
            height: 105%;

            .hz-top {
              display: flex;
              position: relative;

              .times {
                color: #fff;
                position: absolute;
                right: 83px;
                top: 170px;
                font-size: 12px;
                transform: scale(3.5);
              }

              .number {
                margin-left: 222px;
                margin-top: 151px;
              }
            }

            .hz-center {
              display: flex;
              justify-content: center;
              color: #fff;
              margin-top: 140px;
              font-size: 40px;

              span {
                font-weight: 700;
              }
            }

            .hz-bottom {
              display: flex;
              justify-content: center;
              margin-top: 120px;
              margin-bottom: 9px;
              font-size: 40px;
              color: #fff;
              transform: translateY(-40px);

              span {
                color: #f00;
                font-weight: 700;

                &::after {
                  content: "";
                  display: inline-block;
                  width: 0;
                  height: 0;
                  border: 5px solid #f00;
                  border-left: 5px solid transparent;
                  border-right: 5px solid transparent;
                  border-top: 5px solid transparent;
                  margin-left: 5px;
                  transform: scale(3.5);
                  position: fixed;
                  top: 30%;
                  right: 15%;
                }
              }
            }
          }
        }

        .c-left-two {
          width: 50%;
          height: 45%;
          margin-left: 2%;
          cursor: pointer;

          .content {
            display: flow-root;
            width: 100%;
            height: 105%;

            .hz-top {
              display: flex;
              position: relative;

              .times {
                color: #fff;
                position: absolute;
                right: 116px;
                top: 170px;
                font-size: 12px;
                transform: scale(3.5);
              }

              .number {
                margin-left: 222px;
                margin-top: 140px;
              }
            }

            .hz-center {
              display: flex;
              justify-content: center;
              color: #fff;
              margin-top: 140px;
              font-size: 40px;

              span {
                font-weight: 700;
              }
            }

            .hz-bottom {
              display: flex;
              justify-content: center;
              margin-top: 120px;
              margin-bottom: 20px;
              font-size: 40px;
              color: #fff;
              transform: translateY(-40px);

              span {
                color: #f00;
                font-weight: 700;

                &::after {
                  content: "";
                  display: inline-block;
                  width: 0;
                  height: 0;
                  border: 5px solid #f00;
                  border-left: 5px solid transparent;
                  border-right: 5px solid transparent;
                  border-top: 5px solid transparent;
                  margin-left: 5px;
                  position: fixed;
                  top: 34%;
                  right: 17%;
                  transform: scale(3.5);
                }
              }
            }
          }
        }

        .c-left-three {
          margin-top: 1%;
          width: 47%;
          height: 46%;
          cursor: pointer;
          transform: translateY(-15px);
          .content {
            width: 100%;
            height: 100%;
            overflow: hidden;

            .materials {
              margin: 5%;
              padding: 4% 4%;
              color: #fff;
              list-style: none;
              overflow: scroll;
              height: 500px;
              display: flex;
              justify-content: space-around;
              flex-wrap: wrap;
              align-content: flex-start;

              li {
                width: 200px;
                height: 100px;
                font-size: 32px;
                line-height: 77px;
                text-align: center;
                background-color: #273562;
                display: inline-block;
                padding: 10px 12px;
                margin-right: 5px;
                margin-top: 10px;
                margin-left: 10px;
                border-radius: 5px;
              }

              .active {
                background-color: #508bf8;
              }

              &::-webkit-scrollbar {
                /*滚动条整体样式*/
                width: 10px;
                /*高宽分别对应横竖滚动条的尺寸*/
                height: 1px;
              }

              &::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                background: #9e9e9e;
                box-shadow: inset 0 0 5px rgba(0, 122, 204);
              }

              //滚动条底层颜色!
              &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #011246;
                /*滚动条里面轨道*/
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
              }
            }
          }
        }

        .c-left-four {
          // margin-top: 1%;
          width: 50%;
          height: 45%;
          margin-left: 2%;
          cursor: pointer;

          .content {
            width: 100%;
            height: 100%;
            position: relative;

            .gj {
              height: 516px;
              .gj-left {
                width: 233px;
                float: left;
                margin-top: 45px;
                width: 110px;
                height: 85%;
                color: #fff;
                font-size: 35px;
                padding-left: 5px;
                position: relative;
                z-index: 99;

                .gj-yong {
                  width: 250px;
                  margin: 20px 0px;
                }

                .gj-yong-number {
                  width: 360px;
                  font-weight: 700;
                  margin-bottom: 30px;
                }

                .gj-ru {
                  width: 320px;
                  margin: 20px 0px;
                  transform: translateY(150%);
                }

                .gj-ru-number {
                  width: 360px;
                  font-weight: 700;
                  transform: translateY(150%);
                }
              }

              .gj-right {
                float: right;
                width: 46%;
                height: 110px;
                margin-top: 34%;
                transform: translate(-7%, 31%) scale(2);
              }

              .check {
                position: absolute;
                right: 63px;
                top: 127px;
                color: #fff;
                font-size: 44px;
              }
            }
          }
        }
      }

      .c-center {
        width: 35%;
        height: 95.5%;
        margin: 0 auto;
        position: relative;
      }

      .c-right {
        width: 32%;
        height: 100%;
        display: flex;
        margin-right: 0px;
        flex-wrap: wrap;

        .c-right-one {
          width: 47.6%;
          height: 46.5%;
          margin-left: 23px;
          cursor: pointer;

          .content {
            width: 100%;
            height: 100%;
          }
        }

        .c-right-two {
          width: 47%;
          height: 43.5%;
          margin-left: 2%;
          cursor: pointer;

          .content {
            width: 100%;
            height: 107%;
          }
        }

        .c-right-three {
          width: 47.6%;
          height: 46%;
          margin-left: 20px;
          margin-top: 6px;
          cursor: pointer;
          transform: translateY(-2%);

          .content {
            width: 100%;
            height: 100%;
          }
        }

        .c-right-four {
          margin-top: 15px;
          width: 47%;
          height: 43%;
          margin-left: 2%;
          margin-top: 6px;
          cursor: pointer;
          transform: translateY(-2%);

          .content {
            width: 100%;
            height: 107%;
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 30%;
      display: flex;
      justify-content: space-around;

      .bottom-one {
        width: 17.2%;
        margin-top: -0.5%;
        height: 101%;
        cursor: pointer;

        .content {
          width: 96%;
          height: 96%;
        }
      }

      .bottom-two {
        width: 18.9%;
        margin-top: -0.5%;
        padding-right: 0.5%;
        height: 101%;
        cursor: pointer;

        .content {
          width: 96%;
          height: 96%;
        }
      }

      .bottom-three {
        width: 39%;
        margin-top: -0.5%;
        height: 97%;
        transform: translateX(-1.3%);

        .content {
          width: 100%;
          height: 100%;
          .bt-message {
            transform: translate(0%, 5%) scale(1);
            height: 500px;
            .bt-title {
              font-size: 100px;
            }
          }
        }
      }

      .bottom-four {
        width: 16.8%;
        height: 108%;
        margin-right: 1%;
        cursor: pointer;
        transform: translate(4%, -3%);

        .content {
          width: 100%;
          height: 90%;
        }
      }

      .bottom-five {
        width: 17.4%;
        height: 101%;
        cursor: pointer;
        transform: translate(0%, -3%);

        .content {
          width: 96%;
          height: 96%;
        }

        // 下五图样式
        .yujingCharts {
          // transform: translate(42%, 42%) scale(1.8);
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          height: 97%;
          .yujing-item {
            color: #fff;
            width: 261px;
            height: 110px;
            margin-left: 17px;
            font-size: 35px;
            .yujing-item-title {
              display: flex;
              .yujing-item-title-icon {
                margin-top: 9px;
                background: forestgreen;
                width: 40px;
                height: 29px;
                border-radius: 10px;
              }
            }
            .yujing-item-number {
              margin-left: 50px;
              width: 100px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }

  .myBorder {
    box-shadow: rgba(1, 100, 177, 1.3) 0px 0px 40px inset;
    border: 1px solid rgba(1, 100, 177, 0.9);
    background-color: transparent;
    background-origin: content-box !important;
    // background-color: rgb(2, 8, 20) !important;
    background-color: rgb(1, 19, 70) !important;
    background-image: linear-gradient(
        #465376 2px,
        transparent 2px,
        transparent calc(100% - 2px),
        #465376 calc(100% - 2px),
        #465376 100%
      ),
      linear-gradient(
        90deg,
        #465376 2px,
        transparent 2px,
        transparent calc(100% - 2px),
        #465376 calc(100% - 2px),
        #465376 100%
      ),
      linear-gradient(
        #465376 2px,
        transparent 2px,
        transparent calc(100% - 2px),
        #465376 calc(100% - 2px),
        #465376 100%
      ),
      linear-gradient(
        90deg,
        #4cc7f3 2px,
        transparent 2px,
        transparent calc(100% - 2px),
        #4cc7f3 calc(100% - 2px),
        #4cc7f3 100%
      ) !important;
    background-repeat: no-repeat !important;
    background-position: top left, top left, bottom right, bottom right !important;
    background-size: 10px 100%, 100% 10px !important;
  }

  /* 右一样式 */
  .c-right-one-content {
    float: left;
    margin-top: 20px;
    width: 110px;
    height: 85%;
    color: #fff;
    font-size: 35px;
    padding-left: 5px;
    position: relative;
    z-index: 99;
    .one-content-left {
      float: left;
      margin-top: 20px;
      width: 250px;
      height: 85%;
      color: #fff;
      font-size: 35px;
      padding-left: 5px;
      position: relative;
      z-index: 99;
      .plan-use {
        width: 250px;
        margin: 20px 0px;
      }
      .plan-use-number {
        font-weight: 700;
      }
    }
  }

  // 右一样式
  .concrete {
    width: 125px;
    height: 125px;
    transform: translate(320px, 200px) scale(2);
  }

  // 下四样式
  .bitumen {
    width: 125px;
    height: 125px;
    transform: translate(320px, 200px) scale(2);
  }

  // 右二样式
  .produce {
    width: 304px;
    // height: 25vh;
    height: 57%;
    transform: translate(44%, 36%) scale(1.8);
  }

  // 右四样式
  .payless {
    width: 52%;
    // height: 25vh;
    height: 57%;
    transform: translate(47%, 35%) scale(1.8);
  }

  // 右一数字样式
  .right-one-number {
    color: white;
    font-size: 25px;
    float: left;
    transform: scale(3);
    position: fixed;
    top: 27%;
    right: 23%;
  }

  // 右三样式
  .stability {
    width: 125px;
    height: 125px;
    transform: translate(320px, 200px) scale(2);
  }

  // 下一样式
  .rebar {
    // height: 25vh;
    height: 57%;
    width: 50%;
    transform: translate(50%, 35%) scale(1.8);
  }

  // 下二样式
  .bottom-tow-photo {
    width: 130%;
    height: 140px;
    transform: translate(368px, 180px) scale(2);
    // background: rebeccapurple;
  }

  // 左三点击样式
  .materials li {
    cursor: pointer;
  }

  .materials li.active {
    background-color: blue;
    color: white;
  }
}

// 过磅开始
.bt-title-ul {
  display: flex;
  width: 100%;
  height: 40px;
  color: white;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  font-size: 16px;
}

// 实磅数据样式部分
.bt-table-message {
  height: 400px;
  overflow: hidden;
  margin-top: 2%;
}

.bt-table-message-ul {
  display: flex;
  width: 100%;
  height: 40px;
  margin: 2%;
  color: white;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  font-size: 32px;
  transform: scale(0.5);
  overflow: hidden;
  animation: scroll-up 6s linear infinite;
}

// 实磅数据动画
@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-600%);
    /* 向上滚动一个元素的高度 */
  }
}

.bt-title-ul li {
  font-size: 40px;
  list-style: none;
}

.bt-table-message-ul li {
  width: 14%;
  text-align: center;
  list-style: none;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6em;
  transform: translateX(-10%);
  /* 可根据需要调整最大宽度 */
}

.truncate {
  width: 16.6%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 过磅结束
</style>
