Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
653d1400 1 parent 02b4c605

✨ feat: 解决方案接口联调

Inline Side-by-side
Showing 4 changed files with 327 additions and 98 deletions
/*
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 18:08:31
* @LastEditTime: 2024-11-29 10:13:28
* @FilePath: /hager/src/api/hager.js
* @Description: 文件描述
*/
......@@ -17,6 +17,8 @@ const Api = {
PRODUCT_INFO: '/srv/?a=detail&type=product',
PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
SOLUTION: '/srv/?a=cate&type=solution',
SOLUTION_CASE: '/srv/?a=cate&type=case',
SOLUTION_DETAIL: '/srv/?a=detail&type=case',
FOOTER: '/srv/?a=footer',
REGISTER: '/srv/?a=user&type=register',
LOGIN: '/srv/?a=user&type=login',
......@@ -47,6 +49,10 @@ export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH,
export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
export const getSolutionCaseAPI = (params) => fn(fetch.get(Api.SOLUTION_CASE, params));
export const getSolutionDetailAPI = (params) => fn(fetch.get(Api.SOLUTION_DETAIL, params));
export const getFooterAPI = (params) => fn(fetch.get(Api.FOOTER, params));
export const registerAPI = (params) => fn(fetch.post(Api.REGISTER, params));
......
<!--
* @Date: 2024-10-18 12:06:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-04 09:40:35
* @LastEditTime: 2024-11-29 13:43:42
* @FilePath: /hager/src/views/solution/case.vue
* @Description: 文件描述
-->
......@@ -10,18 +10,105 @@
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-if="!is_xs">解决方案</el-breadcrumb-item>
<el-breadcrumb-item>商建解决方案</el-breadcrumb-item>
<el-breadcrumb-item v-if="!is_xs" :to="{ path: '/solution/index' }">解决方案</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: casePath }">{{ success_info.category_name }}</el-breadcrumb-item>
<el-breadcrumb-item>成功案例</el-breadcrumb-item>
</el-breadcrumb>
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="深圳华侨城洲际酒店" sub="异域风情 奢华享受"></hager-h1>
<hager-box v-if="!is_xs" class="box-n">
<el-row class="solution-case-banner">
<el-col :span="8">
<div class="solution-case-box">
<div class="title">
<p class="c">{{ success_info.post_title }}</p>
<p class="e">{{ success_info.post_subtitle }}</p>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="solution-case-img" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
</el-col>
</el-row>
</hager-box>
<div v-else>
<div style="padding: 1rem;">
<div class="solution-case-img xs" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
<div class="solution-case-box xs">
<div class="title">
<p class="c xs">{{ success_info.post_title }}</p>
<p class="e xs">{{ success_info.post_subtitle }}</p>
</div>
</div>
</div>
</div>
<hager-box>
<div class="case-title">{{ title }}</div>
<div :class="['case-content', is_xs ? 'xs' : '']" v-html="content"></div>
<div :class="['solution-case-intro', is_xs ? 'xs' : '']">
<p v-html="success_info.post_excerpt"></p>
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-n">
<el-row class="solution-case-banner">
<el-col :span="16">
<div class="solution-case-img" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
</el-col>
<el-col :span="8">
<div class="solution-case-box" style="padding: 1rem 2rem;">
<p v-html="success_info.post_content"></p>
<!-- <div class="title">
<p class="c" style="font-size: 1.1rem;">智能产品 精准助力</p>
</div>
<p style="overflow-y: auto; margin-top: 0.5rem;">
海格电气为新疆华电哈密2×100万千瓦煤电项目提供有力的技术支持，提供智能空气断路器、塑壳断路器，EW交流接触器等智能化产品和服务。
HW+空气断路器全系列均标配了LCD液晶显示屏，具有高对比度、高亮度、大字体的特点，方便运维人员在明亮的环境或黑暗的环境下，从不同方向，不同角度轻松读取数据，快速做出运维决策。
塑壳断路器采用智能型控制器与微处理器技术，LSI型脱扣单元具有动作电流和动作时间在线调整功能。其中，短路短延时时间可从0.05S调整到1S，调整范围更加宽泛，为现场实现选择性保护提供技术支撑。
</p> -->
</div>
</el-col>
</el-row>
</hager-box>
<div v-else>
<div style="padding: 1rem;">
<!-- <div class="solution-case-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div> -->
<div class="solution-case-img xs" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
<div class="solution-case-box xs">
<p v-html="success_info.post_content"></p>
<!-- <div class="title">
<p class="c xs">智能产品 精准助力</p>
</div>
<p style="margin-top: 1rem;">
海格电气为新疆华电哈密2×100万千瓦煤电项目提供有力的技术支持，提供智能空气断路器、塑壳断路器，EW交流接触器等智能化产品和服务。
HW+空气断路器全系列均标配了LCD液晶显示屏，具有高对比度、高亮度、大字体的特点，方便运维人员在明亮的环境或黑暗的环境下，从不同方向，不同角度轻松读取数据，快速做出运维决策。
塑壳断路器采用智能型控制器与微处理器技术，LSI型脱扣单元具有动作电流和动作时间在线调整功能。其中，短路短延时时间可从0.05S调整到1S，调整范围更加宽泛，为现场实现选择性保护提供技术支撑。
</p> -->
</div>
</div>
</div>
<hager-box>
<div :class="['case-content', is_xs ? 'xs' : '']" v-html="success_info.post_text"></div>
</hager-box>
<hager-box class="box-n">
<div style="padding: 1vw; background-color: #F3F3F3;">
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
<swiper-slide v-for="(item, index) in case_img" :key="index">
<div class="solution-card-box">
<div class="card-image-wrapper">
<!-- <el-image :src="item.src" fit="fit"></el-image> -->
<img :src="item.value" style="">
</div>
</div>
</swiper-slide>
</swiper>
<div v-if="case_img.length > productSlidesPerView || is_xs" class="hager-product-center-more">
<!-- <hager-more></hager-more> -->
<div class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
<i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
</div>
</div>
</div>
</div>
</hager-box>
</div>
</template>
......@@ -30,26 +117,95 @@
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import { getNewsDetailAPI } from "@/api/hager.js";
import { getSolutionDetailAPI } from "@/api/hager.js";
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
title: '默认标题',
content: '默认内容',
product_list: [],
swiperOption: {
slidesPerView: 2,
spaceBetween: 50,
preventClicks : true,
slideToClickedSlide: false,
touchRatio: 0,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 20
},
768: {
slidesPerView: 3,
spaceBetween: 20
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 2,
spaceBetween: 10
},
160: {
slidesPerView: 1,
spaceBetween: 0
}
}
},
activeProductIndex: 0,
reach_product_end: false,
productSlidesPerView: 4,
success_info: {},
top_banner: '',
text_img: '',
case_img: [],
}
},
computed: {
casePath () {
return `/solution/detail?id=${this.success_info.category_id}`;
}
},
watch: {
'top_banner' (v) {
console.warn(v);
}
},
async mounted () {
const { code, data } = await getNewsDetailAPI({ id: this.$route.query.id });
const { code, data } = await getSolutionDetailAPI({ id: this.$route.query.id });
if (code) {
this.title = data.post_title;
this.content = data.product_advantages;
this.success_info = data;
this.top_banner = this.success_info.file?.top_img ? this.success_info.file?.top_img[0]['value'] : '';
this.text_img = data.file?.left_img ? data.file?.left_img[0]['value'] : '';
this.case_img = data.file?.img_list ? data.file?.img_list : [];
}
this.$nextTick(() => {
this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
this.productSlidesPerView = swiper.slidesPerView
});
});
},
methods: {
prevProductBtn () {
this.$refs.myProductSwiper.$swiper.slidePrev();
},
nextProductBtn () {
this.$refs.myProductSwiper.$swiper.slideNext();
},
onProductSlideChange () {
this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
if (isEnd) {
this.reach_product_end = true;
} else {
this.reach_product_end = false;
}
},
}
}
</script>
......@@ -72,6 +228,101 @@ export default {
}
}
.solution-case-img {
width: 100%;
height: 35rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.xs {
height: 15rem;
}
}
.solution-case-box {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 35rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
&.xs {
height: auto;
}
.title {
font-weight: bold;
word-break: break-all;
.c {
font-size: 1.5rem;
color: @secondary-color;
line-height: 1.5;
&.xs {
font-size: 1.5rem;
}
}
.e {
font-size: 1.2rem;
color: @primary-color;
margin-top: 0.5rem;
&.xs {
font-size: 1.1rem;
}
}
}
}
.solution-case-intro {
padding: 1rem 3rem;
&.xs {
padding: 1rem;
}
}
.solution-card-box {
.card-image-wrapper {
// background-color: #F3F3F3;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
// &:hover {
// transform: scale(1.05);
// // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
// cursor: pointer;
// }
img {
width: 100%;
// margin-left: calc((100%) / 2);
height: auto;
}
}
.card-title {
color: @text-color;
font-weight: bold;
margin: 1rem 0;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.xs-control {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
i {
font-size: 1.35rem;
color: #EE6D10;
&:hover {
cursor: pointer;
}
&.disabled {
color: #ccc;
}
}
}
.case-title {
color: @secondary-color;
text-align: center;
......@@ -81,8 +332,9 @@ export default {
}
:deep(.case-content) {
margin-bottom: 2rem;
padding: 1rem 3rem;
&.xs {
padding: 1rem;
img {
width: 100%;
height: auto;
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-10 11:53:25
* @LastEditTime: 2024-11-29 11:26:32
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
<hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }">
<div class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">学校解决方案</p>
<p class="sub">Campus Solution</p>
<p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p>
<p class="sub">{{ case_info.category_name_en }}</p>
</div>
<!-- <div class="text-sub">
海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
</div> -->
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="0">
<el-col :span="12" style="height: 25rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
<el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
<el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
<el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
<el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="12" class="brief-introduction">
<div class="intro-box">
<!-- <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1> -->
<p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
<i class="el-icon-right"></i>
<p style="margin: 2rem 0;" v-html="case_info.category_description"></p>
<!-- <i class="el-icon-right"></i> -->
</div>
</el-col>
</el-row>
......@@ -39,16 +35,16 @@
<div v-else>
<div style="height: 25rem; margin-top: 2rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
<el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
<el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
<el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
<el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
</el-carousel-item>
</el-carousel>
</div>
<div class="brief-introduction xs">
<div class="intro-box xs">
<hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
<p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
<i class="el-icon-right"></i>
<p style="margin: 2rem 0;" v-html="case_info.post_description"></p>
<!-- <i class="el-icon-right"></i> -->
</div>
</div>
</div>
......@@ -57,10 +53,10 @@
<div v-if="!is_xs">
<div class="hager-success-cases">
<div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
<img :src="item.img" alt="学校图片" class="card-image">
<img :src="item.cover" alt="图片" class="card-image">
<div class="card-content">
<h3>{{ item.title }}</h3>
<p>{{ item.sub }}</p>
<h3>{{ item.post_title }}</h3>
<p v-html="item.post_description"></p>
<i class="el-icon-right"></i>
</div>
</div>
......@@ -74,10 +70,10 @@
<swiper-slide v-for="(item, index) in success_data_list" :key="index">
<div @click="goToCase(item)" class="hager-success-cases xs">
<div class="card">
<img :src="item.img" alt="学校图片" class="card-image">
<img :src="item.cover" alt="图片" class="card-image">
<div class="card-content">
<h3>{{ item.title }}</h3>
<p class="clamp-text">{{ item.sub }}</p>
<h3>{{ item.post_title }}</h3>
<p class="clamp-text" v-html="item.post_description "></p>
<i class="el-icon-right"></i>
</div>
</div>
......@@ -102,9 +98,9 @@
<div class="card-box" @click="goToProduct(item)">
<div class="card-image-wrapper">
<!-- <el-image :src="item.src" fit="fit"></el-image> -->
<img :src="item.src" style="">
<img :src="item.cover" style="">
</div>
<p class="card-title">{{ item.title }}</p>
<p class="card-title">{{ item.post_title }}</p>
</div>
</swiper-slide>
</swiper>
......@@ -130,63 +126,26 @@ import hagerMore from '@/components/hagerMore.vue';
import hagerHCarousel from '@/components/hagerHCarousel.vue';
import hagerService from '@/components/common/hagerService.vue';
import $ from 'jquery';
import { getSolutionCaseAPI } from "@/api/hager.js";
export default {
metaInfo: {
// title: '海格电气官方网站',
meta: [
{ name: 'keyword', content: 'ddddd' },
{ name: 'description', content: '4444' },
]
},
components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
mixins: [mixin.init],
data () {
return {
banner_list: [
{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
url: ''
},
{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
url: ''
}
],
success_data_list: [{
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}],
product_list: [{
src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
title: 'hw01 空气断路器'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
title: 'h3+ 智能塑壳断路器'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'ats自动转换开关'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
}],
case_info: {},
case_banner: '',
case_img: [],
banner_list: [],
success_data_list: [],
product_list: [],
swiperOption: {
slidesPerView: 2,
spaceBetween: 50,
......@@ -224,7 +183,15 @@ export default {
productSlidesPerView: 4,
}
},
mounted () {
async mounted () {
const { code, data } = await getSolutionCaseAPI({ cid: this.$route.query.id });
if (code) {
this.case_info = data;
this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png';
this.case_img = data.file?.img ? data.file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
this.success_data_list = data.list;
this.product_list = data.product;
}
this.$nextTick(() => {
this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
......@@ -258,12 +225,18 @@ export default {
},
goToProduct (v) {
this.$router.push({
path: '/product/detail'
path: '/product/detail',
query: {
id: v.id
}
});
},
goToCase (v) {
this.$router.push({
path: '/solution/case'
path: '/solution/case',
query: {
id: v.id,
}
});
},
prevProductBtn () {
......@@ -291,7 +264,6 @@ export default {
onSuccessSlideChange () {
this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
console.warn(isEnd);
if (isEnd) {
this.reach_success_end = true;
......
......@@ -126,7 +126,7 @@ export default {
}
this.$nextTick(() => {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
this.solution_mini_height = $(window).outerWidth() * 0.55 + 'px';
// 动态计算图片高度
let img_width = $('.card-image').outerWidth();
......@@ -141,7 +141,7 @@ export default {
methods: {
handleHeightResize () {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
// 动态计算图片高度
let img_width = $('.card-image').outerWidth();
......@@ -160,7 +160,6 @@ export default {
return result;
},
goToSolution (v) {
console.warn(v);
this.$router.push({
path: '/solution/detail',
query: {
......@@ -201,7 +200,7 @@ export default {
img {
width: 100%;
max-width: 100%; /* 防止宽度超出容器 */
object-fit: fill; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
object-fit: cover; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
}
}
.hager-industry-solutions {
......