解决方案中心

assets/icons/svg/ePower.svg

@@ -0,0 +1 @@
+<svg t="1681810336929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4459" width="200" height="200"><path d="M579.456 128c31.008 0 58.016 22.08 65.504 53.568L677.984 320H800v64h-106.72l30.528 128H832v64l-96.128 0.032-0.256 3.264 61.76 226.56c10.24 37.568-10.496 76.704-46.368 87.424a64.8 64.8 0 0 1-50.048-5.44l-4.992-3.072L512 760.992l-183.968 123.776a64.96 64.96 0 0 1-55.04 8.512c-35.84-10.72-56.64-49.856-46.4-87.392l61.792-226.592L288.192 576H192v-64h108.16l30.528-128H224v-64h121.984l33.056-138.432c7.072-29.76 31.584-51.072 60.384-53.376l5.12-0.192h134.912z m103.968 517.632l-108.992 73.312 158.048 106.368-49.056-179.68z m-342.88 0L291.52 825.312l158.016-106.368-108.992-73.312zM661.984 576H361.92L512 676.928 661.984 576z m-49.952-192h-200.128l-34.944 128h269.984l-34.912-128z m-50.56-185.28h-98.976L429.376 320h165.184l-33.056-121.28z" fill="#686C78" p-id="4460"></path></svg>

assets/icons/svg/industry.svg

@@ -0,0 +1 @@
+<svg t="1681810071576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3669" width="200" height="200"><path d="M121.904762 902.095238v-73.142857h97.523809v-170.666667h97.52381v170.666667h158.47619V269.04381l-186.660571 186.660571-51.736381-51.712L512.877714 128.170667 788.72381 404.016762l-51.712 51.712-188.440381-188.464762V828.952381H707.047619V536.380952h97.52381v292.571429h97.523809v73.142857H121.904762z" p-id="3670"></path></svg>

assets/icons/svg/solution.svg

@@ -0,0 +1 @@
+<svg t="1681809966026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2637" width="200" height="200"><path d="M861.05 289.32a360.25 360.25 0 0 0-81.52-115.18A379.4 379.4 0 0 0 659 96.8a397.81 397.81 0 0 0-299.4 1.92A377.8 377.8 0 0 0 236.76 181C169.47 248.52 132.61 337.05 133 430.14c0 112.78 53.84 217.27 147.83 287.19 2.36 3 6.25 8.1 9 11.76l3.07 4a82.25 82.25 0 0 0 26.8 45.08 86 86 0 0 0 56.2 20.54h269.27a86.8 86.8 0 0 0 56.57-21.06 84.21 84.21 0 0 0 27.39-44.41 90.26 90.26 0 0 1 10.62-12.91C835.92 651.71 891 546.3 891 430.84a346.63 346.63 0 0 0-29.95-141.52zM709.26 680.7l-1.5 1.06-1.32 1.24c-1.77 1.68-17.46 16.88-24 31.82l-1.2 2.76-0.52 3c-2.37 13.56-16.64 28.19-35.54 28.19H375.89c-17.95 0-32.51-12.23-34.62-29.08l-0.86-6.9-4.31-5.47c-1.48-1.88-3.87-5-6.4-8.38-6-7.89-10.08-13.29-12.77-16.36l-1.82-2.08-2.23-1.63C230.33 618.46 183 527.8 183 430c-0.32-79.79 31.36-155.72 89.2-213.79 62.78-63 147.82-97.74 239.45-97.74C693.26 118.51 841 258.62 841 430.84c0 99.66-48 190.73-131.74 249.86zM640.64 831.94H383.36a25 25 0 0 0 0 50h257.28a25 25 0 0 0 0-50zM603.64 909.29H420.36a25 25 0 0 0 0 50h183.28a25 25 0 0 0 0-50z" p-id="2638"></path><path d="M512 185.81a25 25 0 0 0 0 50c114.75 0 208.1 93.35 208.1 208.1a25 25 0 0 0 50 0A258.1 258.1 0 0 0 512 185.81z" p-id="2639"></path></svg>

components/banner/itemBanner.vue

@@ -4,8 +4,8 @@
       <img src="/image/banner/banner_product.png" alt="">
     </div>
     <div class="banner-con bg-absolute">
