Skip to content

H
huaxin-rq
Commit 1fba2d10 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

优化两个页面

parent 4dcda3aa
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 102 deletions
huaxin-web/src/views/bigWindow/Ind/Ind.vue
View file @ 1fba2d10
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-16 13:23:56
* @LastEditTime: 2026-03-31 17:29:45
* @FilePath: /test-ranqi/src/views/Index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -46,7 +46,7 @@
: `scale(${1.63 * scaleX},${1.63 * scaleX})`,
}"
>
<Rotate @imgClick="$emit('imgClick', $event)"/>
<Rotate @centerClick="$emit('centerClick')" @imgClick="$emit('imgClick', $event)"/>
</div>
</div>
</div>
......@@ -83,7 +83,11 @@ export default {
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
},
methods: {},
methods: {
centerClick(){
}
},
};
</script>
<style lang="scss" scoped>
......
huaxin-web/src/views/bigWindow/Ind/components/DeviceScrollTable.vue
View file @ 1fba2d10
......@@ -101,7 +101,7 @@ export default {
},
computed: {
scrollDuration() {
const rowsCount = this.rows.length || 1;
const rowsCount = this.cycleList.length || 1;
return Math.max(6, rowsCount * this.speed * 0.1);
},
rootStyle() {
......
huaxin-web/src/views/bigWindow/Ind/components/Right.vue
View file @ 1fba2d10
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:51:18
* @LastEditTime: 2026-04-08 10:00:21
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -10,8 +10,11 @@
<div class="right">
<img class="imgr" :src="d" alt="" />
<div class="t1">
<Title text="事件定位" />
<div class="t1box">
<Title text="工业用户统计" />
<div class="chars-box">
<UserTypeBarChartGy />
</div>
<!-- <div class="t1box">
<div class="b1">
<img class="img1" src="@/assets/bigwindowImg/indImg/rimga.png" alt="" />
<div>事件概况</div>
......@@ -28,11 +31,11 @@
<img class="img1" src="@/assets/bigwindowImg/indImg/rimgb.png" alt="" />
<div>点击定位</div>
</div>
</div>
</div> -->
</div>
<div class="t2">
<Title text="用户统计" />
<Title text="居民用户统计" />
<div class="chars-box">
<UserTypeBarChartVue />
</div>
......@@ -41,7 +44,7 @@
<div class="t3">
<Title text="设备生命周期" />
<div class="tab-box">
<Table/>
<Table />
</div>
</div>
</div>
......@@ -52,7 +55,8 @@ import Title from "@/views/bigWindow/PubCom/title.vue";
import d from "@/assets/bigwindowImg/index/rt.png";
import UserTypeBarChartVue from "./UserTypeBarChart.vue";
import Table from "@/views/bigWindow/Ind/components/DeviceScrollTable.vue"
import UserTypeBarChartGy from "./UserTypeBarChartGy.vue";
import Table from "@/views/bigWindow/Ind/components/DeviceScrollTable.vue";
import { listResponse } from "@/api/emergency/response";
export default {
......@@ -60,8 +64,8 @@ export default {
components: {
Title,
UserTypeBarChartVue,
Table
UserTypeBarChartGy,
Table,
},
data() {
return {
......@@ -69,29 +73,29 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 1,
responseStatus: 0
responseStatus: 0,
},
eventInfo: {
title: "暂无事件",
address: "无"
}
address: "无",
},
};
},
created(){
created() {
this.getList();
},
methods: {
getList(){
listResponse(this.queryParams).then(res => {
if(res.code == 200 && res.rows){
getList() {
listResponse(this.queryParams).then((res) => {
if (res.code == 200 && res.rows) {
//this.eventList = res.rows;
this.eventInfo = res.rows[0];
}
});
},
toEvent(){
this.$router.push("/urgent/emergency")
}
toEvent() {
this.$router.push("/urgent/emergency");
},
},
};
</script>
......@@ -118,7 +122,7 @@ export default {
}
.t1box {
width: 100%;
height: 120px;
// height: 120px;
background: url("~@/assets/bigwindowImg/indImg/t1boxbg.png") no-repeat;
background-size: 100% 100%;
display: flex;
......@@ -170,23 +174,27 @@ export default {
cursor: pointer;
}
}
.t2 {
.t2,
.t1 {
margin-bottom: 20px;
box-sizing: border-box;
.chars-box {
margin-top: 20px;
box-sizing: border-box;
}
}
.t3 {
display: flex;
flex-direction:column;
flex-direction: column;
height: 210px;
.tab-box{
margin-top:20px;
flex:1;
.tab-box {
margin-top: 20px;
flex: 1;
// background: red;
overflow: hidden;
}
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/Rotate.vue
View file @ 1fba2d10
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-16 11:10:26
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-16 13:24:26
* @LastEditTime: 2026-04-07 09:38:56
* @FilePath: /test-ranqi/src/views/Rotate.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -11,7 +11,7 @@
<div
@mouseenter="imgScale = 1.2"
@mouseleave="imgScale = 1"
@dblclick="dbclick"
@click="centerClick"
class="imgcenter-shadow"
></div>
<img
......@@ -23,15 +23,15 @@
<div class="out-box">
<div
v-for="item in imgArr"
:key="item.num"
:key="item.src"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
class="a"
:style="{
background: `url(${item.src}) no-repeat`,
background: `url(${item.img}) no-repeat`,
backgroundSsize: '100% 100%;',
}"
@click="$emit('imgClick', item.num)"
@click="$emit('imgClick', item.src)"
></div>
<!-- <div class="a"></div> -->
<!-- 地图 -->
......@@ -47,13 +47,14 @@
<script>
// url(${item.src}) no-repeat
import center from "@/assets/bigwindowImg/rotate/center.png";
import a from "@/assets/bigwindowImg/rotate/a.png";
import b from "@/assets/bigwindowImg/rotate/b.png";
import c from "@/assets/bigwindowImg/rotate/c.png";
import d from "@/assets/bigwindowImg/rotate/d.png";
import e from "@/assets/bigwindowImg/rotate/e.png";
import f from "@/assets/bigwindowImg/rotate/f.png";
import g from "@/assets/bigwindowImg/rotate/g.png";
import ajxc from "@/assets/bigwindowImg/rotate/ajxc.png";
import yhgl from "@/assets/bigwindowImg/rotate/yhgl.png";
import kqdw from "@/assets/bigwindowImg/rotate/kqdw.png";
import tjfx from "@/assets/bigwindowImg/rotate/tjfx.png";
import aqgl from "@/assets/bigwindowImg/rotate/aqgl.png";
import sbsmzq from "@/assets/bigwindowImg/rotate/sbsmzq.png";
import yjgl from "@/assets/bigwindowImg/rotate/yjgl.png";
import yxjc from "@/assets/bigwindowImg/rotate/yxjc.png";
export default {
name: "",
......@@ -65,21 +66,24 @@ export default {
imgScale: 1,
clickTimer: null,
imgArr: [
{ src: a, num: 1 },
{ src: b, num: 2 },
{ src: c, num: 3 },
{ src: d, num: 4 },
{ src: e, num: 5 },
{ src: f, num: 6 },
{ src: g, num: 7 },
{ img: ajxc, src: "/checktask/jmchacktask" },
{ img: yhgl, src: "/danger/danger" },
{ img: kqdw, src: "/gasinfo/in" },
{ img: tjfx, src: "/inspectStatistics/residentstatistics" },
{ img: aqgl, src: "/safe/meeting" },
{ img: sbsmzq, src: "/cycle/cycle" },
{ img: yjgl, src: "/urgent/contacts" },
{ img: yxjc, src: "/reportinfo/gasdata" },
],
center,
};
},
mounted() {
clearInterval(this.timer);
this.rotate();
},
beforeDestroy() {
console.log("离开")
clearInterval(this.timer);
},
methods: {
......@@ -110,8 +114,8 @@ export default {
}, 10);
},
dbclick() {
console.log("双击");
centerClick() {
this.$emit("centerClick");
},
mouseenter() {
clearInterval(this.timer);
......@@ -181,7 +185,7 @@ export default {
height: 70px;
width: 50px;
z-index: 99900;
background: url("~@/assets/bigwindowImg/rotate/a.png") no-repeat;
background: url("~@/assets/bigwindowImg/rotate/ajxc.png") no-repeat;
background-size: 100% 100% !important;
cursor: pointer;
// transition: all 0.1s linear;
......
huaxin-web/src/views/bigWindow/Ind/components/UserTypeBarChart.vue
View file @ 1fba2d10
......@@ -138,16 +138,16 @@ export default {
color: "#2fd6ff",
},
},
{
name: "工商业用户",
type: "bar",
data: this.commercial,
barWidth: 10,
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: "#42ff9d",
},
},
// {
// name: "工商业用户",
// type: "bar",
// data: this.commercial,
// barWidth: 10,
// itemStyle: {
// borderRadius: [2, 2, 0, 0],
// color: "#42ff9d",
// },
// },
],
});
},
......@@ -158,6 +158,7 @@ export default {
<style lang="scss" scoped>
.user-type-bar-chart {
width: 100%;
height: 200px;
height: 190px;
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/UserTypeBarChartGy.vue 0 → 100644
View file @ 1fba2d10
<template>
<div ref="chart" class="user-type-bar-chart"></div>
</template>
<script>
import { userStatistic } from "@/api/screenstatistic/statistic";
export default {
name: "UserTypeBarChart",
/*props: {
categories: {
type: Array,
default() {
return ["白芨屯", "七树庄", "王浒圳", "新罕电", "小张各庄", "欢喜庄", "李朝庄"];
},
},
residential: {
type: Array,
default() {
return [26, 34, 18, 22, 24, 28, 10];
},
},
commercial: {
type: Array,
default() {
return [18, 24, 8, 18, 20, 26, 22];
},
},
},*/
data() {
return {
chart: null,
categories: [],
residential: [],
commercial: []
};
},
mounted() {
this.initChart();
this.getUserStatistic();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
/* watch: {
categories() {
this.updateChart();
},
residential() {
this.updateChart();
},
commercial() {
this.updateChart();
},
},*/
methods: {
getUserStatistic(){
userStatistic().then(res =>{
if(res.code == 200){
this.categories = res.data.categories || [];
this.residential = Array.isArray(res.data.residential)
? res.data.residential
: (res.data.residential || []).map(Number);
this.commercial = Array.isArray(res.data.commercial)
? res.data.commercial
: (res.data.commercial || []).map(Number);
this.updateChart();
}
})
},
initChart() {
if (!this.$refs.chart) {
return;
}
this.chart = this.$echarts.init(this.$refs.chart);
this.updateChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
updateChart() {
if (!this.chart) {
return;
}
this.chart.setOption({
grid: {
left: 8,
right: 8,
top: 30,
bottom: 0,
containLabel: true,
},
legend: {
top: 0,
right: 10,
itemWidth: 16,
itemHeight: 8,
textStyle: {
color: "#ffffff",
fontSize: 12,
},
},
xAxis: {
type: "category",
data: this.categories,
boundaryGap: true,
axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
axisTick: { show: false },
axisLabel: {
interval: 0,
color: "#ffffff",
fontSize: 11,
},
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
lineStyle: { color: "rgba(255,255,255,0.2)" },
},
},
series: [
// {
// name: "居民用户",
// type: "bar",
// data: this.residential,
// barWidth: 10,
// itemStyle: {
// borderRadius: [2, 2, 0, 0],
// color: "#2fd6ff",
// },
// },
{
name: "工商业用户",
type: "bar",
data: this.commercial,
barWidth: 10,
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: "#42ff9d",
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.user-type-bar-chart {
width: 100%;
height: 190px;
}
</style>
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
View file @ 1fba2d10
......@@ -2,18 +2,18 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-16 13:33:21
* @LastEditTime: 2026-04-07 10:25:15
* @FilePath: /test-ranqi/src/views/Index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="ind3">
<div id="gao-map-index"></div>
<Left />
<Right />
<!-- <Left /> -->
<!-- <Right /> -->
<div @click="$emit('imgClick', 'index')" class="backindex">返回首页概览</div>
<Bottom />
<Bottom @change="change"/>
</div>
</template>
......@@ -60,6 +60,10 @@ export default {
this
);
},
change(arr1,arr2){
console.log(arr1,arr2)
}
},
};
</script>
......
huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue
View file @ 1fba2d10
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-12 14:23:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:38:19
* @LastEditTime: 2026-04-07 10:24:39
* @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -11,7 +11,7 @@
<div class="l" v-if="left != 0" @click="left += 152"></div>
<div
class="r"
v-if="left != -(itemArr.length - 3) * 152"
v-if="left != -([...itemArr1,...itemArr2].length - 3) * 152"
@click="left -= 152"
></div>
......@@ -19,13 +19,30 @@
<div class="container-scroll" :style="{ left: left + 'px' }">
<div
class="item"
:class="{ active: active == item }"
v-for="item in itemArr"
:key="item"
@click="active = item"
:class="{ active: activeArr1.indexOf(item.val) >= 0 }"
v-for="item in itemArr1"
:key="item.val"
@click="activeChange1(item.val)"
>
<div class="text">{{ item }}</div>
<div class="ac" :class="{ active: active == item }"></div>
<div class="text">{{ item.name }}</div>
<div
class="ac"
:class="{ active: activeArr1.indexOf(item.val) >= 0 }"
></div>
</div>
<div
class="item"
:class="{ active: activeArr2.indexOf(item.val) >= 0 }"
v-for="item in itemArr2"
:key="item.val"
@click="activeChange2(item.val)"
>
<div class="text">{{ item.name }}</div>
<div
class="ac"
:class="{ active: activeArr2.indexOf(item.val) >= 0 }"
></div>
</div>
</div>
</div>
......@@ -39,11 +56,42 @@ export default {
return {
left: 0,
changeW: 152,
itemArr: ["1", "2", "3", "4", "5", "6"],
active: "",
itemArr1: [
{ name: "高压", val: 0 },
{ name: "次高压", val: 1 },
{ name: "中压", val: 2 },
],
itemArr2: [
{ name: "调压箱", val: 3 },
{ name: "阀门井", val: 4 },
{ name: "场站", val: 5 },
{ name: "工业户", val: 6 },
],
activeArr1: [0, 1, 2],
activeArr2: [],
};
},
methods: {},
methods: {
activeChange1(val) {
const ind = this.activeArr1.indexOf(val);
if (ind >= 0) {
this.activeArr1.splice(ind, 1);
} else {
this.activeArr1.push(val);
}
this.$emit("change", this.activeArr1, this.activeArr2);
},
activeChange2(val) {
const ind = this.activeArr2.indexOf(val);
if (ind >= 0) {
this.activeArr2.splice(ind, 1);
} else {
this.activeArr2.push(val);
}
this.$emit("change", this.activeArr1, this.activeArr2);
},
},
};
</script>
<style lang="scss" scoped>
......@@ -56,7 +104,8 @@ export default {
height: 50px;
// display: flex;
// justify-content: space-between;
background: url("~@/assets/bigwindowImg/ind3Img/bigBg.png") no-repeat center center;
background: url("~@/assets/bigwindowImg/ind3Img/bigBg.png") no-repeat center
center;
display: flex;
align-items: center;
.l,
......@@ -74,13 +123,15 @@ export default {
left: 88px;
width: 20px;
height: 14px;
background: url("~@/assets/bigwindowImg/ind3Img/l.png") no-repeat center center;
background: url("~@/assets/bigwindowImg/ind3Img/l.png") no-repeat center
center;
}
.r {
right: 88px;
width: 20px;
height: 14px;
background: url("~@/assets/bigwindowImg/ind3Img/r.png") no-repeat center center;
background: url("~@/assets/bigwindowImg/ind3Img/r.png") no-repeat center
center;
}
.container {
width: 432px;
......@@ -104,7 +155,8 @@ export default {
position: relative;
text-align: center;
line-height: 28px;
background: url("~@/assets/bigwindowImg/ind3Img/boxbg.png") no-repeat center center;
background: url("~@/assets/bigwindowImg/ind3Img/boxbg.png") no-repeat
center center;
color: #fff;
font-size: 14px;
cursor: pointer;
......@@ -124,15 +176,14 @@ export default {
.active {
width: 128px;
height: 28px;
background: url("~@/assets/bigwindowImg/ind3Img/active.png") no-repeat center
center;
background: url("~@/assets/bigwindowImg/ind3Img/active.png") no-repeat
center center;
position: absolute;
top: 0;
left: 0;
// transition: all 0.5s;
opacity: .8;
opacity: 0.8;
}
}
}
}
......
huaxin-web/src/views/bigWindow/Index/index.vue
View file @ 1fba2d10
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-16 13:43:59
* @LastEditTime: 2026-04-08 10:01:45
* @FilePath: /huaxindd-web/src/views/Index/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -16,7 +16,11 @@
>
<div class="back" @click="back">跳转后台</div>
<Top />
<component :is="currentTabComponent" @imgClick="imgClick"></component>
<component
:is="currentTabComponent"
@centerClick="centerClick"
@imgClick="imgClick"
></component>
<!-- <Ind /> -->
</div>
</template>
......@@ -48,7 +52,7 @@ export default {
4: "/urgent/emergency",
// 周期
5: "/cycle/cycle",
// 运行
// 运行
7: "/reportinfo/gasdata",
},
};
......@@ -60,19 +64,12 @@ export default {
this.scaleX = window.innerWidth / 1920;
},
methods: {
imgClick(num) {
console.log(num);
if (num == 2) {
this.currentTabComponent = Ind2;
} else if (num == 6) {
this.currentTabComponent = Ind3;
} else if (num == "index") {
this.currentTabComponent = Ind;
} else {
if (this.goPage[num]) {
this.$router.push(this.goPage[num]);
}
}
imgClick() {
// this.$router.push(src);
this.currentTabComponent =Ind;
},
centerClick() {
this.currentTabComponent = Ind3;
},
back() {
this.$router.push("/checktask/jmchacktask");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment