From 831d75bb4d2136262c034526976d0d3584b78cb3 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Nov 2023 13:53:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=B1=8F=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_photon.vue    | 3106 ++++++++++++-----------
 src/views/home/widgets/index_photon.vue |  450 ++--
 2 files changed, 1820 insertions(+), 1736 deletions(-)

diff --git a/src/views/bigScreen/index_photon.vue b/src/views/bigScreen/index_photon.vue
index 97ea69bd..bb4585cc 100644
--- a/src/views/bigScreen/index_photon.vue
+++ b/src/views/bigScreen/index_photon.vue
@@ -1,168 +1,186 @@
 <template>
-  <el-container class="container">
-      <el-header class="pageHeader">
-          <span class="top-line top-line-left"></span>
-          光子科技生产管理系统
-          <span class="top-line top-line-right"></span>
-      </el-header>
-      <el-main style="padding:0;overflow: hidden;" id="mainBlock">
-          <el-row style="height:100%">
-              <div style="position: absolute;left: 0;width:20%;z-index:10">
-                  <div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>本周交付数</div>
-                          </div>
-                          <div id="line1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
-                      </div>
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>本周合格数</div>
-                          </div>
-                          <div id="bar1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
-                      </div>
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>本周合格率</div>
-                          </div>
-                          <div id="line2" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
-                      </div>
-                  </div>
-              </div>
-              <el-col :span="24">
-                  <div class="model">
-                      <div style="position: absolute;width: 100%;text-align: center;">
-                          <div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;"> 
-                              <img src="img/photon_top_line.png">
-                              <span>枣庄</span> 
-                              {{ currentDay }}{{ currentWeek }}{{ currentTime }}
-                              <img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
-                          </div>
-                          <div class="totalNumContnier">
-                              <div class="totalNumWrap totalNum_orange">
-                                  <img class="" src="img/number_bg_orange.png">
-                                  <span class="totalNumText">AVG合格数</span>
-                                  <div class="totalNumber">36520</div>
-                              </div>
-                              <div class="totalNumWrap totalNumWrap_green">
-                                  <img src="img/number_bg_green.png">
-                                  <span class="totalNumText">预制棒合格数</span>
-                                  <div class="totalNumber">36520</div>
-                              </div>
-                              <div class="totalNumWrap totalNum_blue">
-                                  <img src="img/number_bg_blue.png">
-                                  <span class="totalNumText">预制管合格数</span>
-                                  <div class="totalNumber">36520</div>
-                              </div>
-                          </div>
-                          
-                      </div>
-                      <div id="loadingScreen">
-                          <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
-                              <template #default="{ percentage }">
-                                  <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
-                                  <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
-                              </template>
-                          </el-progress>
-                      </div>
-                      <canvas id="renderCanvas"></canvas>
-                  </div>
-              </el-col>
-              <div style="position: absolute;right: 0;width:20%;z-index:10">
-                  <div style="display:flex;flex-direction: column;height:100%;padding:20px">
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>本周不合格占比</div>
-                          </div>
-                          <div id="pie" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
-                      </div>
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>本周计划完成度</div>
-                          </div>
-                          <div  id="line3" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
-                      </div>
-                      <div class="flexItem" style="flex:1">
-                          <div class="blockTitle">
-                              <div class="blockTitleIcon"></div>
-                              <div>库存情况</div>
-                          </div>
-                          <dv-scroll-board id="scrollTable" :config="taskBoard"
-                              :style="{ 'width': '100%', 'height': blockTableHeight,'margin-top':'5px'}" />
-                      </div>
-                  </div>
-              </div>
-          </el-row>
-      </el-main>
-      <div id="inforBlock" class="inforBlock" v-show="infoVisibel">
-          <div class="border_corner border_left_top"></div>
-          <div class="border_corner border_right_top"></div>
-          <div class="border_corner border_left_bottom"></div>
-          <div class="border_corner border_right_bottom"></div>
-          <p class="title">{{dialogData.deptName}}</p>
-          <div class="infoCantier">
-              <div class="leftBlock">
-                  <el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
-                      id="dashbordProcess" />
-                  <span>完成进度</span>
-              </div>
-              <div class="rightBlock">
-                  <div>
-                      <p>昨日产量</p>
-                      <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                  </div>
-                  <div class="countWrap">
-                      <div>
-                          <p>预制管</p>
-                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                      </div>
-                      <div>
-                          <p>预制棒</p>
-                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                      </div>
-                  </div>
-              </div>
-          </div>
+    <el-container class="container">
+        <el-header class="pageHeader">
+            <span class="top-line top-line-left"></span>
+            光子科技生产管理系统
+            <span class="top-line top-line-right"></span>
+        </el-header>
+        <el-main style="padding:0;overflow: hidden;" id="mainBlock">
+            <el-row style="height:100%">
+                <div style="position: absolute;left: 0;width:20%;z-index:10">
+                    <div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>本周交付数</div>
+                            </div>
+                            <div id="line1"
+                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
+                            </div>
+                        </div>
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>本周合格数</div>
+                            </div>
+                            <div id="bar1"
+                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
+                            </div>
+                        </div>
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>本周合格率</div>
+                            </div>
+                            <div id="line2"
+                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <el-col :span="24">
+                    <div class="model">
+                        <div style="position: absolute;width: 100%;text-align: center;">
+                            <div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;">
+                                <img src="img/photon_top_line.png">
+                                <span>枣庄</span>
+                                {{ currentDay }}{{ currentWeek }}{{ currentTime }}
+                                <img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
+                            </div>
+                            <div class="totalNumContnier">
+                                <div class="totalNumWrap totalNum_orange">
+                                    <img class="" src="img/number_bg_orange.png">
+                                    <span class="totalNumText">AVG合格数</span>
+                                    <div class="totalNumber">36520</div>
+                                </div>
+                                <div class="totalNumWrap totalNumWrap_green">
+                                    <img src="img/number_bg_green.png">
+                                    <span class="totalNumText">预制棒合格数</span>
+                                    <div class="totalNumber">36520</div>
+                                </div>
+                                <div class="totalNumWrap totalNum_blue">
+                                    <img src="img/number_bg_blue.png">
+                                    <span class="totalNumText">预制管合格数</span>
+                                    <div class="totalNumber">36520</div>
+                                </div>
+                            </div>
 
-      </div>
-      <div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
-          <div class="border_corner border_left_top"></div>
-          <div class="border_corner border_right_top"></div>
-          <div class="border_corner border_left_bottom"></div>
-          <div class="border_corner border_right_bottom"></div>
-          <p class="title">{{currentObj.deptName}}</p>
-          <div class="infoCantier">
-              <div class="leftBlock">
-                  <el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
-                      id="dashbordProcess" />
-                  <p style="text-align:center">完成进度</p>
-              </div>
-              <div class="rightBlock">
-                  <div>
-                      <p>昨日产量</p>
-                      <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                  </div>
-                  <div class="countWrap">
-                      <div>
-                          <p>预制管</p>
-                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                      </div>
-                      <div>
-                          <p>预制棒</p>
-                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
-                      </div>
-                  </div>
-              </div>
-              <CircleClose  class="circleClose" @click="circleClose"/>
-          </div>
+                        </div>
+                        <div id="loadingScreen">
+                            <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
+                                <template #default="{ percentage }">
+                                    <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
+                                    <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
+                                </template>
+                            </el-progress>
+                        </div>
+                        <canvas id="renderCanvas"></canvas>
+                    </div>
+                </el-col>
+                <div style="position: absolute;right: 0;width:20%;z-index:10">
+                    <div style="display:flex;flex-direction: column;height:100%;padding:20px">
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>本周不合格占比</div>
+                            </div>
+                            <div id="pie"
+                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
+                            </div>
+                        </div>
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>本周计划完成度</div>
+                            </div>
+                            <div id="line3"
+                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
+                            </div>
+                        </div>
+                        <div class="flexItem" style="flex:1">
+                            <div class="blockTitle">
+                                <div class="blockTitleIcon"></div>
+                                <div>库存情况</div>
+                            </div>
+                            <dv-scroll-board id="scrollTable" :config="taskBoard"
+                                :style="{ 'width': '100%', 'height': blockTableHeight, 'margin-top': '5px' }" />
+                        </div>
+                    </div>
+                </div>
+            </el-row>
+        </el-main>
+        <div id="inforBlock" class="inforBlock" v-show="infoVisibel">
+            <div class="border_corner border_left_top"></div>
+            <div class="border_corner border_right_top"></div>
+            <div class="border_corner border_left_bottom"></div>
+            <div class="border_corner border_right_bottom"></div>
+            <p class="title">{{ dialogData.deptName }}</p>
+            <div class="infoCantier">
+                <div class="leftBlock">
+                    <el-progress width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
+                        id="dashbordProcess">
+                        <template #default="{ percentage }">
+                            <span class="percentage-value" style="font-size: 16px">{{ percentage }}%</span>
+                        </template>
+                    </el-progress>
+                    <span>完成进度</span>
+                </div>
+                <div class="rightBlock">
+                    <div>
+                        <p>昨日产量</p>
+                        <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                    </div>
+                    <div class="countWrap">
+                        <div>
+                            <p>预制管</p>
+                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                        </div>
+                        <div>
+                            <p>预制棒</p>
+                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-      </div>
-  </el-container>
+        </div>
+        <div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
+            <div class="border_corner border_left_top"></div>
+            <div class="border_corner border_right_top"></div>
+            <div class="border_corner border_left_bottom"></div>
+            <div class="border_corner border_right_bottom"></div>
+            <p class="title">{{ currentObj.deptName }}</p>
+            <div class="infoCantier">
+                <div class="leftBlock">
+                    <el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
+                        id="dashbordProcess">
+                        <template #default="{ percentage }">
+                            <span class="percentage-value">{{ percentage }}%</span>
+                        </template>
+                    </el-progress>
+                    <p style="text-align:center">完成进度</p>
+                </div>
+                <div class="rightBlock">
+                    <div>
+                        <p>昨日产量</p>
+                        <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                    </div>
+                    <div class="countWrap">
+                        <div>
+                            <p>预制管</p>
+                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                        </div>
+                        <div>
+                            <p>预制棒</p>
+                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                        </div>
+                    </div>
+                </div>
+                <CircleClose class="circleClose" @click="circleClose" />
+            </div>
+
+        </div>
+    </el-container>
 </template>
 <script>
 import * as echarts from 'echarts';
