From 1a3447da691b5b03a902ca41a9084c2679700166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Wed, 25 Dec 2024 11:29:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/index.vue                 |  61 +---
 src/views/casesAndClients/IOT/index.vue       |   6 +-
 src/views/casesAndClients/IOT/more.vue        | 292 ++++++++++++++++++
 src/views/productCenter/index.vue             |  16 +-
 .../productCenter/platformAdvantages.vue      |  33 +-
 5 files changed, 335 insertions(+), 73 deletions(-)
 create mode 100644 src/views/casesAndClients/IOT/more.vue

diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index 280dfb8..4644ce2 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="menu">
-    <div v-for="(i,k) in menuList" :class="`menuItem ${k === -1 ? 'focus':''}`" @mouseenter="getChildren(i)">
-      <div :class="`name `" @click="toLink(i.path)">{{ i.name }}</div>
+    <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`" @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? i.path:'')">
+      <div :class="`name `" >{{ i.name }}</div>
       <div class="line"></div>
     </div>
     <div class="subMenu" v-if="(subMenuList||[]).length>0" @mouseleave="clearChildren">
-      <div :class="`topMenuItem${k===-1 ? ' active':''}`" v-for="(ii,k) in subMenuList" @click="toLink(ii.path)">
+      <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList" @click="toLink(ii.path)">
         <div class="icon">
           <img :src="ii.icon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
         </div>
@@ -37,58 +37,13 @@ export default {
         },
         {
           name: '产品中心',
-          children: [
-            {
-              name: '工业互联网',
-              icon: wlw,
-              path: '/productCenter/industrialInternet'
-            },
-            {
-              name: '智能制造',
-              icon: znzz,
-              path: '/'
-            },
-            {
-              name: '快递物流',
-              icon: kdwl,
-              path: '/'
-            },
-            {
-              name: '智能轮胎',
-              icon: znlt,
-              path: '/'
-            },
-          ]
+          path: '/productCenter/industrialInternet',
+          children: []
         },
         {
           name: '案例与客户',
-          children: [
-            {
-              name: '工业物联网案例',
-              icon: wlw,
-              path: '/casesAndClients/IOT'
-            },
-            {
-              name: '智能制造案例',
-              icon: znzz,
-              path: '/'
-            },
-            {
-              name: '快递物流案例',
-              icon: kdwl,
-              path: '/'
-            },
-            {
-              name: '智能轮胎案例',
-              icon: znlt,
-              path: '/'
-            },
-            {
-              name: '合作客户',
-              icon: znlt,
-              path: '/'
-            },
-          ]
+          path: '/casesAndClients/IOT',
+          children: []
         },
         // {
         //   name: '新闻中心',
@@ -107,7 +62,7 @@ export default {
   mounted() {
     this.getMenu()
     let query = this.$route.path
-    console.log(this.$route.path.split("/"))
+    console.log(this.$route)
   },
   methods: {
     toLink(e) {
diff --git a/src/views/casesAndClients/IOT/index.vue b/src/views/casesAndClients/IOT/index.vue
index 5f74466..a2cac8a 100644
--- a/src/views/casesAndClients/IOT/index.vue
+++ b/src/views/casesAndClients/IOT/index.vue
@@ -41,13 +41,13 @@
           <div class="left">
             <el-image
               style="width: 100%; height: 100%;"
-              :src="banner"
+              :src="i.caseInfoPic"
               fit="contain"></el-image>
           </div>
           <div class="right">
-            <div class="itemTitle">智慧变电站</div>
+            <div class="itemTitle">{{ i.caseInfoTitle }}</div>
             <div class="itemInfo">
-              针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分机和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以
+              {{ i.caseInfoDesc }}
             </div>
           </div>
           <div class="view">
diff --git a/src/views/casesAndClients/IOT/more.vue b/src/views/casesAndClients/IOT/more.vue
new file mode 100644
index 0000000..5f74466
--- /dev/null
+++ b/src/views/casesAndClients/IOT/more.vue
@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="banner"
+        fit="contain"></el-image>
+      <div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
+      <el-button type="primary" class="bannerBtn">免费体验</el-button>
+      <div class="tabs">
+        <div class="content">
+          <div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
+               :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
+            {{ i.configTypeName }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="list">
+      <div v-for="(i,k) in contentList">
+        <div v-if="k%2 === 1" class="item1">
+          <div class="left">
+            <div class="itemTitle">{{ i.caseInfoTitle }}</div>
+            <div class="itemInfo">
+              {{ i.caseInfoDesc }}
+            </div>
+          </div>
+          <div class="right">
+            <el-image
+              style="width: 100%; height: 100%;"
+              :src="i.caseInfoPic"
+              fit="contain"></el-image>
+          </div>
+          <div class="view">
+          <span>
+            查看详情
+          </span>
+          </div>
+        </div>
+        <div v-if="k%2 === 0" class="item2">
+          <div class="left">
+            <el-image
+              style="width: 100%; height: 100%;"
+              :src="banner"
+              fit="contain"></el-image>
+          </div>
+          <div class="right">
+            <div class="itemTitle">智慧变电站</div>
+            <div class="itemInfo">
+              针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分机和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以
+            </div>
+          </div>
+          <div class="view">
+          <span>
+            查看详情
+          </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import banner from '@/assets/image/banner.png'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getCaseCenterCaseInfos, getPortalConfigTypeList} from "@/api/casesAndClients";
+
+export default {
+  name: 'IOT',
+  components: {
+    ContactUs,
+    Copyright
+  },
+  data() {
+    return {
+      banner,
+      tabsList: [],
+      tabsActive: 0,
+      contentList: [],
+      configTypeId: 0,
+    }
+  },
+  watch: {
+    '$route'() {
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getContentList(id) {
+      getCaseCenterCaseInfos({
+        configTypeId: id
+      }).then(e => {
+        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
+        console.log(this.contentList)
+      })
+    },
+    getData() {
+      getPortalConfigTypeList({
+        parentId: this.$route.query.portalConfigTypeId,
+        pageNum: 1,
+        pageSize: 10
+      }).then(e => {
+        this.tabsList = e.rows
+        this.configTypeId = e.rows?.[0]?.configTypeId
+        this.getContentList(e.rows?.[0]?.configTypeId)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.banner {
+  width: 100%;
+  height: 35.5vw;
+  position: relative;
+
+  .bannerInfo {
+    position: absolute;
+    top: 35%;
+    left: 19%;
+    width: 45%;
+    text-align: left;
+    font-size: 1.4vw;
+    color: @standard-color;
+    line-height: 2.5vw;
+    letter-spacing: 4px;
+    word-break: break-all;
+  }
+
+  .bannerBtn {
+    position: absolute;
+    top: 58%;
+    left: 19%;
+    width: 11.5vw;
+    font-size: 1.2vw;
+    line-height: 2vw;
+    letter-spacing: 2px;
+  }
+
+  .tabs {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+    backdrop-filter: saturate(50%) blur(4px);
+
+    .content {
+      width: 62%;
+      position: relative;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+
+      .tab {
+        display: inline-block;
+        width: 33%;
+        line-height: 6.2vw;
+        font-size: 1.6vw;
+        letter-spacing: 3px;
+      }
+
+      .tab.active {
+        color: @standard-color;
+        width: calc(33% - 2px);
+        border: 1px solid #fff;
+        box-shadow: 0 0 3px #0002;
+      }
+    }
+  }
+}
+
+.list {
+  width: 62vw;
+  margin: 0 auto 5vw auto;
+
+  .item1 {
+    text-align: left;
+    margin-top: 5vw;
+    height: 18vw;
+    position: relative;
+
+    .left {
+      display: inline-block;
+      width: 55%;
+
+      .itemTitle {
+        font-size: 1.6vw;
+        color: #000;
+        letter-spacing: 2px;
+      }
+
+      .itemInfo {
+        margin-top: 0.9vw;
+        font-size: 1.1vw;
+        line-height: 1.75vw;
+        color: #0006;
+        letter-spacing: 2.7px;
+      }
+    }
+
+    .right {
+      display: inline-block;
+      width: 41%;
+      margin-left: 4%;
+    }
+
+    .view {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: calc(100% - 3vw);
+      height: 3.7vw;
+      line-height: 3.7vw;
+      padding-left: 3vw;
+      font-size: 1.2vw;
+      color: #fff;
+      background-color: #3372ff;
+    }
+  }
+
+  .item2 {
+    text-align: left;
+    margin-top: 5vw;
+    height: 18vw;
+    position: relative;
+
+    .left {
+      display: inline-block;
+      width: 41%;
+      margin-right: 4%;
+    }
+
+    .right {
+
+      display: inline-block;
+      width: 55%;
+
+      .itemTitle {
+        font-size: 1.6vw;
+        color: #000;
+        letter-spacing: 2px;
+      }
+
+      .itemInfo {
+        margin-top: 0.9vw;
+        font-size: 1.1vw;
+        line-height: 1.75vw;
+        color: #0006;
+        letter-spacing: 2.7px;
+      }
+    }
+
+    .view {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: calc(100% - 3vw);
+      height: 3.7vw;
+      line-height: 3.7vw;
+      padding-left: 3vw;
+      font-size: 1.2vw;
+      color: #fff;
+      background-color: #3372ff;
+    }
+  }
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index e60ee0a..5de9260 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -7,7 +7,7 @@
         fit="contain"></el-image>
       <div class="bannerInfo">{{ bannerTitle }}</div>
       <el-button type="primary" class="bannerBtn">免费体验</el-button>
-      <div class="tabs" v-if="$route.query.portalConfigTypeId === '4'">
+      <div class="tabs" >
         <div class="content">
           <div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
                :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
@@ -16,7 +16,7 @@
         </div>
       </div>
     </div>
-    <div v-if="tabsActive === 0">
+    <div >
       <div v-for="i in contentList">
         <platformAdvantages class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'"
                             :data="i"/>
@@ -31,15 +31,15 @@
         <TechnicalArchitecture class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'"
                                :data="i"/>
         <platformFeatures class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
-      </div>
-    </div>
-    <div v-if="tabsActive === 1">
-      <div v-for="(i, k) in contentList">
         <HighFrequencyRFID class="highFrequencyRFID" v-if="i.configModal === '8' && k===0" :data="i"/>
         <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' && k===1" :data="i"/>
         <DataAcquisitionSensing class="dataAcquisitionSensing" v-if="i.configModal === '9' && k===2" :data="i"/>
       </div>
     </div>
+<!--    <div v-if="tabsActive === 1">-->
+<!--      <div v-for="(i, k) in contentList">-->
+<!--      </div>-->
+<!--    </div>-->
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
   </div>
@@ -127,7 +127,9 @@ export default {
       }).then(e => {
         this.tabsList = e.rows
         this.configTypeId = e.rows?.[0]?.configTypeId
-        this.getContentList(e.rows?.[0]?.configTypeId)
+        if(e.rows?.[0]?.configTypeId){
+          this.getContentList(e.rows?.[0]?.configTypeId)
+        }
       })
     }
   }
diff --git a/src/views/productCenter/platformAdvantages.vue b/src/views/productCenter/platformAdvantages.vue
index 4f0688e..9f2f856 100644
--- a/src/views/productCenter/platformAdvantages.vue
+++ b/src/views/productCenter/platformAdvantages.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div>
     <TitleGroup>
@@ -6,15 +5,18 @@
       <template slot="subTitle">平台优势</template>
     </TitleGroup>
     <div class="list">
-      <div class="item" v-for="i in list">
-        <div class="icon">
-          <el-image
-            style="width: 100%;height: 100%"
-            :src="i.icon"
-            fit="contain"></el-image>
+      <div v-for="ii in groupByCount(data.hwProductInfoDetailList)">
+        <div class="item" v-for="(i,k) in ii">
+          <div class="icon">
+            <el-image
+              style="width: 100%;height: 100%"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+          </div>
+          <div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
+          <div class="itemInfo">{{ i.productInfoDetailDesc }}</div>
         </div>
-        <div class="itemTitle">{{ i.name }}</div>
-        <div class="itemInfo">{{ i.info }}</div>
+        <br>
       </div>
     </div>
   </div>
@@ -33,6 +35,7 @@ export default {
   components: {
     TitleGroup
   },
+  props: ['data'],
   data() {
     return {
 
@@ -62,7 +65,15 @@ export default {
   },
   mounted() {
   },
-  methods: {}
+  methods: {
+    groupByCount(array) {
+      let result = [];
+      for (let i = 0; i < array.length; i += 4) {
+        result.push(array.slice(i, i + 4));
+      }
+      return result;
+    }
+  }
 }
 </script>
 
@@ -81,6 +92,8 @@ export default {
     box-shadow: 0 0 3px #0002;
     margin: 0 0.75vw;
     transition: all 0.2s;
+    vertical-align: top;
+    margin-bottom: 1vw;
 
     &:hover {
       background-color: @standard-color;