LanJu_UI/src/views/kanban/equipment/index.vue

<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="app-container home" style="">
      <div class="head">
        <div class="head-content">
          <div class="title">榄菊设备管理云平台</div>
        </div>
        <div class="head-logo">
          <img src="../../../assets/images/logo.png" alt="" />
        </div>
        <div class="back">
          <el-button @click="back()" type="primary" icon="el-icon-s-home"></el-button>
        </div>
      </div>
      <div class="content-top">
        <div class="factory">
          <div class="selectborder">
            <select v-model="selectxt" class="select1" @change="selectline(selectxt)">
              <option :key="index" :value="x.parentName" v-for="(x, index) in getLineList">
                {{ x.deptName }}
              </option>
              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
            </select>
          </div>
          <!-- <div class="selectborder selectborder1">
            <select v-model="selectxtclasses" class="select1" @change="selectline2(selectxtclasses)">
              <option :key="index" :value="x.shiftId" v-for="(x, index) in classesList">
                {{ x.shiftDesc }}
              </option>
            </select>
          </div> -->
        </div>
        <div class="timebox">
          <div class="time">
            {{ gettimedata }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="itemtop">
          <div class="left">
            <div class="item-table">
              <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr style="height: 44px;">
                    <td style="width: 8%;">序号</td>
                    <td style="width: 18%;">设备名称</td>
                    <td style="width: 20%;">所在部门</td>
                    <td style="width: 10%;">状态</td>
                    <td style="width: 12%;">设备故障率</td>
                    <td style="width: 12%;">设备有效利用率</td>
                  </tr>
                </thead>
              </table>
              <div class="table-tbody">
                <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
                      v-for="(n, index) in equipmentlist">
                      <td style="width: 8%;">{{index+1}}</td>
                      <td style="width: 18%;">{{n.equipmentName}}</td>
                      <td style="width: 20%;">{{n.department}}</td>
                      <td style="width: 10%;">{{n.equipmentStatus}}</td>
                      <td style="width: 12%;">{{n.failureRate !=null ?n.failureRate.toFix(2)+'%':'--'}}</td>
                      <td style="width: 12%;">{{n.utilizationRatio !=null?n.utilizationRatio.toFix(2)+'%':'--'}}</td>
                    </tr>
                  </tbody>
                </table>
                <!-- </vue-seamless-scroll> -->
              </div>
            </div>
            <div class="item-table item-table1">
              <div class="titlebox" style="margin-bottom: 14px;">
                <div class="titlename">维修工单</div>
              </div>
              <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr style="height: 44px;">
                    <td style="width: 8%;">序号</td>
                    <td style="width: 12%;">设备名称</td>
                    <td style="width: 12%;">设备编码</td>
                    <td style="width: 12%;">设备位置</td>
                    <td style="width: 12%;">故障原因</td>
                    <td style="width: 12%;">维修组</td>
                    <td style="width: 10%;">是否立即维修</td>
                    <td style="width: 18%;">维修时间</td>

                  </tr>
                </thead>
              </table>
              <div class="table-tbody">
                <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
                      v-for="(n, index) in repairlist">
                      <td style="width: 8%;">{{index+1}}</td>
                      <td style="width: 12%;">{{n.equipmentName}}</td>
                      <td style="width: 12%;">{{n.equipmentCode}}</td>
                      <td style="width: 12%;">{{n.equipmentLocation}}</td>
                      <td style="width: 12%;">{{n.workFaultDesc}}</td>
                      <td style="width: 12%;">{{n.teamName}}</td>
                      <td style="width: 10%;">{{n.workHandle}}</td>
                      <td style="width: 18%;">{{n.workPlanTime}}</td>
                    </tr>
                  </tbody>
                </table>
                <!-- </vue-seamless-scroll> -->
              </div>
            </div>
          </div>
          <div class="right">
            <div class="echart1title">
              完好设备占比
            </div>
            <div class="echartbox" id="echart1" style="margin: auto;  margin-top: 60px;width: 395px; height: 175px">

            </div>
            <div class="equipmentinfobox">
              <div class="box">
                <div class="number">
                  <span class="number1">
                    {{equipmentinfo.totalEquipment}}
                  </span>
                  <span class="name1">
                    台
                  </span>
                </div>
                <div class="name2">
                  设备总数
                </div>
              </div>
              <div class="box">
                <div class="number">
                  <span class="number1" style="color: #FF4D4F;">
                    {{equipmentinfo.faultEquipment}}
                  </span>
                  <span class="name1">
                    台
                  </span>
                </div>
                <div class="name2">
                  故障总数
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="itembottom">
          <!-- <div class="item-table item-table1">
            <div class="titlebox" style="margin-bottom: 14px;">
              <div class="titlename">设备综合效率</div>
            </div>
            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
              <thead>
                <tr style="height: 44px;">
                  <td style="width: 8%;">排名</td>
                  <td style="width: 12%;">设备名称</td>
                  <td style="width: 12%;">设备OEE</td>

                </tr>
              </thead>
            </table>
            <div class="table-tbody">
              <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
                    v-for="(n, index) in getlist">
                    <td style="width: 8%;">1</td>
                    <td style="width: 12%;">测试设备</td>
                    <td style="width: 12%;">88%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div> -->
          <div class="item-table item-table1">
            <div class="titlebox" style="margin-bottom: 14px;">
              <div class="titlename">设备稳定性</div>
            </div>
            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
              <thead>
                <tr style="height: 44px;">
                  <td style="width: 8%;">排名</td>
                  <td style="width: 12%;">设备名称</td>
                  <td style="width: 12%;">MTBF</td>

                </tr>
              </thead>
            </table>
            <div class="table-tbody">
              <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
              <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
                    v-for="(n, index) in equipmentstabilizelist">
                    <td style="width: 8%;">{{index+1}}</td>
                    <td style="width: 12%;">{{n.equipmentCode}}</td>
                    <td style="width: 12%;">{{n.mtbf !=null ?n.mtbf+'%':'--'}}</td>
                  </tr>
                </tbody>
              </table>
              <!-- </vue-seamless-scroll> -->
            </div>
          </div>
          <div class="item-table item-table1">
            <div class="titlebox" style="margin-bottom: 14px;">
              <div class="titlename">设备维修质量</div>
            </div>
            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
              <thead>
                <tr style="height: 44px;">
                  <td style="width: 8%;">排名</td>
                  <td style="width: 12%;">设备名称</td>
                  <td style="width: 12%;">设备OEE</td>

                </tr>
              </thead>
            </table>
            <div class="table-tbody">
              <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
              <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
                    v-for="(n, index) in equipmentrepairlist">
                    <td style="width: 8%;">{{index+1}}</td>
                    <td style="width: 12%;">{{n.equipmentName}}</td>
                    <td style="width: 12%;">{{n.rapairQuantity !=null ?n.rapairQuantity+'%':'--'}}</td>
                  </tr>
                </tbody>
              </table>
              <!-- </vue-seamless-scroll> -->
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="item"></div> -->
      <!-- <div class="item"></div> -->
    </div>
  </v-scale-screen>
</template>

<script>
import {
  getBoardFactory,
  getMesBoardEquProductionToday,
  getBoardShifts,
  getRepairWorkOrder,
  getEquipmentInfo,
  getRepairQuantity,
  equipmentIntactRate,
  equipmentStability,
} from "@/api/kanban/equipment";
import * as echarts from "echarts";
import moment from "moment";
// import Echarts3D from "./echarts3d.vue";
// import Echarts3D2 from "./echarts3d2.vue";
export default {
  name: "Index",
  components: {
  },
  data() {
    return {
      gettimedata: "",
      selectxt: null,
      selectxtclasses: null,
      getLineList: [],
      classesList: [],
      number1: 0,
      number2: 0,
      number3: 0,
      number4: 0,
      nameList: [
        "成型机一",
        "成型机二",
        "成型机三",
        "成型机四",
        "成型机五",
        "成型机六",
        "成型机五",
        "成型机六",
      ],
      valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
      optionDatalist1: [],
      optionDatalist2: [],
      optionDatalist3: [],
      optionDatalist4: [],
      colorlist: ["#005aff", "#f8b551"],
      datetime: null,
      time1: null,
      getlist: [
        {

        },
        {

        },
        {

        },
        {

        },
        {

        },
      ],
      repairlist: [],
      equipmentlist: [],
      equipmentrepairlist: [],
      equipmentstabilizelist: [],
      equipmentinfo: [],
      // {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "中山恒阳工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "999",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "中山小榄工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1000",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "内委虚拟工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1001",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "中山雅黛工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1010",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "中山雅黛工厂(OEM业务)",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1011",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "重庆榄菊工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1020",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "江西榄菊工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1030",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "安徽榄菊工厂",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1040",
      //       "children": []
      //   },
      //   {
      //       "createBy": null,
      //       "createTime": null,
      //       "updateBy": null,
      //       "updateTime": null,
      //       "remark": null,
      //       "poolName": null,
      //       "deptId": null,
      //       "parentId": null,
      //       "ancestors": null,
      //       "deptName": "安徽榄菊工厂(OEM业务)",
      //       "orderNum": null,
      //       "leader": null,
      //       "phone": null,
      //       "email": null,
      //       "status": null,
      //       "delFlag": null,
      //       "parentName": "1041",
      //       "children": []
      //   },
    };
  },
  created() { },
  destroyed() {
    clearInterval(this.time1);
    this.time1 = null;
  },
  mounted() {
    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
    //console.log('zhuanhuahou',this.dateRangeone) 
    // this.getdatalist(this.selectxt)
    this.selectFactorylist();
    this.gettime();
  },
  methods: {
    back() {
      this.$router.push({ path: "/index" });
    },
    gettime() {
      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      setInterval(() => {
        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      }, 1000);
    },
    selectFactorylist() {
      const _this = this;
      getBoardFactory({
        factory: null,
      }).then((response) => {
        if (response.data) {
          _this.getLineList = response.data;
          _this.selectxt = _this.getLineList[0].parentName;
          _this.getdatalist(_this.selectxt)
        }
      });
    },
    getdatalist(Name) {
      const _this = this;
      let poolName = 'ds_' + Name
      getRepairWorkOrder({
        poolName: poolName,
      }).then((response) => {
        if(response.data){
          response.data.forEach((item) => {
            item.workPlanTime = moment(item.workPlanTime).format('YYYY-MM-DD HH:mm:ss')
          });
          _this.repairlist = response.data
        }
      });
      getEquipmentInfo({
        poolName: poolName,
      }).then((response) => {
        if(response.data){
          _this.equipmentlist = response.data
        }
      });
      getRepairQuantity({
        poolName: poolName,
      }).then((response) => {
        if(response.data){
          _this.equipmentrepairlist = response.data
        }
      }); 
      equipmentIntactRate({
        poolName: poolName,
      }).then((response) => {
        if(response.data){
          _this.equipmentinfo = response.data
          _this.initChart1()
        }
      });
      equipmentStability({
        poolName: poolName,
      }).then((response) => {
        if(response.data){
          _this.equipmentstabilizelist = response.data
        }
      });
    },
    initChart1() {
      const _this = this
      let intactRate = 0
      let numberAngle = 180
      if(_this.equipmentinfo.intactRate){
        intactRate = _this.equipmentinfo.intactRate
        numberAngle = parseInt(_this.equipmentinfo.intactRate)*1.8 - 180 
      }
      var myChart1 = echarts.init(document.querySelector("#echart1"));
      var option1 = {
        //提示框组件。开发实际中去掉了指针，提示框可以不用设置。
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        grid: {
        },
        //下面属性才是仪表盘的核心！！反正我是这么认为的！！！
        series: [
          {
            //类型
            splitNumber: 4, //刻度数量
            type: "gauge",
            //半径
            radius: 155,
            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: 180,
            //结束角度。
            endAngle: 0,
            center: ["50%", "100%"],
            //仪表盘轴线相关配置。
            name: "内层盘",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#040610",
                      },
                      {
                        offset: 0.2,
                        color: "#083782",
                      },
                      {
                        offset: 0.5,
                        color: "#0E5EFD",
                      },
                      {
                        offset: 0.8,
                        color: "#083782",
                      },
                      {
                        offset: 1,
                        color: "#040610",
                      },
                    ]),
                  ],
                ],
              },
            },
            axisTick: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
              length: 6,
              splitNumber: 1,
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            data: [
              {
                show: false,
                value: "0",
              },
            ],
            detail: {
              show: 0,
            },
          },
          {
            //类型
            splitNumber: 4, //刻度数量
            type: "gauge",
            //半径
            radius: 115,
            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: 180,
            //结束角度。
            endAngle: 0,
            center: ["50%", "100%"],
            //仪表盘轴线相关配置。
            name: "内层盘",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#3E82FF",
                      },
                      {
                        offset: 0.6,
                        color: "#65FBFF",
                      },
                      {
                        offset: 1,
                        color: "#23317D",
                      },
                    ]),
                  ],
                ],
              },
            },
            axisTick: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
              length: 6,
              splitNumber: 1,
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [
              {
                show: false,
                value: "0",
              },
            ],
            detail: {
              show: false,
            },
          },
          {
            //类型
            splitNumber: 4, //刻度数量
            type: "gauge",
            //半径
            radius: 115,
            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: numberAngle,
            //结束角度。
            endAngle: 0,
            center: ["50%", "100%"],
            //仪表盘轴线相关配置。
            name: "内层盘",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#351A0E",
                      },
                      {
                        offset: 0.6,
                        color: "#363121",
                      },
                      {
                        offset: 1,
                        color: "#351A0E",
                      },
                    ]),
                  ],
                ],
              },
            },
            axisTick: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
              length: 6,
              splitNumber: 1,
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [
              {
                show: false,
                value: "0",
              },
            ],
            detail: {
              show: false,
            },
          },
          {
            //类型
            color: "#fff",
            splitNumber: 4, //刻度数量
            type: "gauge",
            name: '完好设备占比',
            //半径
            radius: 135,
            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: 180,
            //结束角度。
            endAngle: 0,
            center: ["50%", "100%"],
            //仪表盘轴线相关配置。
            axisLine: {
              show: true,
              // 属性lineStyle控制线条样式
              lineStyle: {
                width: 20,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#3A76F0",
                      },
                      {
                        offset: 0.6,
                        color: "#23327E",
                      },
                      {
                        offset: 1,
                        color: "#3A76F0",
                      },
                    ]),
                  ],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            //刻度样式。
            axisTick: {
              // show: false,
              splitNumber: 8,
              length: 20,
              lineStyle: {
                color: "#04060F",
              },
              distance: -20,
            },
            //刻度标签。
            axisLabel: {
              // splitNumber: 10,
              // distance: -12,
              // fontSize: 17,
              color: "#ffffff",
              show: false,
            },
            //仪表盘指针。
            pointer: {
              //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
              show: false,
              //指针长度
              length: "90%",
              width: 0,
            },
            //仪表盘标题。
            title: {
              show: true,
              offsetCenter: [0, "40%"], // x, y，单位px
              color: "#fff",			// 文字的颜色,默认 #333。
              fontSize: 20,
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              valueAnimation: true,
              formatter: "{value}%",
              offsetCenter: [0, "-10%"],
              textStyle: {
                color: "#fff",
                fontSize: 30,
              },

            },
            data: [
              {
                value: intactRate,
              },

            ],
          },
        ],
      };
      myChart1.setOption(option1);
    },
    selectline() {
      const _this = this;
      this.optionDatalist1 = [];
      this.optionDatalist2 = [];
      this.optionDatalist3 = [];
      this.optionDatalist4 = [];
      _this.getdatalist(_this.selectxt)
    },

    //左侧第一个选择类型下拉框 回调函数
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0px 24px;
}