@@ -174,1427 +192,1451 @@ import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
 import 'babylonjs-loaders';
 import 'animate.css';
 export default {
-  data() {
-      return {
-          blockHeight: null,
-          taskBoard: {
-              header: ['名称', '规格', '数量'],
-              headerBGC: 'rgb(10,63,68)',
-              // waitTime: 1000,
-              columnWidth: [1, 1, 1],
-              data: [
-                  ['ZB2-1', '6车间', '<span style="color:green;">30000</span>'],
-                  ['ZB2-2', '7车间', '<span style="color:green;">40000</span>'],
-                  ['ZB2-3', '8车间', '<span style="color:green;">50000</span>'],
-                  ['ZJ2-1', '8车间', '<span style="color:green;">35000</span>'],
-                  ['ZJ2-2', '10车间', '<span style="color:green;">30000</span>'],
-                  ['ZJ2-3', '10车间', '<span style="color:red;">100</span>'],
-                  ['ZT2-1', '10车间', '<span style="color:red;">100</span>'],
-                  ['ZT2-2', '10车间', '<span style="color:red;">100</span>'],
-                  ['ZT2-3', '10车间', '<span style="color:red;">100</span>'],
-              ],
-              index: true,
-              columnWidth: [50],
-              align: ['center'],
-              loadedPercent: 0,
-              percentage: 0,
-              percentage: 0
-          },
-          initialAlpha: -Math.PI / 4.5,
-          initialBeta: Math.PI / 2,
-          initialRadius: 2.5,
-          initialTarget: null,
-          scene: null,
-          myui: null,
-          resizeTimeout: null,
-          engine: null,
-          loadedPercent: 0,
-          currentLightMesh: null,
-          infoVisibel: false,
-          clickVisible:false,
-          updateTime: '2023-08-17 16:00:00',
-          nodesLists: {
-              '单身宿舍.004_primitive3': '办公楼',
-              '立方体.024_primitive1':'成型10车间',
-              '立方体.034_primitive1': '配料8车间',
-              '立方体.026_primitive1': '成型7车间',
-              '立方体.025_primitive1': '加工6车间',
-          },
-          objs:{ total: '0', elec: '0' },
-          currentTime:'',
-          currentWeek:'',
-          currentDay:'',
-          timerTime:null,
-          start_date:'',
-          end_date:'',
-          dialogData:{
-              deptName:''
-          },
-          currentObj:{
-              deptName:''
-          },
-          heightTimer:null,
-      }
-  },
-  mounted() {
-      let that = this;
-      let height = document.getElementById('mainBlock').clientHeight;
-      let height0 = height / 3 - 55;
-      let height1 = height0- 20;
-      this.blockHeight = height0 + 'px';
-      this.blockTableHeight = height1 + 'px';
-      document.getElementById('scrollTable').style.height =  height1 + 'px'
-      this.showTime();
-      this.$nextTick(() => {
-          that.initChart();
-          that.initDomStyle();
-          that.initFactory();
-          that.timerTime = setInterval(() => {
-              that.showTime();
-          }, 1000);
-      })
-       //一天的毫秒数
-      const ondDayTime = 86400000
-      let cDate = new Date();
-      let week = cDate.getDay();//当前时间的week数
-      // let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
-      let weekFirst = week-1;//第一天对应的天数
-      let weekLast = 7-week;//最后一天对应的天数
-      let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
-      let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
-      this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
-      this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
-      this.getsaleOut();
-  },
-  methods: {
-      getsaleOut(){
-          let that = this;
-          let obj ={
-              query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
-          };
-          that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
-            //   console.log(res);
-            //   debugger;
-          });
-      },
-      showTime() {
-        this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
-        this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
-        this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
-      },
-      initDomStyle() {
-          // 获取窗口的总高度
-          var windowHeight = window.innerHeight;
-          var windowWidth = window.innerWidth;
-          var dashboard = document.getElementsByClassName('container')[0];
-          var model = document.getElementsByClassName('model')[0];
-          if (windowWidth > 960) {
-              dashboard.style.overflow = 'hidden';
-              model.style.position = 'absolute';
-              model.style.height = (windowHeight - 70) + 'px';
-              model.style.top = 0
-          } else {
-              dashboard.style.overflow = 'auto';
-              var chartHeight = windowWidth * 0.6;
-              model.style.position = 'relative';
-              model.style.height = chartHeight;
-          }
-          if (this.engine != null) {
-              this.engine.resize();
-          }
+    data() {
+        return {
+            blockHeight: null,
+            taskBoard: {
+                header: ['名称', '规格', '数量'],
+                headerBGC: 'rgb(10,63,68)',
+                // waitTime: 1000,
+                columnWidth: [1, 1, 1],
+                data: [
+                    ['ZB2-1', '500*30', '<span style="color:green;">30000</span>'],
+                    ['ZB2-2', '500*30', '<span style="color:green;">40000</span>'],
+                    ['ZB2-3', '500*30', '<span style="color:green;">50000</span>'],
+                    ['ZJ2-1', '500*30', '<span style="color:green;">35000</span>'],
+                    ['ZJ2-2', '500*30', '<span style="color:green;">30000</span>'],
+                    ['ZJ2-3', '500*30', '<span style="color:red;">100</span>'],
+                    ['ZT2-1', '500*30', '<span style="color:red;">100</span>'],
+                    ['ZT2-2', '500*30', '<span style="color:red;">100</span>'],
+                    ['ZT2-3', '500*30', '<span style="color:red;">100</span>'],
+                ],
+                index: true,
+                columnWidth: [50],
+                align: ['center'],
+                loadedPercent: 0,
+                percentage: 0,
+                percentage: 0
+            },
+            initialAlpha: -Math.PI / 4.5,
+            initialBeta: Math.PI / 2,
+            initialRadius: 2.5,
+            initialTarget: null,
+            scene: null,
+            myui: null,
+            resizeTimeout: null,
+            engine: null,
+            loadedPercent: 0,
+            currentLightMesh: null,
+            infoVisibel: false,
+            clickVisible: false,
+            updateTime: '2023-08-17 16:00:00',
+            nodesLists: {
+                '单身宿舍.004_primitive3': '办公楼',
+                '立方体.024_primitive1': '成型10车间',
+                '立方体.034_primitive1': '配料8车间',
+                '立方体.026_primitive1': '成型7车间',
+                '立方体.025_primitive1': '加工6车间',
+            },
+            objs: { total: '0', elec: '0' },
+            currentTime: '',
+            currentWeek: '',
+            currentDay: '',
+            timerTime: null,
+            start_date: '',
+            end_date: '',
+            dialogData: {
+                deptName: ''
+            },
+            currentObj: {
+                deptName: ''
+            },
+            heightTimer: null,
+        }
+    },
+    mounted() {
+        let that = this;
+        let height = document.getElementById('mainBlock').clientHeight;
+        let height0 = height / 3 - 55;
+        let height1 = height0 - 20;
+        this.blockHeight = height0 + 'px';
+        this.blockTableHeight = height1 + 'px';
+        document.getElementById('scrollTable').style.height = height1 + 'px'
+        this.showTime();
+        this.$nextTick(() => {
+            that.initChart();
+            that.initDomStyle();
+            that.initFactory();
+            that.timerTime = setInterval(() => {
+                that.showTime();
+            }, 1000);
+        })
+        //一天的毫秒数
+        const ondDayTime = 86400000
+        let cDate = new Date();
+        let week = cDate.getDay();//当前时间的week数
+        // let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
+        let weekFirst = week - 1;//第一天对应的天数
+        let weekLast = 7 - week;//最后一天对应的天数
+        let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
+        let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
+        this.start_date = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
+        this.end_date = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
+        this.getsaleOut();
+    },
+    methods: {
+        getsaleOut() {
+            let that = this;
+            let obj = {
+                query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
+            };
+            that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
+                //   console.log(res);
+                //   debugger;
+            });
+        },
+        showTime() {
+            this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
+            this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
+            this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
+        },
+        initDomStyle() {
+            // 获取窗口的总高度
+            var windowHeight = window.innerHeight;
+            var windowWidth = window.innerWidth;
+            var dashboard = document.getElementsByClassName('container')[0];
+            var model = document.getElementsByClassName('model')[0];
+            if (windowWidth > 960) {
+                dashboard.style.overflow = 'hidden';
+                model.style.position = 'absolute';
+                model.style.height = (windowHeight - 70) + 'px';
+                model.style.top = 0
+            } else {
+                dashboard.style.overflow = 'auto';
+                var chartHeight = windowWidth * 0.6;
+                model.style.position = 'relative';
+                model.style.height = chartHeight;
+            }
+            if (this.engine != null) {
+                this.engine.resize();
+            }
 
-      },
-      initFactory() {
-          var that = this;
-          const canvas = document.getElementById("renderCanvas"); // Get the canvas element
-          const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
-          BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
-          }
-          BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
-              document.getElementById("loadingScreen").style.display = "none";
-          }
-          engine.displayLoadingUI();
-          const createScene = function () {
-              const scene = new BABYLON.Scene(engine);
-              scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); 
-              // 创建材质
-              // var material = new BABYLON.PBRMaterial("groundMaterial", scene);
-              // material.metallic = 1; // 材质金属度
-              // const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
-              // const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
-              // groundMaterial.majorUnitFrequency = 60;
-              // groundMaterial.minorUnitVisibility = 0.1;
-              // groundMaterial.gridRatio = 0.1;
-              // ground.material = groundMaterial;
-              // ground.position.y = -0.01
+        },
+        initFactory() {
+            var that = this;
+            const canvas = document.getElementById("renderCanvas"); // Get the canvas element
+            const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
+            BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
+            }
+            BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
+                document.getElementById("loadingScreen").style.display = "none";
+            }
+            engine.displayLoadingUI();
+            const createScene = function () {
+                const scene = new BABYLON.Scene(engine);
+                scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); 
+                // 创建材质
+                // var material = new BABYLON.PBRMaterial("groundMaterial", scene);
+                // material.metallic = 1; // 材质金属度
+                // const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
+                // const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
+                // groundMaterial.majorUnitFrequency = 60;
+                // groundMaterial.minorUnitVisibility = 0.1;
+                // groundMaterial.gridRatio = 0.1;
+                // ground.material = groundMaterial;
+                // ground.position.y = -0.01
 
-              // 加载背景图片
-              const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
-              const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.1, 0.3));
-              that.initialTarget = camera.getTarget();
-              camera.lowerBetaLimit = Math.PI / 2.6; 
-              camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下
-              camera.attachControl(canvas, true);
-              camera.maxZ = 700; // 调整适当的值
-              camera.wheelDeltaPercentage = 0.02;
-              // 相机限制
-              camera.lowerRadiusLimit = 2;
-              camera.upperRadiusLimit = 6;
-              // 灯光
-              const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
-              light.intensity = 3;
-              // 全屏GUI
-              const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
-              that.myui = advancedTexture;
-              // 创建一个高亮层
-              const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
-              // 主控制区
-              var control_main = new BABYLON_GUI.StackPanel();
-              control_main.isVertical = false
-              control_main.top = '-40%';
-              control_main.left = '-20%';
-              advancedTexture.addControl(control_main);
+                // 加载背景图片
+                const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
+                const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.1, 0.3));
+                that.initialTarget = camera.getTarget();
+                camera.lowerBetaLimit = Math.PI / 2.6;
+                camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下
+                camera.attachControl(canvas, true);
+                camera.maxZ = 700; // 调整适当的值
+                camera.wheelDeltaPercentage = 0.02;
+                // 相机限制
+                camera.lowerRadiusLimit = 2;
+                camera.upperRadiusLimit = 6;
+                // 灯光
+                const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
+                light.intensity = 3;
+                // 全屏GUI
+                const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
+                that.myui = advancedTexture;
+                // 创建一个高亮层
+                const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
+                // 主控制区
+                var control_main = new BABYLON_GUI.StackPanel();
+                control_main.isVertical = false
+                control_main.top = '-40%';
+                control_main.left = '-20%';
+                advancedTexture.addControl(control_main);
 
