init

package.json

@@ -14,7 +14,9 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "animate.css": "^4.1.1",
+    "axios": "^1.7.9",
     "element-ui": "^2.15.14",
+    "js-cookie": "^3.0.5",
     "less": "^4.2.0",
     "less-loader": "5.0.0",
     "vue": "^2.5.2",

src/api/index.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+
+export function getPortalList(query) {
+  return request({
+    url: '/portal/portal/getPortalConfigList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getPortalConfigTypeList(query) {
+  return request({
+    url: '/portal/portal/getPortalConfigTypeList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getHomeCaseTitleList(query) {
+  return request({
+    url: '/portal/portal/getHomeCaseTitleList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getTypicalHomeCaseInfo(query) {
+  return request({
+    url: '/portal/portal/getTypicalHomeCaseInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addContactUsInfo(query) {
+  return request({
+    url: '/portal/portal/addContactUsInfo',
+    method: 'post',
+    data: query
+  })
+}

src/components/copyright.vue

@@ -9,14 +9,18 @@
 
 <script>
 
+import {addContactUsInfo} from "@/api";
+
 export default {
   name: 'Copyright',
   data() {
     return {}
   },
   mounted() {
+    this.getData()
   },
-  methods: {}
+  methods: {
+  }
 }
 </script>
 

src/components/menu/index.vue

@@ -24,6 +24,7 @@ import wlw from "@/assets/icon/wlw.png";
 import znzz from "@/assets/icon/znzz.png";
 import kdwl from "@/assets/icon/kdwl.png";
 import znlt from "@/assets/icon/znlt.png";
+import {getPortalConfigTypeList} from "@/layout/menu";
 
 export default {
   name: 'Index',
@@ -104,12 +105,13 @@ export default {
     }
   },
   mounted() {
+    this.getMenu()
     let query = this.$route.path
     console.log(this.$route.path.split("/"))
   },
   methods: {
     toLink(e) {
-      if(!e)return
+      if (!e) return
       console.log(e)
       this.$router.push(e)
     },
@@ -122,6 +124,23 @@ export default {
     },
     clearChildren() {
       this.subMenuList = []
+    },
+    getMenu() {
+      getPortalConfigTypeList({
+        configTypeClassfication: 1,
+        parentId: 0,
+        pageNum: 1,
+        pageSize: 111
+      }).then(e => {
+        console.log(e)
+        this.menuList[1].children = e.rows.map(v => {
+          return {
+            name: v.configTypeName,
+            icon: wlw,
+            path: v.homeConfigTypePic
+          }
+        })
+      })
     }
   }
 }

src/layout/menu.js

@@ -0,0 +1,11 @@
+
+import request from '@/utils/request'
+
+
+export function getPortalConfigTypeList(query) {
+  return request({
+    url: '/portal/portal/getPortalConfigTypeList',
+    method: 'get',
+    params: query
+  })
+}

src/utils/request.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import Cookies from 'js-cookie'
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+
+const TokenKey = 'Admin-Token'
+const service = axios.create({
+  baseURL: '/dev-api',
+  // baseURL: 'http://124.223.15.102:8888',
+  timeout: 10000,
+});
+function getToken() {
+  return Cookies.get(TokenKey)
+}
+service.interceptors.response.use((res) => {
+  return res.data;
+});
+service.interceptors.request.use(config => {
+  config.headers['Authorization'] = 'Bearer ' + getToken()
+  return config
+}, error => {
+})
+
+function request({ method = 'get', url, data = {}, params = {} }) {
+  return service({
+    method,
+    url,
+    data,
+    params,
+  });
+}
+
+export default request;

src/views/index/carousel.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-carousel trigger="click" style="height:100%">
-      <el-carousel-item v-for="item in 4" :key="item">
+      <el-carousel-item v-for="item in bannerList" :key="item">
         <el-image
           style="width: 100%;height: 100%"
-          :src="banner"
+          :src="item"
           fit="contain"></el-image>
       </el-carousel-item>
     </el-carousel>
@@ -12,15 +12,29 @@
 </template>
 
 <script>
-import banner from '@/assets/image/banner.png'
+import { getPortalList} from "@/api";
 
 export default {
   name: 'Carousel',
   data() {
     return {
-      banner,
+      bannerList:[],
     }
-  }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods:{
+    getData(){
+      getPortalList({
+        portalConfigType:1,
+        pageNum:1,
+        pageSize:100
+      }).then(e=>{
+        this.bannerList = e.rows.map(v=>v.portalConfigPic)
+      })
+    }
+  },
 }
 </script>
 

src/views/index/classicCase.vue

@@ -4,13 +4,13 @@
     <div class="subTitle">典型案例</div>
     <div class="content">
       <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="物联网" name="1">
+        <el-tab-pane :label="i.homeConfigTypeName"  :name="`${i.configTypeId}`" v-for="(i,k) in list">
           <transition name="fade">
-            <div v-if="activeName === '1'" style="position:relative;">
+            <div v-if="activeName === `${i.configTypeId}`" style="position:relative;">
               <div class="left">
-                <div class="caseTitle">智慧变电站</div>
+                <div class="caseTitle">{{ info.caseInfoTitle }}</div>
                 <div class="caseInfo">
-                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
+                  {{info.caseInfoDesc}}
                 </div>
                 <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
               </div>
@@ -25,54 +25,12 @@
               <div class="caseImage">
                 <el-image
                   style="width: 100%;height: 100%"
-                  :src="banner"
+                  :src="info.caseInfoPic"
                   fit="contain"></el-image>
               </div>
             </div>
           </transition>
         </el-tab-pane>
-        <el-tab-pane label="制造中心" name="2">
-          <transition name="fade">
-            <div v-if="activeName === '2'" style="position:relative;">
-              <div class="left">
-                <div class="caseTitle">智慧变电站</div>
-                <div class="caseInfo">
-                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
-                </div>
-                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
-              </div>
-              <div class="learnMore" @click="learnMore">
-                <span>
-                  想了解更多？
-                </span>
-                <div class="toRight">
-                  <i class="el-icon-arrow-right"></i>
-                </div>
-              </div>
-            </div>
-          </transition>
-        </el-tab-pane>
-        <el-tab-pane label="快递物流" name="3">
-          <transition name="fade">
-            <div v-if="activeName === '3'" style="position:relative;">
-              <div class="left">
-                <div class="caseTitle">智慧变电站</div>
-                <div class="caseInfo">
-                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
-                </div>
-                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
-              </div>
-              <div class="learnMore" @click="learnMore">
-                <span>
-                  想了解更多？
-                </span>
-                <div class="toRight">
-                  <i class="el-icon-arrow-right"></i>
-                </div>
-              </div>
-            </div>
-          </transition>
-        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -80,18 +38,46 @@
 
 <script>
 import banner from '@/assets/image/banner.png'
+import {getHomeCaseTitleList, getTypicalHomeCaseInfo} from "@/api";
 
 export default {
   name: 'ProductCenter',
   data() {
     return {
       banner,
-      activeName: '1'
+      activeName: 0,
+      list:[],
+      info:{}
     }
   },
+  mounted(){
+    this.getData()
+  },
   methods: {
+    getData(){
+      getHomeCaseTitleList({
+        configTypeClassfication:2,
+        parentId:0,
+        pageNum:1,
+        pageSize:111
+      }).then(e=>{
+        this.list = e.rows
+        this.activeName = `${e.rows?.[0]?.configTypeId}`
+        getTypicalHomeCaseInfo({
+          configTypeId:parseFloat(e.rows?.[0]?.configTypeId)
+        }).then(e=>{
+          console.log(e)
+          this.info = e.data
+        })
+      })
+    },
     handleClick(tab, event) {
-      console.log(tab, event);
+      getTypicalHomeCaseInfo({
+        configTypeId:parseFloat(tab.name)
+      }).then(e=>{
+        console.log(e)
+        this.info = e.data
+      })
     },
     getCaseInfo() {
 

src/views/index/contactUs.vue

@@ -18,20 +18,20 @@
         <div class="form">
           <el-form ref="form" :model="form" size="small">
             <el-form-item>
-              <el-input v-model="form.name" placeholder="姓名(必填)"></el-input>
+              <el-input v-model="form.userName" placeholder="姓名(必填)"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-input v-model="form.name" placeholder="电话号码(必填)"></el-input>
+              <el-input v-model="form.userPhone" placeholder="电话号码(必填)"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-input v-model="form.name" placeholder="电子邮箱(必填)"></el-input>
+              <el-input v-model="form.userEmail" placeholder="电子邮箱(必填)"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-input type="textarea" v-model="form.desc" :rows="6" placeholder="留言内容(必填)"></el-input>
+              <el-input type="textarea" v-model="form.ly" :rows="6" placeholder="留言内容(必填)"></el-input>
             </el-form-item>
             <el-form-item>
               <el-col :span="8">
-                <el-input v-model="form.name" placeholder="验证码"></el-input>
+                <el-input v-model="form.yzm" placeholder="验证码"></el-input>
               </el-col>
               <el-col :span="8" :offset="2">
                 <div style="width: 100%;height: 100%">
@@ -51,6 +51,7 @@
 
 <script>
 import qrcode from '@/assets/image/qrcode.png'
+import {addContactUsInfo} from "@/api";
 
 let map = null
 export default {
@@ -80,7 +81,16 @@ export default {
         offset: new AMap.Pixel(9, 0), //以 icon 的 [center bottom] 为原点
       });
       map.add(marker);
-
+    },
+    onSubmit(){
+      addContactUsInfo(this.form).then(e=>{
+        if(e.code === 200){
+          this.$message({
+            message: '提交成功',
+            type: 'success'
+          });
+        }
+      })
     }
 
   }

src/views/index/index.vue

@@ -27,9 +27,6 @@ export default {
     ContactUs,
     Copyright
   },
-  data() {
-    return {}
-  }
 }
 </script>
 

src/views/index/productCenter.vue

@@ -3,21 +3,21 @@
     <div class="title">PRODUCT CENTER</div>
     <div class="subTitle">产品中心</div>
     <div class="productList">
-      <div v-for="i in 4" class="productItem">
+      <div v-for="i in productList" class="productItem">
         <div class="imageArea">
           <el-image
             style="width: 100%;height: 100%"
-            :src="banner"
+            :src="i.homeConfigTypePic"
             fit="contain"></el-image>
         </div>
         <div class="imageAreaModel">
           <span>
-            随着技术的不断发展和物联网概念的新奇，物联网应用正逐渐渗透到我们的日常生活的各行各业。
+            {{ i.configTypeDesc }}
           </span>
         </div>
         <div class="titleArea">
           <span>
-            物联网解决方案
+            {{ i.homeConfigTypeName }}
           </span>
         </div>
       </div>
@@ -27,12 +27,28 @@
 
 <script>
 import banner from '@/assets/image/banner.png'
+import {getPortalConfigTypeList} from "@/api";
 
 export default {
   name: 'ProductCenter',
   data() {
     return {
-      banner
+      productList:[]
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods:{
+    getData(){
+      getPortalConfigTypeList({
+        configTypeClassfication:1,
+        parentId:0,
+        pageNum:1,
+        pageSize:111
+      }).then(e=>{
+        this.productList = e.rows
+      })
     }
   }
 }

vue.config.js

@@ -10,7 +10,7 @@ module.exports = defineConfig({
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       '/dev-api': {
-        target: `http://124.223.15.102:9600`,
+        target: `http://175.27.215.92/prod-api`,
         // target: `http://1345442242.gnway.cc:80`,
         changeOrigin: true,
         pathRewrite: {