.home {
  width: 100%;
  height: 100vh;
  background: url("../../../assets/images/bg-body.png") no-repeat;
  background-size: 100% 100%;
  background-color: #050711;

  .head {
    width: 100%;
    height: 74px;
    position: relative;

    .head-content {
      height: 74px;
      background-image: url("../../../assets/images/bg-head.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;

      .title {
        font-size: 42px;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .head-logo {
      position: absolute;
      left: 0px;
      top: 1px;

      img {
        height: 38px;
        // width: ;
      }
    }

    .back {
      position: absolute;
      right: 0px;
      top: 5px;
    }
  }

  .content-top {
    display: flex;
    justify-content: space-between;
    position: relative;

    .factory {
      width: 540px;
      height: 60px;
      background: url("../../../assets/images/bg- border1.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: absolute;
      top: -17px;
      left: 0px;
    }

    .timebox {
      width: 480px;
      height: 60px;
      background: url("../../../assets/images/bg-border2.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: absolute;
      top: -17px;
      right: 0px;

      .time {
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
        line-height: 71px;
      }
    }
  }

  .content {
    margin-top: 63px;

    .itemtop {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .item-table {
          width: 1243px;
          height: 292px;
          background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
          background-size: 100% 100%;
          padding: 27px 21px 30px 25px;
          box-sizing: border-box;
          box-sizing: border-box;

          .table-thead {
            width: 1197px;
            height: 44px;
            margin: auto;
            background: #0A1A33;

            td {
              font-size: 19px;
              font-family: NotoSansHans-Medium, NotoSansHans;
              font-weight: 500;
              color: #159AFF;
              text-align: center;
              white-space: nowrap;
            }
          }

          .table-tbody {
            height: 192px;
            // width: 1775px;
            margin: auto;
            overflow-y: scroll;

            table {
              width: 100%;

              tbody {
                width: 100%;

                td {
                  font-size: 19px;
                  font-family: NotoSansHans-Medium, NotoSansHans;
                  font-weight: 500;
                  color: #FFFFFF;
                  text-align: center;
                  border-bottom: 1px dashed #6C8097
                }
              }
            }
          }
        }

        .item-table1 {
          margin-top: 20px;
          padding-top: 19px;

          .table-tbody {
            height: 144px;
          }
        }
      }

      .right {
        margin-left: 23px;
        width: 610px;
        height: 604px;
        background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
        background-size: 100% 100%;
        // padding: 27px 21px 30px 25px;
        box-sizing: border-box;
        position: relative;

        .echartbox {
          margin-top: 50px;
        }

        .echart1title {
          display: inline-table;
          position: absolute;
          top: -27px;
          left: 0px;
          bottom: 0px;
          right: 0px;
          margin: auto;
          z-index: 9999;
          font-size: 24px;
          font-weight: bold;
          color: #FFFFFF;
        }

        .equipmentinfobox {
          margin-top: 105px;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .box {
            width: 186px;
            height: 180px;
            background: url('../../../assets/images/equipment/number.png') no-repeat;
            background-size: 100% 100%;
            text-align: center;
            padding-top: 30px;
            box-sizing: border-box;

            .number {
              .number1 {
                font-size: 60px;
                font-weight: 500;
                color: #66FFFF;
              }

              .name1 {
                font-size: 32px;
                font-weight: 400;
                color: #FFFFFF;
              }
            }

            .name2 {
              margin-top: 15px;
              font-size: 32px;
              font-weight: bold;
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .itembottom {
      margin-top: 19px;
      display: flex;
      justify-content: space-around;

      .item-table {
        width: 610px;
        height: 292px;
        background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
        background-size: 100% 100%;
        padding: 27px 21px 30px 25px;
        box-sizing: border-box;
        box-sizing: border-box;

        .table-thead {
          width: 100%;
          height: 44px;
          margin: auto;
          background: #0A1A33;

          td {
            font-size: 19px;
            font-family: NotoSansHans-Medium, NotoSansHans;
            font-weight: 500;
            color: #159AFF;
            text-align: center;
            white-space: nowrap;
          }
        }

        .table-tbody {
          height: 192px;
          // width: 1775px;
          margin: auto;
          overflow-y: scroll;

          table {
            width: 100%;

            tbody {
              width: 100%;

              td {
                font-size: 19px;
                font-family: NotoSansHans-Medium, NotoSansHans;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                border-bottom: 1px dashed #6C8097
              }
            }
          }
        }
      }

      .item-table1:first-child {
        margin-right: 10px;
      }

      .item-table1 {
        flex: 1;
        margin-top: 20px;
        padding-top: 19px;

        // .table-thead {
        //   width: 565.01px;
        // }

        .table-tbody {
          height: 144px;
        }
      }
    }
  }
}

.titlebox {
  width: 431px;
  height: 38px;
  background: url("../../../assets/images/bg-title.png") no-repeat;
  background-size: 100% 100%;
  //   text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  line-height: 38px;
  letter-spacing: 2px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  padding-left: 60px;
  //   .titlename{
  //     position: relative;
  //     left: 24px;
  //   }
}

.factory {
  display: flex;
  // justify-content: space-around;
}

.selectborder {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 350px;
  margin-left: 50px;
}

.selectborder1 {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 88px;
  margin-left: 25px;
}

.selectborder select {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 25px;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}

.selectborder option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder1 option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 200px;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

.selectborder1:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

::v-deep .el-button--primary {
  color: #ffffff;
  background-color: #325e82;
  border-color: #0a0f19;
}

.active1 {
  background-color: #0D1B2F;
}

.active2 {
  // background-color: #04060E;
}

::-webkit-scrollbar {
  width: 3px;
  height: 0px;
  background-color: #0c0642;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #07356a;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0091ff;
}</style>