-              var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
-              button_main.width = "80px"
-              button_main.height = "30px";
-              button_main.color = "white";
-              button_main.cornerRadius = 20;
-              button_main.background = "green";
-              button_main.top='100px';
-              button_main.left='0px';
-              control_main.addControl(button_main)
-              button_main.onPointerClickObservable.add(() => {
-                  if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
-                      var cameraPosition = new BABYLON.Vector3(
-                          0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
-                          0 + that.initialRadius * Math.cos(that.initialBeta),
-                          0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
-                      );
-                      var ease = new BABYLON.CubicEase();
-                      ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                      BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
-                      BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
-                  }
-              })
-              // 高亮显示mesh名
-              const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
-              mesh_rect.width = "200px";
-              mesh_rect.height = "45px";
-              mesh_rect.background = 'rgb(75,240,234)';
-              mesh_rect.alpha = 0.6;
-              mesh_rect.isVisible = false;
-              advancedTexture.addControl(mesh_rect);
-              var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
-              mesh_name.text = "";
-              mesh_name.color = 'white';
-              mesh_name.fontSize = '14px';
-              mesh_rect.addControl(mesh_name);
-              
-              var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
-              BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
-              // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
-            //   BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
-                //   console.log(scene)
-                  //关闭灯光
-                  // scene.lights[1].setEnabled(false); 
-                  engine.hideLoadingUI()
-                //   let arrKey = [];
-                //   for (let key in that.nodesLists) {
-                //     arrKey.push(key);
-                //   }
-                //   let heightI = 0;
-                //   that.heightTimer = setInterval(() => {
-                //     let heightKey = arrKey[heightI];
-                //     const meshTimer = scene.getMeshByName(heightKey);
-                //     const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
-                    
-                //     if (meshTimer) {
-                //         if (that.nodesLists[heightKey]) {
-                //             hl1Timer.removeAllMeshes();
-                //             if (highlightLayer) { 
-                //                 highlightLayer.removeAllMeshes();
-                //             }
-                //           that.getDeptDetail(that.nodesLists[heightKey])
-                //           // 在选中的 meshTimer 上添加高亮效果
-                //           highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
-                //           that.currentLightMesh = meshTimer;
-                //           mesh_rect.linkWithMesh(meshTimer);
-                //           let name = meshTimer.name.split('_')[0];
-                //           mesh_name.text = name;
-                //           that.infoVisibel = true;
-                //           hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
-                //           hl1Timer.blurVerticalSize = 5;
-                //           hl1Timer.blurHorizontalSize = 5;
-                //           function worldToScreen(point, camera, scene, engine) {
-                //               return BABYLON.Vector3.Project(point,
-                //                   BABYLON.Matrix.Identity(),
-                //                   scene.getTransformMatrix(),
-                //                   camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
-                //           }
-                //           var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
-                //           let infoBlock = document.getElementById('inforBlock');
-                //           infoBlock.style.left = (Math.floor(pos.x)) + 'px';
-                //           infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
-                //       }
-                //     }
-                //     heightI+=1;
-                //     // if(heightI>4){
-                //     //     heightI=0
-                //     // }
-                //   }, 1000);
-              },
-              //进度条
-              function (evt) {
-                  var loadedPercent = 0;
-                  if (evt.lengthComputable) {
-                      loadedPercent = parseInt(evt.loaded * 100 / evt.total);
-                  } else {
-                      var dlCount = evt.loaded / (1024 * 1024);
-                      loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
-                  }
-                  that.loadedPercent = loadedPercent;
-              })
-              // 自动旋转checkbox
-              var checkbox = new BABYLON_GUI.Checkbox();
-              checkbox.width = "20px";
-              checkbox.height = "20px";
-              checkbox.isChecked = false;
-              checkbox.marginLeft = '16px'
-              checkbox.color = "green";
-              checkbox.top='100px';
-              checkbox.onIsCheckedChangedObservable.add(function (value) {
-                  if (value) {
-                      camera.useAutoRotationBehavior = true;
-                  } else {
-                      camera.useAutoRotationBehavior = false;
-                  }
-              });
-              control_main.addControl(checkbox);
-              var header = new BABYLON_GUI.TextBlock();
-              header.text = "自动旋转";
-              header.width = "80px";
-              header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-              header.color = "white";
-              header.top='100px';
-              control_main.addControl(header);
-              // 添加抓取事件
-              const hl1 = new BABYLON.HighlightLayer("hl1", scene);
-              const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
-              canvas.addEventListener('mousemove', (event) => {
-                  // 使用 scene.pick 检测鼠标拾取
-                  const pickResult = scene.pick(scene.pointerX, scene.pointerY);
-                  if (that.currentLightMesh) {
-                      that.infoVisibel = false;
-                      mesh_rect.isVisible = false;
-                      hl1.removeAllMeshes();
-                      highlightLayer.removeAllMeshes();
-                  }
-                  if (pickResult.hit) {
-                      const mesh = pickResult.pickedMesh;
-                      highlightLayer.removeAllMeshes();
-                      let key = mesh.name;
-                      if (that.nodesLists[key]) {
-                        hl1.removeAllMeshes();
-                            highlightLayer.removeAllMeshes();
-                          that.getDeptDetail(that.nodesLists[key])
-                          //单身宿舍.003_primitive3
-                          // 在选中的 mesh 上添加高亮效果
-                          highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
-                          that.currentLightMesh = mesh;
-                          mesh_rect.linkWithMesh(mesh);
-                          let name = mesh.name.split('_')[0];
-                          mesh_name.text = name;
-                          // mesh_rect.isVisible = true;
-                          
-                          hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
-                          hl1.blurVerticalSize = 5;
-                          hl1.blurHorizontalSize = 5;
-                          function worldToScreen(point, camera, scene, engine) {
-                              return BABYLON.Vector3.Project(point,
-                                  BABYLON.Matrix.Identity(),
-                                  scene.getTransformMatrix(),
-                                  camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
-                          }
-                          var pos = worldToScreen(mesh.absolutePosition, camera, scene, engine);
-                          let infoBlock = document.getElementById('inforBlock');
-                          infoBlock.style.left = (Math.floor(pos.x)) + 'px';
-                          infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
-                      }
-                  } else {
-                      that.infoVisibel = false;
-                  }
-              });
-              canvas.addEventListener('click', (event) => {
-                  // 使用 scene.pick 检测鼠标拾取
-                  const pickResult = scene.pick(scene.pointerX, scene.pointerY);
-                  if (pickResult.hit) {
-                      const mesh = pickResult.pickedMesh;
-                      console.log('mesh',mesh)
-                      if(that.nodesLists[mesh.name]){
-                        hl1Click.removeAllMeshes();
-                        highlightLayer.removeAllMeshes();
-                        
-                        highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
-                        hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
-                        hl1Click.blurVerticalSize = 5;
-                        hl1Click.blurHorizontalSize = 5;
-                        that.currentObj.deptName = that.nodesLists[mesh.name]; 
-                        if (camera.target != mesh.position) {
-                            that.clickVisible = true;
-                            // 计算新的相机位置
-                            let position = mesh._parentNode._position
-                            if (mesh._parentNode.id == '__root__') {
-                                position = mesh.position
-                            }
-                            const cameraPosition = new BABYLON.Vector3(
-                                position.x + 1.8 * Math.sin(camera.beta),
-                                position.y + 4 * Math.cos(camera.beta),
-                                position.z - 0.2 * Math.sin(camera.beta)
-                            );
-                            var ease = new BABYLON.CubicEase();
-                            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                            BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0,ease);
-                            BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
+                var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
+                button_main.width = "80px"
+                button_main.height = "30px";
+                button_main.color = "white";
+                button_main.cornerRadius = 20;
+                button_main.background = "green";
+                button_main.top = '100px';
+                button_main.left = '0px';
+                control_main.addControl(button_main)
+                button_main.onPointerClickObservable.add(() => {
+                    if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
+                        var cameraPosition = new BABYLON.Vector3(
+                            0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
+                            0 + that.initialRadius * Math.cos(that.initialBeta),
+                            0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
+                        );
+                        var ease = new BABYLON.CubicEase();
+                        ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+                        BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
+                        BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
+                    }
+                })
+                // 高亮显示mesh名
+                const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
+                mesh_rect.width = "200px";
+                mesh_rect.height = "45px";
+                mesh_rect.background = 'rgb(75,240,234)';
+                mesh_rect.alpha = 0.6;
+                mesh_rect.isVisible = false;
+                advancedTexture.addControl(mesh_rect);
+                var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
+                mesh_name.text = "";
+                mesh_name.color = 'white';
+                mesh_name.fontSize = '14px';
+                mesh_rect.addControl(mesh_name);
+
+                var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
+                BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
+                    // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
+                    //   BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
+                    //   console.log(scene)
+                    //关闭灯光
+                    // scene.lights[1].setEnabled(false); 
+                    engine.hideLoadingUI()
+                    //   let arrKey = [];
+                    //   for (let key in that.nodesLists) {
+                    //     arrKey.push(key);
+                    //   }
+                    //   let heightI = 0;
+                    //   that.heightTimer = setInterval(() => {
+                    //     let heightKey = arrKey[heightI];
+                    //     const meshTimer = scene.getMeshByName(heightKey);
+                    //     const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
+
+                    //     if (meshTimer) {
+                    //         if (that.nodesLists[heightKey]) {
+                    //             hl1Timer.removeAllMeshes();
+                    //             if (highlightLayer) { 
+                    //                 highlightLayer.removeAllMeshes();
+                    //             }
+                    //           that.getDeptDetail(that.nodesLists[heightKey])
+                    //           // 在选中的 meshTimer 上添加高亮效果
+                    //           highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
+                    //           that.currentLightMesh = meshTimer;
+                    //           mesh_rect.linkWithMesh(meshTimer);
+                    //           let name = meshTimer.name.split('_')[0];
+                    //           mesh_name.text = name;
+                    //           that.infoVisibel = true;
+                    //           hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
+                    //           hl1Timer.blurVerticalSize = 5;
+                    //           hl1Timer.blurHorizontalSize = 5;
+                    //           function worldToScreen(point, camera, scene, engine) {
+                    //               return BABYLON.Vector3.Project(point,
+                    //                   BABYLON.Matrix.Identity(),
+                    //                   scene.getTransformMatrix(),
+                    //                   camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
+                    //           }
+                    //           var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
+                    //           let infoBlock = document.getElementById('inforBlock');
+                    //           infoBlock.style.left = (Math.floor(pos.x)) + 'px';
+                    //           infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
+                    //       }
+                    //     }
+                    //     heightI+=1;
+                    //     // if(heightI>4){
+                    //     //     heightI=0
+                    //     // }
+                    //   }, 1000);
+                },
+                    //进度条
+                    function (evt) {
+                        var loadedPercent = 0;
+                        if (evt.lengthComputable) {
+                            loadedPercent = parseInt(evt.loaded * 100 / evt.total);
+                        } else {
+                            var dlCount = evt.loaded / (1024 * 1024);
+                            loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
                         }
-                      }
-                  }
-              });
-              return scene;
-          };
-          const scene = createScene(); //Call the createScene function
-          // scene.debugLayer.show()
-          engine.runRenderLoop(function () {
-              scene.render();
-          });
-          this.engine = engine;
-          this.scene = scene;
-        //   console.log('scene:',scene)
-          window.addEventListener("resize", function () {
-              engine.resize();
-          });
-      },
-      getDeptDetail(name){
-        if(this.currentObj.deptName==name&&this.clickVisible){
-            this.dialogData.deptName = name;
-        }else{
-            this.infoVisibel = true;
-            this.dialogData.deptName = name;
-        } 
-      },
-      initChart() {
-          //左1
-          let chartDom = document.getElementById('line1');
-          chartDom.style.height = this.blockHeight;
-          let myChart = echarts.init(chartDom);
-          let option = {
-              tooltip: {
-                  trigger: 'axis',
-                  axisPointer: {
-                      type: 'cross',
-                      label: {
-                          backgroundColor: '#6a7985'
-                      }
-                  }
-              },
-              legend: {
-                  icon: "stack",
-                  top: 5,
-                  right: 5,
-                  data: [
-                      {
-                      backgroundColor: 'rgb(1,235,239)',
-                      name: '预制棒管',
-                      
-                      textStyle: {
-                          color: '#fff'
-                      },
-                      itemStyle: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(250,205,0)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(254,129,0)'
-                              }
-                          ])
-                      }
-                  }, {
-                      name: 'AVG',
-                      textStyle: {
-                          color: '#fff'
-                      },
-                      itemStyle: {
-                          // color:'rgb(1,235,239)',
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(1,235,239)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(5, 158, 163)'
-                              }])
-                      },
-                  }],
-                  
-              },
-              toolbox: {
-                  feature: {
-                      // saveAsImage: {}
-                  }
-              },
-              grid: {
-                  left: '2%',
-                  right: '4%',
-                  bottom: '5%',
-                  containLabel: true
-              },
-              xAxis: [
-                  {
-                      type: 'category',
-                      boundaryGap: false,
-                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                  }
-              ],
-              yAxis: [
-                  {
-                      name: "交付数(个)",
-                      type: 'value',
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                      splitLine: {
-                          show: false,
-                      },
-                      splitLine: {
-                          show: false,
-                          lineStyle: {
-                              type: 'dashed', //y轴分割线类型
-                              color: 'rgba(102,102,102,0.9)',
-                              width: 1,
-                          },
-                      },
-                  }
-              ],
-              series: [
-                  {
-                      name: '预制棒管',
-                      type: 'line',
-                      stack: 'Total',
-                      smooth: true,
-                      lineStyle: {
-                          width: 1, color: 'rgb(1,235,239)'
-                      },
+                        that.loadedPercent = loadedPercent;
+                    })
+                // 自动旋转checkbox
+                var checkbox = new BABYLON_GUI.Checkbox();
+                checkbox.width = "20px";
+                checkbox.height = "20px";
+                checkbox.isChecked = false;
+                checkbox.marginLeft = '16px'
+                checkbox.color = "green";
+                checkbox.top = '100px';
+                checkbox.onIsCheckedChangedObservable.add(function (value) {
+                    if (value) {
+                        camera.useAutoRotationBehavior = true;
+                    } else {
+                        camera.useAutoRotationBehavior = false;
+                    }
+                });
+                control_main.addControl(checkbox);
+                var header = new BABYLON_GUI.TextBlock();
+                header.text = "自动旋转";
+                header.width = "80px";
+                header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+                header.color = "white";
+                header.top = '100px';
+                control_main.addControl(header);
+                // 添加抓取事件
+                const hl1 = new BABYLON.HighlightLayer("hl1", scene);
+                const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
+                canvas.addEventListener('mousemove', (event) => {
+                    // 使用 scene.pick 检测鼠标拾取
+                    const pickResult = scene.pick(scene.pointerX, scene.pointerY);
+                    if (that.currentLightMesh) {
+                        that.infoVisibel = false;
+                        mesh_rect.isVisible = false;
+                        hl1.removeAllMeshes();
+                        highlightLayer.removeAllMeshes();
+                    }
+                    if (pickResult.hit) {
+                        const mesh = pickResult.pickedMesh;
+                        highlightLayer.removeAllMeshes();
+                        let key = mesh.name;
+                        if (that.nodesLists[key]) {
+                            hl1.removeAllMeshes();
+                            highlightLayer.removeAllMeshes();
+                            that.getDeptDetail(that.nodesLists[key])
+                            //单身宿舍.003_primitive3
+                            // 在选中的 mesh 上添加高亮效果
+                            highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
+                            that.currentLightMesh = mesh;
+                            mesh_rect.linkWithMesh(mesh);
+                            let name = mesh.name.split('_')[0];
+                            mesh_name.text = name;
+                            // mesh_rect.isVisible = true;
 
-                      showSymbol: false,
-                      areaStyle: {
-                          opacity: 0.8,
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgba(1,235,239)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(5, 158, 163)'
-                              }
-                          ])
-                      },
-                      emphasis: {
-                          focus: 'series'
-                      },
-                      data: [140, 232, 101, 264, 90, 340, 250]
-                  },
-                  {
-                      name: 'AVG',
-                      type: 'line',
-                      stack: 'Total',
-                      smooth: true,
-                      lineStyle: {
-                          width: 1, color: 'rgb(250,205,0)'
-                      },
-                      showSymbol: false,
-                      areaStyle: {
-                          opacity: 0.8,
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(254,129,0)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(250,205,0)'
-                              }
-                          ])
-                      },
-                      emphasis: {
-                          focus: 'series'
-                      },
-                      data: [120, 282, 111, 234, 220, 340, 310]
-                  },
-              ]
-          };
-          myChart.setOption(option);
-          //左边2
-          let bar1 = document.getElementById('bar1');
-          bar1.style.height = this.blockHeight;
-          let bar1Chart = echarts.init(bar1);
-          let bar1option = {
-              tooltip: {
-                  trigger: 'axis',
-                  axisPointer: {
-                      type: 'shadow'
-                  }
-              },
-              legend: {
-                  top: 5,
-                  right: 5,
-                  data: [
-                  {
-                          name: 'AVG',
-                          textStyle: {
-                              color: '#fff'
-                          },
-                          itemStyle: {
-                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(5,245,2)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(7,137,43)'
-                              }
-                              ])
-                          }
-                      },
-                     
-                      {
-                          name: '预制管',
-                          textStyle: {
-                              color: '#fff'
-                          },
-                          itemStyle: {
-                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                  {
-                                      offset: 0,
-                                      color: 'rgb(250,205,0)'
-                                  },
-                                  {
-                                      offset: 1,
-                                      color: 'rgb(254,129,0)'
-                                  }
-                              ])
-                          }
-                      },
-                      {
-                          name: '预制棒',
-                          textStyle: {
-                              color: '#fff'
-                          },
-                          itemStyle: {
-                              // color:'rgb(1,235,239)',
-                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                  {
-                                      offset: 0,
-                                      color: 'rgb(1,235,239)'
-                                  },
-                                  {
-                                      offset: 1,
-                                      color: 'rgb(5, 158, 163)'
-                                  }])
-                          },
-                      },
-                  ]
-              },
-              grid: {
-                  left: '3%',
-                  right: '4%',
-                  bottom: '5%',
-                  containLabel: true
-              },
-              xAxis: [
-                  {
-                      type: 'category',
-                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                  }
-              ],
-              yAxis: [
-                  {
-                      name: "合格数(个)",
-                      type: 'value',
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                      splitLine: {
-                          show: false
-                      },
-                  }
-              ],
-              series: [
-                  {
-                      name: '预制棒',
-                      type: 'bar',
-                      stack: 'Ad',
-                      emphasis: {
-                          focus: 'series'
-                      },
-                      itemStyle: {
-                          // color:'rgb(1,235,239)',
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(1,235,239)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(5, 158, 163)'
-                              }])
-                      },
-                      barWidth: 15,
-                      data: [120, 132, 101, 134, 90, 230, 300]
-                  },
-                  {
-                      name: '预制管',
-                      type: 'bar',
-                      stack: 'Ad',
-                      barWidth: 20,
-                      emphasis: {
-                          focus: 'series'
-                      },
-                      itemStyle: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(250,205,0)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(254,129,0)'
-                              }
-                          ])
-                      },
-                      data: [220, 182, 191, 234, 290, 330, 200]
-                  },
-                  {
-                      name: 'AVG',
-                      type: 'bar',
-                      stack: 'Ad',
-                      barWidth: 20,
-                      emphasis: {
-                          focus: 'series'
-                      },
-                      itemStyle: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(5,245,2)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(7,137,43)'
-                              }
-                          ])
-                      },
-                      data: [220, 182, 191, 234, 290, 330, 150]
-                  }
-              ]
-          };
-          bar1Chart.setOption(bar1option);
-          //左3
-          let line2Dom = document.getElementById('line2');
-          line2Dom.style.height = this.blockHeight;
-          let line2Chart = echarts.init(line2Dom);
-          let line2option = {
-              tooltip: {
-                  trigger: 'axis'
-              },
-              legend: {
-                  top: 5,
-                  right: 5,
-                  data: [
-                      {
-                          name: '预制棒',
-                          textStyle: {
-                              color: '#fff'
-                          },
-                          itemStyle: {
-                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                  {
-                                      offset: 0,
-                                      color: 'orange'
-                                  },
-                                  {
-                                      offset: 1,
-                                      color: 'yellow'
-                                  }])
-                          },
-                      },
-                      {
-                          name: '预制管',
-                          textStyle: {
-                              color: '#fff'
-                          },
-                          itemStyle: {
-                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(1,235,239)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(5, 158, 163)'
-                              }])
-                          },
-                      },
-                  ],
-              },
-              grid: {
-                  left: '3%',
-                  right: '4%',
-                  bottom: '5%',
-                  containLabel: true
-              },
-              xAxis: {
-                  type: 'category',
-                  boundaryGap: false,
-                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-                  nameTextStyle: {
-                      color: '#ffffff'
-                  },
-                  axisLabel: {
-                      color: '#ffffff'
-                  },
+                            hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
+                            hl1.blurVerticalSize = 5;
+                            hl1.blurHorizontalSize = 5;
+                            function worldToScreen(point, camera, scene, engine) {
+                                return BABYLON.Vector3.Project(point,
+                                    BABYLON.Matrix.Identity(),
+                                    scene.getTransformMatrix(),
+                                    camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
+                            }
+                            var pos = worldToScreen(mesh.absolutePosition, camera, scene, engine);
+                            let infoBlock = document.getElementById('inforBlock');
+                            infoBlock.style.left = (Math.floor(pos.x)) + 'px';
+                            infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
+                        }
+                    } else {
+                        that.infoVisibel = false;
+                    }
+                });
+                canvas.addEventListener('click', (event) => {
+                    // 使用 scene.pick 检测鼠标拾取
+                    const pickResult = scene.pick(scene.pointerX, scene.pointerY);
+                    if (pickResult.hit) {
+                        const mesh = pickResult.pickedMesh;
+                        console.log('mesh', mesh)
+                        if (that.nodesLists[mesh.name]) {
+                            hl1Click.removeAllMeshes();
+                            highlightLayer.removeAllMeshes();
 
-              },
-              yAxis: {
-                  name: '合格率(%)',
-                  type: 'value',
-                  nameTextStyle: {
-                      color: '#ffffff'
-                  },
-                  axisLabel: {
-                      color: '#ffffff'
-                  },
-                  splitLine: {
-                      show: true,
-                      lineStyle: {
-                          type: 'dashed', //y轴分割线类型
-                          color: 'rgba(102,102,102,0.9)',
-                          width: 1,
-                      },
-                  },
-              },
+                            highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
+                            hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
+                            hl1Click.blurVerticalSize = 5;
+                            hl1Click.blurHorizontalSize = 5;
+                            that.currentObj.deptName = that.nodesLists[mesh.name];
+                            if (camera.target != mesh.position) {
+                                that.clickVisible = true;
+                                // 计算新的相机位置
+                                let position = mesh._parentNode._position
+                                if (mesh._parentNode.id == '__root__') {
+                                    position = mesh.position
+                                }
+                                const cameraPosition = new BABYLON.Vector3(
+                                    position.x + 1.8 * Math.sin(camera.beta),
+                                    position.y + 4 * Math.cos(camera.beta),
+                                    position.z - 0.2 * Math.sin(camera.beta)
+                                );
+                                var ease = new BABYLON.CubicEase();
+                                ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+                                BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
+                                BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
+                            }
+                        }
+                    }
+                });
+                return scene;
+            };
+            const scene = createScene(); //Call the createScene function
+            // scene.debugLayer.show()
+            engine.runRenderLoop(function () {
+                scene.render();
+            });
+            this.engine = engine;
+            this.scene = scene;
+            //   console.log('scene:',scene)
+            window.addEventListener("resize", function () {
+                engine.resize();
+            });
+        },
+        getDeptDetail(name) {
+            if (this.currentObj.deptName == name && this.clickVisible) {
+                this.dialogData.deptName = name;
+            } else {
+                this.infoVisibel = true;
+                this.dialogData.deptName = name;
+            }
+        },
+        initChart() {
+            //左1
+            let chartDom = document.getElementById('line1');
+            chartDom.style.height = this.blockHeight;
+            let myChart = echarts.init(chartDom);
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                legend: {
+                    icon: "stack",
+                    top: 5,
+                    right: 5,
+                    data: [
+                        {
+                            backgroundColor: 'rgb(1,235,239)',
+                            name: '预制棒管',
 
-              series: [
-              {
-                  name: '预制棒',
-                  type: 'line',
-                  stack: 'Total',
-                  symbolSize: 8,  //设置折线上圆点大小
-                  symbol: 'circle',
-                  itemStyle: {
-                      // 设置symbol的颜色
-                      normal: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'orange'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'yellow'
-                              }])
-                      }
-                  },
-                  smooth: 0.5, // 设置折线弧度
-                  data: [75, 60 ,80 ,78, 66 , 71, 81],
-                  lineStyle: {
-                      color: {
-                          type: 'linear',
-                          x: 0,
-                          y: 0,
-                          x2: 1,
-                          y2: 0,
-                          colorStops: [{
-                              offset: 0, color: 'orange' // 0% 处的颜色
-                          }, {
-                              offset: 1, color: 'yellow' // 100% 处的颜色
-                          }],
-                          globalCoord: false // 缺省为 false
-                      }
-                  },
-              },
-              {
-                  name: '预制管',
-                  type: 'line',
-                  stack: 'Total',
-                  symbolSize: 8,  //设置折线上圆点大小
-                  symbol: 'circle',
-                  itemStyle: {
-                      // 设置symbol的颜色
-                      normal: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(1,235,239)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(5, 158, 163)'
-                              }])
-                      }
-                  },
-                  smooth: 0.5, // 设置折线弧度
-                  data: [65, 50 ,70 ,68, 55 , 60, 69],
-                  lineStyle: {
-                      color: {
-                          type: 'linear',
-                          x: 0,
-                          y: 0,
-                          x2: 1,
-                          y2: 0,
-                          colorStops: [{
-                              offset: 0,  color: 'rgb(1,235,239)' // 0% 处的颜色
-                          }, {
-                              offset: 1, color: 'rgb(5, 158, 163)' // 100% 处的颜色
-                          }],
-                          globalCoord: false // 缺省为 false
-                      }
-                  },
-              }
-              ]
-          };
-          line2Chart.setOption(line2option);
-          //柱状图折线
-          let line3Dom = document.getElementById('line3');
-          line3Dom.style.height = this.blockHeight;
-          let line3Chart = echarts.init(line3Dom);
-          let line3option = {
-              tooltip: {
-                  trigger: 'axis',
-                  axisPointer: {
-                      type: 'cross',
-                      crossStyle: {
-                          color: '#999'
-                      }
-                  }
-              },
-              grid: {
-                  left: '3%',
-                  right: '4%',
-                  bottom: '3%',
-                  containLabel: true
-              },
-              legend: {
-                  right: 0,
-                  data: ['数量', '合格率'],
-                  textStyle: {
-                      color: '#fff'
-                  }
-              },
-              xAxis: [
-                  {
-                      type: 'category',
-                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-                      axisPointer: {
-                          type: 'shadow'
-                      },
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                  }
-              ],
-              yAxis: [
-                  {
-                      type: 'value',
-                      name: '数量',
-                      min: 0,
-                      interval: 50,
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      axisLabel: {
-                          color: '#ffffff'
-                      },
-                      splitLine: {
-                          show: false,
-                      },
-                  },
-                  {
-                      type: 'value',
-                      name: '合格率',
-                      min: 0,
-                      max: 100,
-                      interval: 20,
-                      axisLabel: {
-                          formatter: '{value} %',
-                          color: '#ffffff'
-                      },
-                      nameTextStyle: {
-                          color: '#ffffff'
-                      },
-                      splitLine: {
-                          show: false,
-                      },
-                  }
-              ],
-              series: [
-                  {
-                      name: '数量',
-                      type: 'bar',
-                      tooltip: {
-                          valueFormatter: function (value) {
-                              return value;
-                          }
-                      },
-                      barWidth: 15,
-                      data: [220, 250, 280, 290, 250, 300, 210],
-                      itemStyle: {
-                          borderRadius: [5, 5, 0, 0],
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                  offset: 0,
-                                  color: 'rgb(13,176,176)'
-                              },
-                              {
-                                  offset: 1,
-                                  color: 'rgb(246,163,58)'
-                              }])
-                      },
-                  },
-                  {
-                      name: '合格率',
-                      type: 'line',
-                      yAxisIndex: 1,
-                      // 255,120,0
-                      tooltip: {
-                          valueFormatter: function (value) {
-                              return value;
-                          }
-                      },
-                      symbol: 'circle',
-                      symbolSize: 8,
-                      itemStyle: {
-                          // 设置symbol的颜色
-                          normal: {
-                              color: 'rgb(255,120,0)'
-                          }
-                      },
-                      lineStyle: {
-                          color: 'rgb(255,120,0)'
-                      },
-                      data: [63, 80, 71, 82, 60, 70, 85],
-                  }
-              ]
-          };
-          line3Chart.setOption(line3option);
-          //饼状图
-          let pieDom = document.getElementById('pie');
-          pieDom.style.height = this.blockHeight;
-          let pieChart = echarts.init(pieDom);
-          let pieoption = {
-              color: ['rgb(3,195,198)','rgb(155,248,249)', 'rgb(110,181,249)','rgb(205,248,248)', 'rgb(248,189,118)'],
-              legend: {
-                  bottom: 10,
-                  // top: 'bottom',
-                  textStyle: {
-                      color: '#fff'
-                  }
-              },
-              grid: {
-                  left: '3%',
-                  right: '4%',
-                  bottom: '3%',
-                  containLabel: true
-              },
-              toolbox: {
-                  show: true,
-              },
-              series: [
-                  {
-                      name: '不合格占比',
-                      type: 'pie',
-                      radius: [30, 60],
-                      center: ['50%', '45%'],
-                      // roseType: 'area',
-                      itemStyle: {
-                          borderRadius: 2
-                      },
-                      // label: {
-                      //     fontSize: 12,
-                      //     alignTo: 'edge',
-                      //     formatter: '{b}\n',
-                      //     edgeDistance: 10,
-                      //     lineHeight: 20,
-                      //     rich: {
-                      //         title: {
-                      //             fontSize: 12,
-                      //             color: '#999',
-                      //             lineHeight: 50,
-                      //         },
-                      //     }
-                      // },
-                      // labelLayout: function (params) {
-                      //     var isLeft = params.labelRect.x < myChart.getWidth() / 2;
-                      //     var points = params.labelLinePoints;
-                      //     points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
-                      //     return {
-                      //         labelLinePoints: points
-                      //     };
-                      // },
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(250,205,0)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(254,129,0)'
+                                    }
+                                ])
+                            }
+                        }, {
+                            name: 'AVG',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                // color:'rgb(1,235,239)',
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(1,235,239)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(5, 158, 163)'
+                                    }])
+                            },
+                        }],
 