-      <span>{{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}</span>
-      <span class="subTitle">{{lang===langType.cn?"持续创新的软硬件产品":getLangText("持续创新的软硬件产品")}}</span>
+      <span>{{lang===langType.cn?title:getAbbrText(title)}}</span>
+      <span class="subTitle">{{lang===langType.cn?subTitle:getLangText(subTitle)}}</span>
       <span>1</span>
     </div>
     <div class="banner-con">

components/solutionList.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="content productList">
+    <div class="conBox solutionCenter">
+      <a class="solution"
+         v-for="(item,i) in solutionList"
+         :key="'pro-'+i"
+         @click="clickProductHandle(item)"
+      >
+          <span class="imgBox">
+             <img :src="'/public/'+item.image" :alt="item.name" class="img">
+
+          </span>
+        <span class="more">
+              {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
+            </span>
+        <p class="solution-info">
+            <span class="title">
+              {{lang===langType.cn?item.name:getAbbrText(item.name)}}
+            </span>
+          <span class="description" v-if="item.remark">
+          {{item.remark}}
+        </span>
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "~/map/langMap";
+
+export default {
+  name: "solutionList",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+    solutionList: {
+      default(){
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+    }
+  },
+  methods: {
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+    clickProductHandle(solution){
+      console.log(solution);
+      let url = ""
+      if(solution.sourceType === "1"){
+        url = solution.source;
+      }else{
+        url = `/solution/item/${solution.type_key}?id=${solution.id}`
+      }
+      window.location.href = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*@import "~/assets/productList.css";*/
+.solutionCenter{
+  margin: 10px auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.solution{
+  display: flex;
+  width: 96%;
+  height: 360px;
+  margin-bottom: 30px;
+  border-radius: 3px;
+  position: relative;
+  box-shadow: 1px 1px 5px black;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.solution .imgBox{
+  display: flex;
+  position: relative;
+  width: 40%;
+  height: 360px;
+  overflow: hidden;
+  justify-content: center;
+}
+.solution .imgBox img{
+  display: block;
+  max-width: 100%;
+  width: auto;
+  height: 100%;
+}
+
+.solution .more{
+  background-color: #912b02;
+  padding: 0 30px;
+  border-radius: 4px;
+  display: block;
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  opacity: 0;
+  transition:all 0.5s;
+  color: white;
+}
+.solution:hover .more{
+  opacity: 1;
+  background-color: orangered;
+}
+.solution .more:hover{
+  box-shadow: 1px 1px 5px white;
+  padding: 0 25px;
+}
+.solution .solution-info{
+  display: block;
+  width: calc(60% - 15px);
+  padding: 5px;
+  margin-left: 15px;
+  box-sizing: border-box;
+}
+.solution .solution-info .title{
+  font-size: 2rem;
+  display: block;
+}
+
+.solution .solution-info .escription{
+  display: block;
+  text-indent: 2em;
+}
+</style>

components/solutionTypes.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="content">
+    <div class="conBox big-title">
+      <span>
+        {{lang===langType.cn?"解决方案":getAbbrText("解决方案")}}
+      </span>
+      <div class="hr"></div>
+    </div>
+    <div class="conBox product-type">
+      <p
+        v-for="(item,i) in types"
+        :key="item.key"
+        :class="`type-item ${item.key===type?'type-selected':''}`"
+        @click="selectType(item.key)"
+      >
+        <span class="icon-box">
+          <svg-icon :icon-class="item.icon"/>
+        </span>
+        <span class="type-name">{{lang===langType.cn?item.text:getAbbrText(item.text)}}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import langMap from "@/map/langMap";
+import {sTypes} from "~/map/solutionMap";
+
+export default {
+  name: "solutionTypes",
+  props: {
+    lang:{
+      default: langMap.lang.cn
+    },
+    type:{
+      default: 'all'
+    }
+  },
+  data(){
+    return {
+      langType: langMap.lang,
+      types: sTypes
+    }
+  },
+  methods:{
+    getLangText(str) {
+      return langMap.getText(this.lang, str);
+    },
+    getAbbrText(str) {
+      return langMap.getAbbrText(this.lang, str);
+    },
+    selectType(nextType){
+      console.log(nextType)
+      if (this.type === nextType){
+        return 0;
+      }
+      this.$root.$emit('changeSolutionType',nextType);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content{
+  cursor: default;
+}
+.content .big-title{
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+.product-type{
+  height: 120px;
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+}
+
+.product-type .type-item{
+  width: auto;
+  height: 100%;
+  cursor: pointer;
+}
+.product-type .type-item:hover{
+  color: orangered;
+}
+.content .product-type .type-selected{
+  color: #f88330;
+}
+.product-type .type-item .icon-box{
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 4rem;
+  padding-bottom: 20px;
+}
+.content .product-type .type-selected .icon-box{
+  border-bottom: 1px solid deepskyblue;
+}
+.product-type .type-item .type-name{
+  width: 100%;
+  height: 60px;
+  font-size: 1.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

map/langMap.js

@@ -88,6 +88,14 @@ const textArr = [
     keys: ["产品类别"],
     "en-us": 'Product Type',
   },
+  {
+    keys: ["解决方案"],
+    "en-us": 'Solution',
+  },
+  {
+    keys: ["新闻中心"],
+    "en-us": 'News',
+  },
 ]
 const i18Paths =
   [

map/solutionMap.js

@@ -0,0 +1,46 @@
+export const sTypes = [
+  {
+    key: 'all',
+    icon: 'all',
+    text: '全部方案'
+  },
+  {
+    key: 'sol',
+    icon: 'solution',
+    text: '解决方案',
+    subText: '专业化的解决方案,成熟,稳定'
+  },
+  {
+    key: 'acs',
+    icon: 'industry',
+    text: '行业应用',
+    subText: '针对行业,进行定制化解决方案,深度解决问题'
+  },
+  {
+    key: 'epower',
+    icon: 'ePower',
+    text: '电力案例',
+    subText: '电网方面专业解决方案'
+  },
+]
+
+export function getTypeText (key){
+  let item = sTypes.find(val=>val.key === key);
+  if(item&&item.text){
+    return item.text;
+  }else{
+    return "loading...";
+  }
+
+}
+
+
+export function getTypeSubText (key){
+  let item = sTypes.find(val=>val.key === key);
+  if(item&&item.subText){
+    return item.subText;
+  }else{
+    return "loading...";
+  }
+
+}

pages/solution/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="">
+    <lucency-header :lang="lang" page-key="solution" />
+    <item-banner :lang="lang" :title="`解决方案`" :sub-title="`专业,高效,稳定解决方案`"/>
+    <solution-types :lang="lang" :type="type"></solution-types>
+    <solution-list :lang="lang" :solution-list="solutions"></solution-list>
+    <page-select :page="page" :count="nowCount" :total="nowTotal"></page-select>
+
+    <default-footer :lang="lang"/>
+  </div>
+</template>
+
+<script>
+import qs from "qs"
+
+import productBanner from "~/components/banner/productBanner";
+import itemBanner from "~/components/banner/itemBanner";
+import solutionTypes from "~/components/solutionTypes";
+import solutionList from "~/components/solutionList";
+
+import langMap from "~/map/langMap";
+import handle from "~/until/handle";
+import axios from "axios";
+
+export default {
+  name: "solutionIndex",
+  props:['uLang','pType','pKey','pSolution'],
+  components:{
+    productBanner,
+    itemBanner,
+    solutionTypes,
+    solutionList
+  },
+  async asyncData(ctx){
+    // ctx.searchProduct();
+    const queryData = {};
+    // console.log(ctx)
+    queryData['key']=ctx.key;
+    queryData['type']=ctx.type;
+    queryData['page']=1;
+    // 获取数据
+    let url = 'http://szhfy.com.cn/api/searchSolution.php';
+    let [err,res] = await handle(axios.post(
+      url,
+      qs.stringify(queryData)
+    ));
+    if(err){
+      console.log(err);
+      return {};
+    }
+    let result = res.data;
+    if(result.rcode === 1){
+      return {solutions:result.data}
+    }else{
+      console.error(result.msg);
+      console.log(result);
+      return {solutions:[]}
+    }
+  },
+  data(){
+    return {
+      lang: this.uLang?this.uLang:langMap.lang.cn,
+      type: this.pType?this.pType:'all',
+      key: this.pKey?this.pKey:'',
+      page: 1,
+      nowCount: 199,
+      nowTotal: 2,
+      solutions:this.pSolution?this.pSolution:[],
+      pageSave: {
+
+      }
+    }
+  },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang);
+    this.$root.$on('changeSolutionType',this.selectType);
+    this.$root.$on('changePage',this.changePageHandle);
+    // this.$root.$on('changeProductType',this.selectType);
+
+  },
+  methods:{
+    switchLang(nextLang){
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    },
+    selectType(nextType){
+      console.log(nextType)
+      this.type = nextType;
+      this.page = 1;
+      this.searchSolution();
+    },
+    changePageHandle(nextPage){
+      this.page = nextPage;
+      this.searchSolution();
+    },
+    async searchSolution(){
+      // const formData = new FormData();
+      // formData.append('key',this.key);
+      // formData.append('type',this.type);
+      // formData.append('page',this.page);
+      const queryData = {};
+      // console.log(ctx)
+      queryData['key']=this.key;
+      queryData['type']=this.type;
+      queryData['page']=this.page;
+      // 获取数据
+      let url = '/api/searchSolution.php';
+      let data = qs.stringify(queryData);
+      let [err,res] = await handle(this.$axios.post(
+        url,
+        data
+      ));
+      if(err){
+        console.log(err);
+        return null;
+      }
+      let result = res.data;
+      console.log(result)
+      if(result.rcode === 1){
+        this.solutions = result.data?result.data:[];
+        this.loadPageData(data);
+      }else{
+        console.error(result.msg);
+        console.log(result);
+      }
+    },
+    async loadPageData(queryData){
+      let url = '/api/getSolutionPage.php';
+      // let
+      let err,res;
+      let pageData = null;
+      if(this.pageSave[this.type] && this.pageSave[this.type][this.key]){
+        pageData = this.pageSave[this.type][this.key]
+      }else{
+        [err,res] = await handle(this.$axios.post(
+          url,
+          queryData
+        ));
+        if(err){
+          console.error(err);
+        }else{
+          let result = res.data;
+          if(result.rcode === 1){
+            pageData = result.data?result.data:{};
+          }else{
+            console.error(result.msg);
+            console.log(result);
+          }
+        }
+      }
+      if (pageData){
+        this.nowTotal = Math.ceil(pageData.count / pageData.limit);
+        this.nowCount = pageData.count;
+        if(!this.pageSave[this.type]){
+          this.pageSave[this.type] = {}
+        }
+        if(!this.pageSave[this.type][this.key]){
+          this.pageSave[this.type][this.key] = pageData;
+        }
+      }else{
+        this.nowTotal = 1;
+        this.nowCount = 1;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

phpAPi/getSolutionPage.php

@@ -0,0 +1,84 @@
+<?php
+include('../conn_mysqli.php');
+include('../phpMode/rcodeMap.php');
+$key = $_POST['key'];
+$type = $_POST['type'] ? $_POST['type'] : 'all';
+// 设置 $page 的默认值为1，并限定取值范围在1-10之间
+$page = isset($_POST['page']) ? max(1, min(10, intval($_POST['page']))) : 1;
+// 设置 $limit 的默认值为20，并限定取值范围在1-100之间
+$limit = isset($_POST['limit']) ? max(1, min(100, intval($_POST['limit']))) : 20;
+$offset = ($page - 1) * $limit;
+
+header('Content-Type:text/json;charset=utf-8;');
+//echo "param:" . $key . "-" . $type . "-" . $limit . "-" . $offset . "   ";
+
+try {
+  $resObj = array(
+    'rcode' => Rcode_OK,
+    'data' => "",
+    'msg' => 'ok'
+  );
+  set_time_limit(50);
+  $conn = createConn();
+  $sql = "";
+  $stmt = null;
+//echo "fuck php not conn ?";
+  if ($type == "all") {
+    // 无条件全选
+    if (!empty($key)) {
+//      echo " \n php is low \n";
+      $sql = "SELECT count(*) as total  FROM mysql85931094_db.hfy_news as news  where news.title like '".$key."'";
+      $stmt = mysqli_prepare($conn, $sql);
+      mysqli_stmt_bind_param($stmt, "s", $key);
+    } else {
+//      echo " \n fuck php  \n";
+      $sql = 'SELECT count(*) as total
+FROM mysql85931094_db.hfy_news as news  ';
+      $stmt = mysqli_prepare($conn, $sql);
+//      mysqli_stmt_bind_param($stmt, "");
+    }
+  } else {
+    if (!empty($key)) {
+//      echo " \n fuck php ?  \n";
+      $sql = 'SELECT
+     count(*) as total
+FROM mysql85931094_db.hfy_news as news ,
+                mysql85931094_db.hfy_news_type as n_type
+           where news.type_id = n_type.type_id and n_type.type_key = ? and news.title like \''.$key.'\' ;';
+      $stmt = mysqli_prepare($conn, $sql);
+      mysqli_stmt_bind_param($stmt, "s", $type);
+    } else {
+//      echo " \n fuck fuck fuck  \n";
+      $sql = 'SELECT
+     count(*) as total
+FROM mysql85931094_db.hfy_news as news , mysql85931094_db.hfy_news_type as n_type
+           where news.type_id = n_type.type_id and n_type.type_key = ? ;';
+      $stmt = mysqli_prepare($conn, $sql);
+      mysqli_stmt_bind_param($stmt, "s", $type);
+    }
+  }
+
+  mysqli_stmt_execute($stmt);
+//  echo " fuck_2";
+  $res = mysqli_stmt_get_result($stmt);
+//  mysqli_stmt_get_result
+//  $rs = mysqli_fetch_assoc($res);
+  // 获取行数据
+//  $result = mysqli_stmt_get_result($stmt);
+//  $row = mysqli_fetch_array($result, MYSQLI_NUM);
+
+// 获取行数
+//  $count = $row[0];
+  $row = mysqli_fetch_array($res, MYSQLI_NUM);
+  mysqli_close($conn);
+  $resObj['data'] = array(
+    'count' => $row[0],
+    'limit' => $limit
+  );
+
+//  echo "fuck ".$res;
+  echo json_encode($resObj);
+}catch(Exception $e)
+{
+  echo 'server Error Message: notFound';
+}

phpAPi/searchSolution.php

@@ -0,0 +1,79 @@
+<?php
+include('../conn_mysqli.php');
+include('../phpMode/rcodeMap.php');
+$key = $_POST['key'];
+$type = $_POST['type'] ? $_POST['type'] : 'all';
+// 设置 $page 的默认值为1，并限定取值范围在1-10之间
+$page = isset($_POST['page']) ? max(1, min(10, intval($_POST['page']))) : 1;
+// 设置 $limit 的默认值为20，并限定取值范围在1-100之间
+$limit = isset($_POST['limit']) ? max(1, min(100, intval($_POST['limit']))) : 20;
+$offset = ($page - 1) * $limit;
+
+header('Content-Type:text/json;charset=utf-8;');
+$resObj = array(
+  'rcode' => Rcode_OK,
+  'data' => "",
+  'msg' => 'ok'
+);
+try {
+
+  set_time_limit(50);
+
+  $conn = createConn();
+  $sql = "";
+  $stmt = null;
+  if ($type == "all") {
+    // 无条件全选
+    if (!empty($key)) {
+//      echo " \n php is low \n";
+      $sql = 'SELECT news.id,news.remark,news.title as name,news.image,news.source,news.sourceType,n_type.type_key
+FROM mysql85931094_db.hfy_news as news  , mysql85931094_db.hfy_news_type as n_type
+where news.type_id = n_type.type_id and news.title like \''.$key.'\' order by news.id desc limit ?,?';
+    } else {
+//      echo " \n fuck php  \n";
+      $sql = 'SELECT news.id,news.remark,news.title as name,news.image,news.source,news.sourceType,n_type.type_key
+FROM mysql85931094_db.hfy_news as news , mysql85931094_db.hfy_news_type as n_type
+where news.type_id = n_type.type_id order by news.id desc  limit ?,?';
+
+    }
+    $stmt = mysqli_prepare($conn, $sql);
+    mysqli_stmt_bind_param($stmt, "dd", $offset, $limit);
+  } else {
+    if (!empty($key)) {
+//      echo " \n fuck php ?  \n";
+      $sql = 'SELECT
+     news.id,news.remark,news.title as name,news.image,news.source,news.sourceType,n_type.type_key
+FROM mysql85931094_db.hfy_news as news ,
+                mysql85931094_db.hfy_news_type as n_type
+           where news.type_id = n_type.type_id and n_type.type_key = ? and news.title like \''.$key.'\'
+           order by news.id desc  limit ?,?';
+      $stmt = mysqli_prepare($conn, $sql);
+      mysqli_stmt_bind_param($stmt, "ssdd", $type, $key, $offset, $limit);
+    } else {
+//      echo " \n fuck fuck fuck  \n";
+      $sql = 'SELECT
+     news.id,news.remark,news.title as name,news.image,news.source,news.sourceType,n_type.type_key
+FROM mysql85931094_db.hfy_news as news , mysql85931094_db.hfy_news_type as n_type
+           where news.type_id = n_type.type_id and n_type.type_key = ?
+           order by news.id desc limit ?,?';
+      $stmt = mysqli_prepare($conn, $sql);
+      mysqli_stmt_bind_param($stmt, "sdd", $type, $offset, $limit);
+    }
+  }
+  mysqli_stmt_execute($stmt);
+  $res = mysqli_stmt_get_result($stmt);
+
+  while ($row = mysqli_fetch_assoc($res)) {
+    $rs[] = $row;
+  }
+  mysqli_close($conn);
+  $resObj['data'] = $rs;
+  echo json_encode($resObj);
+
+}catch(Exception $e)
+{
+//  echo 'Message: ' .$e->getMessage();
+  $resObj['rcode'] = Rcode_ServerError;
+  $resObj['msg'] = 'server error';
+  echo json_encode($resObj);
+}