修改界面显示

package.json

@@ -48,6 +48,8 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^4.2.0",
+    "less-loader": "5.0.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/components/TopNav/index.vue

@@ -72,7 +72,11 @@ export default {
     childrenMenus() {
       var childrenMenus = [];
       this.routers.map((router) => {
-        for (var item in router.children) {
+        for (let item in router.children) {
+          if(typeof router.children[item] !== 'object'){
+            // console.log('router.children[item]',router.children[item])
+            continue;
+          }
           if (router.children[item].parentPath === undefined) {
             if(router.path === "/") {
               router.children[item].path = "/" + router.children[item].path;
@@ -154,6 +158,8 @@ export default {
           }
         });
       }
+      console.log(this.childrenMenus)
+      console.log(routes)
       if(routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       } else {
@@ -161,6 +167,7 @@ export default {
       }
     },
     ishttp(url) {
+      console.trace()
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
   },

src/views/board/week/index.vue

@@ -289,7 +289,6 @@ export default {
                 return 'red'
               } else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) {
                 return 'yellow'
-
               } else {
                 return '#66c8ff'
               }

src/views/model/factoryIntroduction.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="app-container">
+    <div class="title">澳柯玛智慧绿色智能制造工厂</div>
+    <div class="title1">首个商用智慧大规模个性化定制的智能互联工厂</div>
+    <div class="box1">
+      <img src="../../assets/model/factoryIntroduction/img1.jpg" alt="" style="height: calc(38vh - 16px)">
+    </div>
+    <div class="box2">
+      <img src="../../assets/model/factoryIntroduction/img.png" alt="" style="height: 38vh">
+    </div>
+    <div class="box3">
+      <img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
+      <div class="boxTitle">获 得 荣 誉</div>
+      <p>1. 国家发改委批复的基于工业互联网平台的智能制造示范项目</p>
+      <p>2. 青岛市先进制造业智能家电产业集群项目</p>
+      <p>3. 西海岸新区“高端制造业+人工智能”试点示范项目</p>
+    </div>
+    <div class="box4">
+      <img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
+      <div class="boxTitle">技 术 应 用</div>
+      <p>自主可控工业互联网平台、大数据分析、数字孪生、制造执行MES、数据采集与监控控制SCADA、智能化仓储物流WMS、质量分析SPC、数字化研发PLM、能源管理EMS、视觉检测……</p>
+      <p>16条智能化生产线、40台工业机器人、钣金全自动成型、门体立体库……</p>
+    </div>
+    <div class="exit" @click="exitFun"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Liner",
+  props:{
+    exit:{
+      type:Function,
+      default:null
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    exitFun(){
+      this.exit()
+    }
+  }
+}
+</script>
+<style scoped>
+.app-container {
+  background-image: url("~@/assets/model/factoryIntroduction/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.title {
+  position: absolute;
+  top: 5%;
+  transform: translateX(-50%);
+  left: 50%;
+  color: red;
+  font-size: 2.7vw;
+  font-weight: 800;
+}
+
+.title1 {
+  position: absolute;
+  top: 20%;
+  left: 5%;
+  font-size: 1.3vw;
+  font-weight: bold;
+  color: rgb(32, 56, 100);
+}
+
+.box1 {
+  position: absolute;
+  top: 25%;
+  left: 5%;
+  padding: 8px;
+  background-color: #fff;
+  box-shadow: 2px 2px 10px 3px #ccc;
+}
+
+.box2 {
+  position: absolute;
+  top: 25%;
+  right: 5%;
+}
+
+.box3 {
+  position: absolute;
+  top: 65%;
+  left: 5%;
+  width: 43%;
+  height: 30%;
+}
+
+.box4 {
+  position: absolute;
+  top: 65%;
+  right: 5%;
+  width: 43%;
+  height: 30%;
+}
+
+.box3 .boxTitle, .box4 .boxTitle {
+  color: red;
+  font-weight: bold;
+  font-size: 1.3vw;
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.box3 p, .box4 p {
+
+  color: rgb(32, 56, 100);
+  font-size: 1.3vw;
+  line-height: 1.5vw;
+  font-weight: bold;
+
+}
+.exit{
+  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  font-weight: bold;
+  width: 2vw;
+  height: 2vw;
+  color: #e7b219;
+}
+</style>

src/views/model/model.vue

@@ -1,10 +1,71 @@
 <template>
   <div class="app-container">
     <div id="container" class="container"></div>
+    <div class="tool">
+      <el-row>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('factoryIntroduction')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple">工厂介绍</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('productDistribution')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple-light">产品分布</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('数据中心')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple">数据中心</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('现场直播')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple">现场直播</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('工艺流程')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple-light">工艺流程</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('生产')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple">生产</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('质量')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple-light">质量</div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="toolItem" @click="click1('厂房视角')">
+            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="grid-content bg-purple-light">设备</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <transition name="children">
+      <factory-introduction :exit="exit" v-if="show === 'factoryIntroduction'"/>
+    </transition>
+    <transition name="children">
+      <product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
+    </transition>
   </div>
 </template>
 
 <script>
+import factoryIntroduction from './factoryIntroduction'
+import productDistribution from './productDistribution'
 
 const isAMRT = () => {
   return new Promise((resolve, reject) => {
@@ -21,9 +82,14 @@ const isAMRT = () => {
 
 export default {
   name: "Model",
+  components: {
+    factoryIntroduction,
+    productDistribution
+  },
   data() {
     return {
-      viewer: null
+      viewer: null,
+      show: '',
     }
   },
   async mounted() {
@@ -36,21 +102,21 @@ export default {
     console.log(AMRT)
     let num = 0
     let modelArr = [
-      '1720315475507941376',
+      // '1720315475507941376',
-      '1720315479907766272',
+      // '1720315479907766272',
-      '1720315484513112064',
+      // '1720315484513112064',
-      '1720315500866703360',
+      // '1720315500866703360',
-      '1720315558030872576',
+      // '1720315558030872576',
-      '1720315596551360512',
+      // '1720315596551360512',
-      '1720315644550975488',
+      // '1720315644550975488',
-      '1720315648946606080',
+      // '1720315648946606080',
-      '1720315687114772480',
+      // '1720315687114772480',
-      '1720315691422322688',
+      // '1720315691422322688',
-      '1720315722275622912',
+      // '1720315722275622912',
-      '1720315729129115648',
+      // '1720315729129115648',
-      '1720315768454909952',
+      // '1720315768454909952',
-      '1720316275214913536',
+      // '1720316275214913536',
-      '1720316297822212096',
+      // '1720316297822212096',
     ]
     modelArr.forEach(e => {
       let model = viewer.loadModel(e, {
@@ -80,10 +146,17 @@ export default {
 
     // viewer.controls.startAutoRotate(1)
   },
-  methods: {}
+  methods: {
+    click1(e) {
+      this.show = e
+    },
+    exit(){
+      this.show = ''
+    }
+  }
 };
 </script>
-<style scoped>
+<style lang="less" scoped>
 * {
   margin: 0;
   padding: 0
@@ -94,4 +167,43 @@ export default {
   height: 100vh
 }
 
+.tool {
+  position: absolute;
+  width: 60%;
+  height: 20vh;
+  top: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  font-size: 1vw;
+
+  .toolItem:hover {
+    transform: scale(1.2);
+  }
+}
+
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.children-enter-active {
+  animation: children-in 1s;
+}
+
+.children-leave-active {
+  animation: children-in 1s reverse;
+}
+
+@keyframes children-in {
+  0% {
+    opacity: 0;
+    left: -100%;
+  }
+  100% {
+    opacity: 1;
+    left: 0;
+  }
+}
 </style>

src/views/model/productDistribution.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="app-container">
+    <div class="exit" @click="exitFun"></div>
+    <div class="top">澳柯玛商用冷链产品在国内市场占有率达
+      <span style="color:#ffd202;font-weight: bold"> 51%</span>
+      ，连续三年保持行业第一，冷藏展示柜荣膺工信部
+      <span style="color:#ffd202;font-weight: bold"> “中国制造业单项冠军产品”</span>
+      ，获得了国内外众多品牌客户的高度认可，成为冰淇淋、饮料、速冻、乳业、啤酒以及零售行业等数千家食品快消与流通行业用户的首选冷链设备供应商，目前已接入平台的设备达
+      <span style="color:#ffd202;font-weight: bold"> 911706</span>
+      台。
+    </div>
+    <div class="headline1">产品分布情况分析</div>
+    <div class="headline2">产品区划大数据</div>
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+    </div>
+    <div class="chart2"></div>
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+import chinaMap from './china.json'
+import * as echarts from "echarts";
+
+export default {
+  name: "Liner",
+  components: {
+    Chart
+  },
+  props: {
+    exit: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      chartData: [...(chinaMap.features.map(e => {
+        return {
+          name: e.properties.name,
+          value: Math.random() * 200
+        }
+      })), {
+        name: '南海诸岛',
+        value: Math.random() * 200
+      }],
+    }
+  },
+  mounted() {
+    echarts.registerMap('china', chinaMap);
+    this.$refs.chart1.setData({
+      visualMap: {
+        // show: false,
+        min: 0,
+        max: 200,
+        left: 'left',
+        top: 'bottom',
+        calculable: true,
+        seriesIndex: [1],
+        textStyle: {
+          color: "#FFFF",
+        },
+        inRange: {
+          color: ['#dbac00', '#cf0000'] // 蓝绿
+        }
+      },
+      geo: {
+        show: true,
+        map: 'china',
+        zoom: 1.2,
+        label: {
+          normal: {
+            show: true,
+            formatter: (e) => {
+              console.log(e.name)
+              return `${this.chartData.find(val => val.name === e.name).value.toFixed(0)}\n${e.name}`
+            },
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        roam: true,
+        itemStyle: {
+          normal: {
+            areaColor: '#031525',
+            borderColor: '#3B5077',
+          },
+          emphasis: {
+            areaColor: '#2B91B7',
+          }
+        }
+      },
+      series: [
+        {
+          name: '散点',
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          symbolSize: (val) => {
+            return val[2] / 10;
+          },
+          label: {
+            normal: {
+              formatter: (e) => {
+                return e.data.name
+              },
+              position: 'right',
+              show: true
+            },
+            emphasis: {
+              show: true
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: '#05C3F9'
+            }
+          }
+        },
+        {
+          type: 'map',
+          map: 'china',
+          geoIndex: 0,
+          zoom: 1.6,
+          aspectScale: 0.75, //长宽比
+          showLegendSymbol: false, // 存在legend时显示
+          itemStyle: {
+            normal: {
+              areaColor: '#031525',
+              borderColor: '#3B5077',
+            },
+            emphasis: {
+              areaColor: '#2B91B7'
+            }
+          },
+          // animation: false,
+          data: this.chartData
+        },
+      ]
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style scoped>
+.app-container {
+  background-color: #021e31;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.top {
+  position: absolute;
+  background-image: url("~@/assets/model/productDistribution/bg1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 90%;
+  top: 15%;
+  left: 5%;
+  font-size: 1.2vw;
+  color: #05c4ec;
+  padding: 12px
+}
+
+.exit {
+  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  font-weight: bold;
+  width: 2vw;
+  height: 2vw;
+  color: #e7b219;
+}
+
+.headline1 {
+  position: absolute;
+  top: 28%;
+  left: 5%;
+  border-left: 3px solid #0251d1;
+  padding-left: 12px;
+  height: 1.5vw;
+  line-height: 1.5vw;
+  font-size: 1vw;
+  color: #fff;
+  font-weight: bold;
+}
+
+.headline2 {
+  position: absolute;
+  top: 28%;
+  left: 70%;
+  border-left: 3px solid #0251d1;
+  padding-left: 12px;
+  height: 1.5vw;
+  line-height: 1.5vw;
+  font-size: 1vw;
+  color: #fff;
+  font-weight: bold;
+}
+
+.chart1 {
+  position: absolute;
+  top: 32%;
+  left: 5%;
+  width: 63%;
+  height: 65%;
+}
+
+.chart2 {
+  background-image: url("~@/assets/model/productDistribution/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 32%;
+  left: 70%;
+  width: 36vh;
+  height: 66vh;
+}
+</style>