-                      label: {
-                          minMargin: 10,
-                          edgeDistance: 10,
-                          fontSize: '12px'
-                      },
-                      labelLine: {
-                          lineStyle: {
-                          },
-                          length: 2,
-                          length2: 5
-                      },
-                      labelLayout: function (params) {
-                          var isLeft = params.labelRect.x < myChart.getWidth() / 2
-                          var points = params.labelLinePoints;
-                          points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
-                          return {
-                              labelLinePoints: points,
-                              dy: -10,
-                              dx: 0
-                          }
-                      },
+                },
+                toolbox: {
+                    feature: {
+                        // saveAsImage: {}
+                    }
+                },
+                grid: {
+                    left: '2%',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                    }
+                ],
+                yAxis: [
+                    {
+                        name: "交付数(个)",
+                        type: 'value',
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
+                        },
+                    }
+                ],
+                series: [
+                    {
+                        name: '预制棒管',
+                        type: 'line',
+                        stack: 'Total',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1, color: 'rgb(1,235,239)'
+                        },
 
-                      data: [
-                          { value: 250, name: '合格' },
-                          { value: 8, name: '椭圆弯曲' },
-                          { value: 0, name: '大小头' },
-                          { value: 2, name: '偏壁' },
-                          { value: 6, name: '结石气线' },
-                          
-                          
-                      ]
-                  }
-              ]
-          };
-          pieChart.setOption(pieoption);
-      },
-      circleClose(){
-        this.clickVisible = false;
-        this.currentObj.deptName = '';
-      },
-  },
-  beforeDestoryed() {
-      clearInterval(timerTime); 
-      this.timerTime = null;
-  },
+                        showSymbol: false,
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(1,235,239)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(5, 158, 163)'
+                                }
+                            ])
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [140, 232, 101, 264, 90, 340, 250]
+                    },
+                    {
+                        name: 'AVG',
+                        type: 'line',
+                        stack: 'Total',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1, color: 'rgb(250,205,0)'
+                        },
+                        showSymbol: false,
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(254,129,0)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(250,205,0)'
+                                }
+                            ])
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [120, 282, 111, 234, 220, 340, 310]
+                    },
+                ]
+            };
+            myChart.setOption(option);
+            //左边2
+            let bar1 = document.getElementById('bar1');
+            bar1.style.height = this.blockHeight;
+            let bar1Chart = echarts.init(bar1);
+            let bar1option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    top: 5,
+                    right: 5,
+                    data: [
+                        {
+                            name: 'AVG',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(5,245,2)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(7,137,43)'
+                                    }
+                                ])
+                            }
+                        },
+
+                        {
+                            name: '预制管',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(250,205,0)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(254,129,0)'
+                                    }
+                                ])
+                            }
+                        },
+                        {
+                            name: '预制棒',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                // color:'rgb(1,235,239)',
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(1,235,239)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(5, 158, 163)'
+                                    }])
+                            },
+                        },
+                    ]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                    }
+                ],
+                yAxis: [
+                    {
+                        name: "合格数(个)",
+                        type: 'value',
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                    }
+                ],
+                series: [
+                    {
+                        name: '预制棒',
+                        type: 'bar',
+                        stack: 'Ad',
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle: {
+                            // color:'rgb(1,235,239)',
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(1,235,239)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(5, 158, 163)'
+                                }])
+                        },
+                        barWidth: 15,
+                        data: [120, 132, 101, 134, 90, 230, 300]
+                    },
+                    {
+                        name: '预制管',
+                        type: 'bar',
+                        stack: 'Ad',
+                        barWidth: 20,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(250,205,0)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(254,129,0)'
+                                }
+                            ])
+                        },
+                        data: [220, 182, 191, 234, 290, 330, 200]
+                    },
+                    {
+                        name: 'AVG',
+                        type: 'bar',
+                        stack: 'Ad',
+                        barWidth: 20,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(5,245,2)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(7,137,43)'
+                                }
+                            ])
+                        },
+                        data: [220, 182, 191, 234, 290, 330, 150]
+                    }
+                ]
+            };
+            bar1Chart.setOption(bar1option);
+            //左3
+            let line2Dom = document.getElementById('line2');
+            line2Dom.style.height = this.blockHeight;
+            let line2Chart = echarts.init(line2Dom);
+            let line2option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    top: 5,
+                    right: 5,
+                    data: [
+                        {
+                            name: '预制棒',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'orange'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'yellow'
+                                    }])
+                            },
+                        },
+                        {
+                            name: '预制管',
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(1,235,239)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(5, 158, 163)'
+                                    }])
+                            },
+                        },
+                    ],
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                    nameTextStyle: {
+                        color: '#ffffff'
+                    },
+                    axisLabel: {
+                        color: '#ffffff'
+                    },
+
+                },
+                yAxis: {
+                    name: '合格率(%)',
+                    type: 'value',
+                    nameTextStyle: {
+                        color: '#ffffff'
+                    },
+                    axisLabel: {
+                        color: '#ffffff'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: 'dashed', //y轴分割线类型
+                            color: 'rgba(102,102,102,0.9)',
+                            width: 1,
+                        },
+                    },
+                },
+
+                series: [
+                    {
+                        name: '预制棒',
+                        type: 'line',
+                        stack: 'Total',
+                        symbolSize: 8,  //设置折线上圆点大小
+                        symbol: 'circle',
+                        itemStyle: {
+                            // 设置symbol的颜色
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'orange'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'yellow'
+                                    }])
+                            }
+                        },
+                        smooth: 0.5, // 设置折线弧度
+                        data: [75, 60, 80, 78, 66, 71, 81],
+                        lineStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'orange' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'yellow' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                    },
+                    {
+                        name: '预制管',
+                        type: 'line',
+                        stack: 'Total',
+                        symbolSize: 8,  //设置折线上圆点大小
+                        symbol: 'circle',
+                        itemStyle: {
+                            // 设置symbol的颜色
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(1,235,239)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(5, 158, 163)'
+                                    }])
+                            }
+                        },
+                        smooth: 0.5, // 设置折线弧度
+                        data: [65, 50, 70, 68, 55, 60, 69],
+                        lineStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgb(1,235,239)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgb(5, 158, 163)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                    }
+                ]
+            };
+            line2Chart.setOption(line2option);
+            //柱状图折线
+            let line3Dom = document.getElementById('line3');
+            line3Dom.style.height = this.blockHeight;
+            let line3Chart = echarts.init(line3Dom);
+            let line3option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    right: 0,
+                    data: ['数量', '合格率'],
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                        axisPointer: {
+                            type: 'shadow'
+                        },
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '数量',
+                        min: 0,
+                        interval: 50,
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        type: 'value',
+                        name: '合格率',
+                        min: 0,
+                        max: 100,
+                        interval: 20,
+                        axisLabel: {
+                            formatter: '{value} %',
+                            color: '#ffffff'
+                        },
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    }
+                ],
+                series: [
+                    {
+                        name: '数量',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value;
+                            }
+                        },
+                        barWidth: 15,
+                        data: [220, 250, 280, 290, 250, 300, 210],
+                        itemStyle: {
+                            borderRadius: [5, 5, 0, 0],
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(13,176,176)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(246,163,58)'
+                                }])
+                        },
+                    },
+                    {
+                        name: '合格率',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        // 255,120,0
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value;
+                            }
+                        },
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        itemStyle: {
+                            // 设置symbol的颜色
+                            normal: {
+                                color: 'rgb(255,120,0)'
+                            }
+                        },
+                        lineStyle: {
+                            color: 'rgb(255,120,0)'
+                        },
+                        data: [63, 80, 71, 82, 60, 70, 85],
+                    }
+                ]
+            };
+            line3Chart.setOption(line3option);
+            //饼状图
+            let pieDom = document.getElementById('pie');
+            pieDom.style.height = this.blockHeight;
+            let pieChart = echarts.init(pieDom);
+            let pieoption = {
+                color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)', 'rgb(248,189,118)'],
+                legend: {
+                    bottom: 10,
+                    // top: 'bottom',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    show: true,
+                },
+                series: [
+                    {
+                        name: '不合格占比',
+                        type: 'pie',
+                        radius: [30, 60],
+                        center: ['50%', '45%'],
+                        // roseType: 'area',
+                        itemStyle: {
+                            borderRadius: 2
+                        },
+                        // label: {
+                        //     fontSize: 12,
+                        //     alignTo: 'edge',
+                        //     formatter: '{b}\n',
+                        //     edgeDistance: 10,
+                        //     lineHeight: 20,
+                        //     rich: {
+                        //         title: {
+                        //             fontSize: 12,
+                        //             color: '#999',
+                        //             lineHeight: 50,
+                        //         },
+                        //     }
+                        // },
+                        // labelLayout: function (params) {
+                        //     var isLeft = params.labelRect.x < myChart.getWidth() / 2;
+                        //     var points = params.labelLinePoints;
+                        //     points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
+                        //     return {
+                        //         labelLinePoints: points
+                        //     };
+                        // },
+
+                        label: {
+                            minMargin: 10,
+                            edgeDistance: 10,
+                            fontSize: '12px'
+                        },
+                        labelLine: {
+                            lineStyle: {
+                            },
+                            length: 2,
+                            length2: 5
+                        },
+                        labelLayout: function (params) {
+                            var isLeft = params.labelRect.x < myChart.getWidth() / 2
+                            var points = params.labelLinePoints;
+                            points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
+                            return {
+                                labelLinePoints: points,
+                                dy: -10,
+                                dx: 0
+                            }
+                        },
+
+                        data: [
+                            { value: 250, name: '合格' },
+                            { value: 8, name: '椭圆弯曲' },
+                            { value: 0, name: '大小头' },
+                            { value: 2, name: '偏壁' },
+                            { value: 6, name: '结石气线' },
+
+
+                        ]
+                    }
+                ]
+            };
+            pieChart.setOption(pieoption);
+        },
+        circleClose() {
+            this.clickVisible = false;
+            this.currentObj.deptName = '';
+        },
+    },
+    beforeDestoryed() {
+        clearInterval(timerTime);
+        this.timerTime = null;
+    },
 
 }
 </script>
 <style scoped>
-    @font-face {
-        font-family: 'myfont'; /* 字体名称 */
-        src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
-    }
-    .container {
-        background: url('/public/img/photon_bg.png') no-repeat;
-        background-size: cover;
+@font-face {
+    font-family: 'myfont';
+    /* 字体名称 */
+    src: url('../../utils/youShe.ttf');
+    /* 字体文件相对路径 */
+}
+
+.container {
+    background: url('/public/img/photon_bg.png') no-repeat;
+    background-size: cover;
+}
+
+.pageHeader {
+    font-size: 32px;
+    background: none;
+    border-bottom: none;
+    position: relative;
+    display: block;
+    text-align: center;
+    color: #ffffff;
+    padding: 1px;
+    font-family: "myfont";
+    background: url('/public/img/photon_header.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.top-line {
+    height: 1px;
+    width: 3%;
+    position: absolute;
+    bottom: 5px;
+    background: rgba(54, 217, 187, 1);
+}
+
+.top-line-left {
+    left: 24%;
+}
+
+.top-line-right {
+    right: 24%;
+}
+
+.flexItem {
+    margin-bottom: 10px;
+}
+
+.blockTitle {
+    color: #fff;
+    height: 40px;
+    padding-left: 10px;
+    font-size: 16px;
+    line-height: 40px;
+    font-weight: bold;
+    background: url('/public/img/photon_title.png');
+    background-size: 100% 100%;
+    display: flex;
+}
+
+.blockTitleIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 10px;
+    margin-right: 5px;
+    display: inline-block;
+    animation: rotate 3s infinite;
+    transform-origin: center center;
+    background: url('/public/img/photon_title_icon.png');
+    background-size: 100% 100%;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
     }
 
-    .pageHeader {
-        font-size: 32px;
-        background: none;
-        border-bottom: none;
-        position: relative;
-        display: block;
-        text-align: center;
-        color: #ffffff;
-        padding: 1px;
-        font-family: "myfont";
-        background: url('/public/img/photon_header.png') no-repeat;
-        background-size: 100% 100%;
+    25% {
+        transform: rotate(90deg);
     }
 
-    .top-line {
-        height: 1px;
-        width: 3%;
-        position: absolute;
-        bottom: 5px;
-        background: rgba(54, 217, 187, 1);
+    50% {
+        transform: rotate(180deg);
     }
 
-    .top-line-left {
-        left: 24%;
+    75% {
+        transform: rotate(270deg);
     }
 
-    .top-line-right {
-        right: 24%;
+    100% {
+        transform: rotate(360deg);
     }
+}
 
-    .flexItem {
-        margin-bottom: 10px;
-    }
+.row-item {
+    height: 40px !important;
+    line-height: 40px !important;
+}
 
-    .blockTitle {
-        color: #fff;
-        height: 40px;
-        padding-left: 10px;
-        font-size: 16px;
-        line-height: 40px;
-        font-weight:bold;
-        background: url('/public/img/photon_title.png');
-        background-size: 100% 100%;
-        display: flex;
-    }
+#scrollTable>.hader {
+    background: rgb(10, 63, 68) !important;
+    background-color: #0a3f44 !important;
+}
 
-    .blockTitleIcon {
-        width: 20px;
-        height: 20px;
-        margin-top: 10px;
-        margin-right: 5px;
-        display: inline-block;
-        animation: rotate 3s infinite;
-        transform-origin: center center;
-        background: url('/public/img/photon_title_icon.png');
-        background-size: 100% 100%;
-    }
+.model {
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
 
-    @keyframes rotate {
-        0% {
-            transform: rotate(0deg);
-        }
+#renderCanvas {
+    width: 100%;
+    height: 100%
+}
 
-        25% {
-            transform: rotate(90deg);
-        }
+#loadingScreen {
+    position: absolute;
+    width: 100%;
+    top: 260px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+}
 
-        50% {
-            transform: rotate(180deg);
-        }
+.numberFont {
+    font-size: 22px;
+    font-weight: bold;
+}
 
-        75% {
-            transform: rotate(270deg);
-        }
+.numberUnit {
+    font-size: 12px;
+}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
+#dashbordProcess .el-progress-circle {
+    height: 60px !important;
+    width: 60px !important;
+}
 
-    .row-item {
-        height: 40px !important;
-        line-height: 40px !important;
-    }
+.el-progress--circle .el-progress__text {
+    display: block;
+    margin-top: 1px;
+    color: #fff;
+    font-size: 20px !important;
+    font-weight: bold !important;
+}
 
-    #scrollTable>.hader {
-        background: rgb(10, 63, 68) !important;
-        background-color: #0a3f44 !important;
-    }
+.totalNumContnier {
+    display: flex;
+    width: fit-content;
+    margin: auto;
+}
 
-    .model {
-        top: 0;
-        width: 100%;
-        height: 100%;
-    }
+.totalNumWrap {
+    margin: 0 10px;
+    position: relative;
+}
 
-    #renderCanvas {
-        width: 100%;
-        height: 100%
-    }
+.totalNumWrap>img {
+    width: 10vw;
+}
 
-    #loadingScreen {
-        position: absolute;
-        width: 100%;
-        top: 260px;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 30px;
-    }
+.totalNumWrap_green>.totalNumber {
+    color: rgb(5, 245, 2);
+}
 
-    .numberFont {
-        font-size: 22px;
-        font-weight: bold;
-    }
+.totalNum_orange>.totalNumber {
+    color: orange;
+}
 
-    .numberUnit {
-        font-size: 12px;
-    }
+.totalNum_blue>.totalNumber {
+    color: rgb(2, 245, 242);
+}
 
-    #dashbordProcess .el-progress-circle {
-        height: 60px !important;
-        width: 60px !important;
-    }
+.totalNumber {
+    font-size: 25px;
+    font-weight: bold;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
 
-    .el-progress--circle .el-progress__text {
-        display: block;
-        margin-top: 1px;
-        color: #fff;
-        font-size: 20px !important;
-        font-weight: bold !important;
-    }
-    .totalNumContnier{
-        display: flex;
-        width: fit-content;
-        margin: auto;
-    }
-    .totalNumWrap{
-        margin: 0 10px;
-        position: relative;
-    }
-    .totalNumWrap>img{
-        width: 10vw;
-    }
-    .totalNumWrap_green>.totalNumber{
-        color: rgb(5,245,2);
-    }
-    .totalNum_orange>.totalNumber{
-        color: orange;
-    }
-    .totalNum_blue>.totalNumber{
-        color: rgb(2,245,242);
-    }
-    .totalNumber{
-        font-size: 25px;
-        font-weight: bold;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-    .totalNumText{
-        color: #fff;
-        font-weight: bold;
-        font-size: 0.7vw;
-        position: absolute;
-        top: -6px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
+.totalNumText {
+    color: #fff;
+    font-weight: bold;
+    font-size: 0.7vw;
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+}
 
-    .inforBlock {
-        left: 60%;
-        top: 30%;
-        width: 420px;
-        height: 150px;
-        position: absolute;
-        font-weight: 500;
-        color: #fff;
-        padding: 20px;
-        font-size: 14px;
-        box-sizing: border-box;
-        background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
-    }
-    .inforBlock.clickBlock{
-        left: 50%;
-        width: 630px;
-        height: 225px;
-        padding:40px;
-        font-size:16px;
-        transform:translateX(-50%)
-    }
-    .inforBlock>.border_corner {
-        z-index: 2500;
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        background: rgba(0, 0, 0, 0);
-        border: 2px solid rgba(54, 217, 187, 1);
-    }
+.inforBlock {
+    left: 60%;
+    top: 30%;
+    width: 420px;
+    height: 150px;
+    position: absolute;
+    font-weight: 500;
+    color: #fff;
+    padding: 20px;
+    font-size: 14px;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
+}
 
-    .inforBlock>.border_left_top {
-        top: 0;
-        left: 0;
-        border-right: none;
-        border-bottom: none;
-    }
+.inforBlock.clickBlock {
+    left: 50%;
+    width: 630px;
+    height: 225px;
+    padding: 40px;
+    font-size: 16px;
+    transform: translateX(-50%)
+}
 
-    .inforBlock>.border_right_top {
-        top: 0;
-        right: 0;
-        border-left: none;
-        border-bottom: none;
-    }
+.inforBlock>.border_corner {
+    z-index: 2500;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: rgba(0, 0, 0, 0);
+    border: 2px solid rgba(54, 217, 187, 1);
+}
 
-    .inforBlock>.border_left_bottom {
-        bottom: 0;
-        left: 0;
-        border-right: none;
-        border-top: none;
-    }
+.inforBlock>.border_left_top {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+}
 
-    .inforBlock>.border_right_bottom {
-        bottom: 0;
-        right: 0;
-        border-left: none;
-        border-top: none;
-    }
+.inforBlock>.border_right_top {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+}
 
-    .inforBlock>.title {
-        font-size: 20px;
-        font-weight: 600;
-        position: absolute;
-        top: -45px;
-        text-align: center;
-        width: 100%;
-        left: 0;
-    }
+.inforBlock>.border_left_bottom {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+}
 
-    .inforBlock>.infoCantier {
-        display: flex;
+.inforBlock>.border_right_bottom {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+}
 
-    }
-    .infoCantier>.leftBlock {
-        width: 100px;
-        display: flex;
-        flex-direction: column;
-        margin-right: 30px;
-    }
-    .infoCantier>.rightBlock {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-    .infoCantier>.rightBlock>.countWrap {
-        display: flex;
-        justify-content: space-between;
-        width: 280px;
-        margin-top: 10px
-    }
-    /* .clickBlock{
+.inforBlock>.title {
+    font-size: 20px;
+    font-weight: 600;
+    position: absolute;
+    top: -45px;
+    text-align: center;
+    width: 100%;
+    left: 0;
+}
+
+.inforBlock>.infoCantier {
+    display: flex;
+
+}
+
+.infoCantier>.leftBlock {
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    margin-right: 30px;
+}
+
+.infoCantier>.rightBlock {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.infoCantier>.rightBlock>.countWrap {
+    display: flex;
+    justify-content: space-between;
+    width: 280px;
+    margin-top: 10px
+}
+
+/* .clickBlock{
         position:relative;
     } */
-    .circleClose{
-        position: absolute;
+.circleClose {
+    position: absolute;
     right: 10px;
     top: 10px;
     width: 30px;
     height: 30px;
-    }
+}
+
+.percentage-value {
+    display: block;
+    margin-top: 6px;
+    font-size: 28px;
+    color: white;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/home/widgets/index_photon.vue b/src/views/home/widgets/index_photon.vue
index fb683e29..6e8435f1 100644
--- a/src/views/home/widgets/index_photon.vue
+++ b/src/views/home/widgets/index_photon.vue
@@ -12,7 +12,7 @@
 			</div>
 			<div class="retangleWrap">
 				<div class="retangle countRetangle">
-					<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
+					<div style="display: flex;justify-content: space-between;padding: 0 24px;">
 						<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">昨日核心指标</div>
 						<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">时间</div>
 					</div>
@@ -91,9 +91,11 @@
 				<el-col :span="14">
 					<div class="retangleWrap" style="padding-right: 0;">
 						<div class="retangle bottomRetangle">
-							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
-								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">本月生产合格趋势</div>
-								<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
+							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
+								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">
+									本月生产合格趋势</div>
+								<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...
+								</div>
 							</div>
 							<div style="padding: 20px 24px 0 24px;background: #ffffff;">
 								<div class="bottomItem">
@@ -109,17 +111,18 @@
 				<el-col :span="10">
 					<div class="retangleWrap retangleWrapTable">
 						<div class="retangle tableRetangle">
-							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
-								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况</div>
+							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
+								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况
+								</div>
 							</div>
 							<div style="padding: 20px 24px 24px 24px;">
 								<el-table :data="tableData" style="width: 100%;height: 285px;">
-									<el-table-column prop="index" label="序号" width="40"/>
-									<el-table-column prop="number" label="名称"/>
-									<el-table-column prop="name" label="规格"/>
-									<el-table-column prop="state" label="型号"/>
-									<el-table-column prop="state" label="单位"/>
-									<el-table-column prop="state" label="库存"/>
+									<el-table-column prop="index" label="序号" width="60" />
+									<el-table-column prop="name" label="名称" />
+									<el-table-column prop="specification" label="规格" />
+									<el-table-column prop="specification" label="型号" />
+									<el-table-column prop="unit" label="单位" />
+									<el-table-column prop="count" label="库存" />
 								</el-table>
 							</div>
 						</div>
@@ -152,7 +155,7 @@
 							</div>
 						</div> -->
 						<div class="retangle bottomRetangle" style="background: rgb(20,141,255);color:#ffffff;">
-							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
+							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
 								<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
 							</div>
 							<div style="padding: 20px 24px 24px 24px;height: 311px;">
@@ -166,15 +169,20 @@
 				<el-col :span="10">
 					<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
 						<div class="retangle tableRetangle">
-							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
-								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备</div>
+							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
+								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备
+								</div>
 							</div>
 							<div style="padding: 20px 24px 24px 24px;">
-								<el-table :data="tableData" style="width: 100%;height: 285px;">
-									<el-table-column prop="index" label="序号"/>
-									<el-table-column prop="number" label="设备编号"/>
-									<el-table-column prop="name" label="设备名称"/>
-									<el-table-column prop="state" label="设备状态"/>
+								<el-table :data="equipList" style="width: 100%;height: 285px;">
+									<el-table-column prop="number" label="设备编号" />
+									<el-table-column prop="name" label="设备名称" />
+									<el-table-column prop="belong_dept_name" label="所在车间" />
+									<el-table-column prop="state" label="设备状态">
+										<template #default="scope">
+											{{ eqState_[scope.row.state] }}
+										</template>
+									</el-table-column>
 								</el-table>
 							</div>
 						</div>
@@ -183,8 +191,9 @@
 				<el-col :span="7">
 					<div class="retangleWrap retangleWrapTable">
 						<div class="retangle tableRetangle">
-							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
-								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历</div>
+							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
+								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历
+								</div>
 							</div>
 							<div style="">
 								<el-calendar v-model="calendarValue" />
@@ -204,200 +213,233 @@
 </template>
 <script>
 import * as echarts from 'echarts';
-	export default {
-		data() {
-			return {
-				time: '',
-				day: '',
-				year_s:'',
-				month_s:'',
-				yearData:[],
-				monthData:[],
-				warningNum:0,
-				warningNum2:0,
-				tableData : [
-					{index:1,number: 'GZKJ-01',name: '1号单坩埚熔化炉',state: '完好'},
-					{index:2,number: 'GZKJ-02',name: '2号单坩埚熔化炉',state: '完好'},
-					{index:3,number: 'GZKJ-03',name: '3号单坩埚熔化炉',state: '禁用'},
-					{index:4,number: 'GZKJ-04',name: '4号单坩埚熔化炉',state: '检修'},
-				],
-				calendarValue:''
+export default {
+	data() {
+		return {
+			time: '',
+			day: '',
+			year_s: '',
+			month_s: '',
+			yearData: [],
+			monthData: [],
+			warningNum: 0,
+			warningNum2: 0,
+			tableData: [
+				{ index: 1, name: 'GZKJ-01', specification: '500*30', unit: '个', count: 100 },
+				{ index: 2, name: 'GZKJ-02', specification: '500*30', unit: '个', count: 100 },
+				{ index: 3, name: 'GZKJ-03', specification: '500*30', unit: '个', count: 100 },
+				{ index: 4, name: 'GZKJ-04', specification: '500*30', unit: '个', count: 100 },
+			],
+			equipList: [],
+			calendarValue: '',
+			eqState_: {
+				10: '完好',
+				20: '限用',
+				30: '在修',
+				40: '禁用',
+			},
+		}
+	},
+	mounted() {
+		this.$emit('on-mounted');
+		let that = this;
+		var myDate = new Date();
+		let year = myDate.getFullYear();
+		let month = myDate.getMonth() + 1;
+		that.year_s = year;
+		that.month_s = month;
+		that.initChart();
+		this.calendarValue = new Date();
+		this.getEquipList()
+	},
+	methods: {
+		getEquipList() {
+			this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
+				this.equipList = res
+			})
+		},
+		// 动态绑定Class
+		bindClass(type) {
+			let classInfo = {
+				socketDom: true, redColor: false,
+				orangeColor: false, yellowColor: false, blueColor: true
 			}
+			if (type == '') {
+				classInfo.redColor = true
+			}
+			return classInfo
 		},
-		mounted() {
-			this.$emit('on-mounted');
-			let that = this;
-            var myDate = new Date();
-            let year = myDate.getFullYear();
-            let month = myDate.getMonth()+1;
-            that.year_s = year;
-            that.month_s = month;
-			that.initChart();
-			this.calendarValue = new Date();
-		},
-		methods: {
-			// 动态绑定Class
-			bindClass(type){
-				let classInfo = { socketDom: true, redColor: false, 
-				orangeColor:false, yellowColor:false, blueColor:true }
-				if(type==''){
-						classInfo.redColor = true
-				}
-				return classInfo
-			}, 
-			getMessage(msg) {
+		getMessage(msg) {
 			console.log(msg);
-			}, 
-			close() {
+		},
+		close() {
 			if (this.ws) {
 				this.ws.close();
 				this.ws = null;
 				console.log("socket已经关闭");
 			}
-			},
-			showTime(){
-				this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
-				this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
-			},
-			interEvent(){
-				this.$router.replace({path:'/events'})
-			},
-			interEquipment(){
-				this.$router.replace({path:'/em/equipmentc'})
-			},
-			initChart(){
-				//柱状图
-				var dom = document.getElementById("barCharts");
-				var myChart = echarts.init(dom);
-				let option = {
-					grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
-                        top: '5%',  
-                        left: '1%', 
-                        right: '1%',
-                        bottom: '5%',
-                        containLabel: true
-                    },
-					xAxis: {
-						type: 'category',
-						axisLabel: {  
-                            // show: false, // X 轴标签文字旋转角度  
-                        },
-						data:['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号']  
+		},
+		showTime() {
+			this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
+			this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
+		},
+		interEvent() {
+			this.$router.replace({ path: '/events' })
+		},
+		interEquipment() {
+			this.$router.replace({ path: '/em/equipmentc' })
+		},
+		initChart() {
+			//柱状图
+			var dom = document.getElementById("barCharts");
+			var myChart = echarts.init(dom);
+			let option = {
+				grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
+					top: '5%',
+					left: '1%',
+					right: '1%',
+					bottom: '5%',
+					containLabel: true
+				},
+				xAxis: {
+					type: 'category',
+					axisLabel: {
+						// show: false, // X 轴标签文字旋转角度  
 					},
-					yAxis: {
-						type: 'value',
-						axisLabel: {  
-                            show: false, // X 轴标签文字旋转角度  
-                        },
+					data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号']
+				},
+				yAxis: {
+					type: 'value',
+					axisLabel: {
+						show: false, // X 轴标签文字旋转角度  
 					},
-					series: [{
-						data: [10,9,8,11,12,10,9,10,8,9,10],
-						type: 'bar',
-						barMaxWidth:50,
-						itemStyle:{
-							normal:{color:'rgb(20, 141, 255)'}
-						}
-					}]
-				};
-				myChart.setOption(option, true);
-			},
-			
-		}
+				},
+				series: [{
+					data: [10, 9, 8, 11, 12, 10, 9, 10, 8, 9, 10],
+					type: 'bar',
+					barMaxWidth: 50,
+					itemStyle: {
+						normal: { color: 'rgb(20, 141, 255)' }
+					}
+				}]
+			};
+			myChart.setOption(option, true);
+		},
+
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.retangleWrap{
-		width: 100%;
-		padding: 20px 20px 0 20px;
-		box-sizing: border-box;
-	}
-	.retangle{
-		width: 100%;
-		border-radius: 15px;
-		box-sizing: border-box;
-		position: relative;
-		background: #ffffff;
-	}
-	.retangleImg{
-		height:188px;
-		color: #ffffff;
-		padding-left: 43px;
-		background: linear-gradient(180.00deg, rgb(58, 149, 255),rgb(27, 92, 255) 100%);
-	}
-	.companyName{
-		padding-top: 28px;
-		font-size: 24px;
-		line-height: 28px;
-		padding-bottom: 23px;
-	}
-	.companyDesc{
-		padding-left: 4px;
-		font-size: 14px;
-		line-height: 20px;
-	}
-	.topCardImg{
-		height: 188px;
-		position: absolute;
-		right: 10px;
-		top: 0;
-	}
-	.countRetangle{
-		height: 180px;
-		padding-top: 20px;
-		box-sizing: border-box;
-	}
-	.countItem{
-		width: 20%;
-		padding-left: 24px;
-		display: inline-block;
-		box-sizing: border-box;
-		border-right: 1px solid #eeeeee;
-	}
-	.countItem:last-child{
-		border-right: 0;
-	}
-	.countname{
-		font-size: 14px;
-		line-height: 22px;
-		color: rgba(94,94,94);
-	}
-	.countnum{
-		font-size: 30px;
-		padding-bottom: 11px;
-		line-height: 38px;
-	}
-	.countrate{
-		line-height: 20px;
-		color: rgba(0,0,0,.45);
-	}
-	.redColor{
-		color: rgb(255, 73, 87);
-	}
-	.greenColor{
-		color: rgb(71, 201, 58);
-	}
-	.middleRetangle{
-		border-radius: 2px;
-		position: relative;
-		box-sizing: border-box;
-	}
-	.middleItem{
-		width: 25%;
-		padding-left: 34px;
-		display: inline-block;
-		box-sizing: border-box;
-	}
-	.middleItem:first-child{
-		border-right: 1px solid #eeeeee;
-	}
-	.tableRetangle{
-		height: auto;
-		padding-top: 20px;
-	}
-	.bottomRetangle{
-		padding: 20px 0;
-		box-sizing: border-box;
-		background: #ffffff;
-	}
+.retangleWrap {
+	width: 100%;
+	padding: 20px 20px 0 20px;
+	box-sizing: border-box;
+}
+
+.retangle {
+	width: 100%;
+	border-radius: 15px;
+	box-sizing: border-box;
+	position: relative;
+	background: #ffffff;
+}
+
+.retangleImg {
+	height: 188px;
+	color: #ffffff;
+	padding-left: 43px;
+	background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%);
+}
+
+.companyName {
+	padding-top: 28px;
+	font-size: 24px;
+	line-height: 28px;
+	padding-bottom: 23px;
+}
+
+.companyDesc {
+	padding-left: 4px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.topCardImg {
+	height: 188px;
+	position: absolute;
+	right: 10px;
+	top: 0;
+}
+
+.countRetangle {
+	height: 180px;
+	padding-top: 20px;
+	box-sizing: border-box;
+}
+
+.countItem {
+	width: 20%;
+	padding-left: 24px;
+	display: inline-block;
+	box-sizing: border-box;
+	border-right: 1px solid #eeeeee;
+}
+
+.countItem:last-child {
+	border-right: 0;
+}
+
+.countname {
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(94, 94, 94);
+}
+
+.countnum {
+	font-size: 30px;
+	padding-bottom: 11px;
+	line-height: 38px;
+}
+
+.countrate {
+	line-height: 20px;
+	color: rgba(0, 0, 0, .45);
+}
+
+.redColor {
+	color: rgb(255, 73, 87);
+}
+
+.greenColor {
+	color: rgb(71, 201, 58);
+}
+
+.middleRetangle {
+	border-radius: 2px;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.middleItem {
+	width: 25%;
+	padding-left: 34px;
+	display: inline-block;
+	box-sizing: border-box;
+}
+
+.middleItem:first-child {
+	border-right: 1px solid #eeeeee;
+}
+
+.tableRetangle {
+	height: auto;
+	padding-top: 20px;
+}
+
+.bottomRetangle {
+	padding: 20px 0;
+	box-sizing: border-box;
+	background: #ffffff;
+}
 </style>