Skip to content

H
huaxinDD
Commit 65f7cd8f authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

第三个页面完成

parent 70b22b83
Hide whitespace changes
Inline Side-by-side
Showing with 967 additions and 10 deletions
src/views/Ind2/Ind.vue
View file @ 65f7cd8f
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-10 10:23:10
* @LastEditTime: 2026-01-12 14:43:09
* @FilePath: /test-ranqi/src/views/Index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -11,12 +11,16 @@
<div id="gao-map-index"></div>
<Left />
<Right />
<div class="backindex">返回首页概览</div>
<Bottom />
</div>
</template>
<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/newMap";
import {
deviceType,
......@@ -29,6 +33,7 @@ export default {
components: {
Left,
Right,
Bottom,
},
data() {
return {};
......@@ -59,12 +64,27 @@ export default {
};
</script>
<style lang="scss" scoped>
.ind2 {
.ind2 {
height: 100vh;
width: 100%;
#gao-map-index{
#gao-map-index {
width: 100%;
height: 100%;
}
}
}
.backindex {
width: 218px;
height: 50px;
font-size: 20px;
box-sizing: border-box;
padding-left: 58px;
color: #fff;
position: fixed;
right: 548px;
top: 144px;
background: url("~@/assets/index/backIndex.png") no-repeat center center;
line-height: 48px;
z-index: 999;
cursor: pointer;
}
</style>
src/views/Ind2/components/Bottom.vue 0 → 100644
View file @ 65f7cd8f
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-12 14:23:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-12 14:31:29
* @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="bottom">
<div class="line-box" v-for="item in arr" :key="item.text">
<div :style="{ background: item.color }" class="sq"></div>
<div class="text">{{ item.text }}</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
arr: [
{
text: "低压",
color: "#69FFA0",
},
{
text: "中压",
color: "#FF9869",
},
{
text: "次高压",
color: "#438EBA",
},
{
text: "高压",
color: "#FFE669",
},
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.bottom {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -117px;
width: 314px;
display: flex;
justify-content: space-between;
.line-box {
display: flex;
align-items: center;
.sq {
width: 21px;
height: 10px;
border-radius: 3px;
margin-right: 5px;
}
.text {
font-size: 16;
color: #fff;
}
}
}
</style>
src/views/Ind2/components/IssueTable.vue
View file @ 65f7cd8f
......@@ -40,7 +40,7 @@
:key="'clone-' + index + row.issue"
class="row"
>
<div class="col id">{{ row.id }}</div>
<div class="col vid id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col issue" :title="row.issue">{{ row.issue }}</div>
<div class="col status">
......
src/views/Ind2/components/Left.vue
View file @ 65f7cd8f
......@@ -72,15 +72,15 @@ export default {
t2: "高压已巡检",
},
{
t1: "2.396",
t1: "2.3961",
t2: "高压已巡检",
},
{
t1: "2.396",
t1: "2.3962",
t2: "高压已巡检",
},
{
t1: "2.396",
t1: "2.3963",
t2: "高压已巡检",
},
],
......
src/views/Ind3/Ind.vue 0 → 100644
View file @ 65f7cd8f
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-12 15:47:41
* @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 />
<div class="backindex">返回首页概览</div>
<Bottom />
</div>
</template>
<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/newMap";
import {
deviceType,
deviceIcon,
pipeColor,
} from "@/utils/deviceIconTypeConfig";
export default {
name: "",
components: {
Left,
Right,
Bottom,
},
data() {
return {};
},
computed: {},
watch: {},
mounted() {
this.initMap();
},
methods: {
initMap() {
// const path = eval(this.systemSetting.map_center);
this.gaoMap = new EditorMap(
"gao-map-index",
{
center: [118.09, 39.48],
// mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 10.5,
devicePicData: deviceIcon,
pipeColor: pipeColor,
},
this
);
},
},
};
</script>
<style lang="scss" scoped>
.ind3 {
height: 100vh;
width: 100%;
#gao-map-index {
width: 100%;
height: 100%;
}
}
.backindex {
width: 218px;
height: 50px;
font-size: 20px;
box-sizing: border-box;
padding-left: 58px;
color: #fff;
position: fixed;
right: 548px;
top: 144px;
background: url("~@/assets/index/backIndex.png") no-repeat center center;
line-height: 48px;
z-index: 999;
cursor: pointer;
}
</style>
src/views/Ind3/components/AlarmScrollTable.vue 0 → 100644
View file @ 65f7cd8f
<template>
<div class="alarm-scroll-table" :style="rootStyle">
<div class="header-row">
<div class="col id">设备编号</div>
<div class="col reason">报警原因</div>
<div class="col time timea">报警时间</div>
</div>
<div
class="body"
ref="body"
@mouseenter="isPaused = true"
@mouseleave="isPaused = false"
>
<div
class="scroll"
:class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
:style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
>
<div v-for="(row, index) in rows" :key="'row-' + index" class="row">
<div class="col id">{{ row.id }}</div>
<div class="col reason">{{ row.reason }}</div>
<div class="col time">{{ row.time }}</div>
</div>
<template v-if="shouldScroll">
<div
v-for="(row, index) in rows"
:key="'clone-' + index"
class="row"
>
<div class="col id">{{ row.id }}</div>
<div class="col reason">{{ row.reason }}</div>
<div class="col time">{{ row.time }}</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AlarmScrollTable",
props: {
rows: {
type: Array,
default() {
return [
{ id: "7890000", reason: "气体泄漏", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "气体泄漏", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
{ id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
];
},
},
speed: {
type: Number,
default: 20,
},
height: {
type: Number,
default: 0,
},
scrollStartCount: {
type: Number,
default: 5,
},
},
data() {
return {
shouldScroll: false,
isPaused: false,
};
},
computed: {
scrollDuration() {
const rowsCount = this.rows.length || 1;
return Math.max(6, rowsCount * this.speed * 0.1);
},
rootStyle() {
return this.height ? { height: this.height + "px" } : {};
},
},
mounted() {
this.updateScrollState();
window.addEventListener("resize", this.updateScrollState);
},
updated() {
this.updateScrollState();
},
beforeDestroy() {
window.removeEventListener("resize", this.updateScrollState);
},
methods: {
updateScrollState() {
this.$nextTick(() => {
const body = this.$refs.body;
if (!body) {
this.shouldScroll = false;
return;
}
const reachCount = this.rows.length > this.scrollStartCount;
this.shouldScroll = reachCount && body.scrollHeight > body.clientHeight;
});
},
},
};
</script>
<style lang="scss" scoped>
.alarm-scroll-table {
width: 100%;
height: 100%;
color: #ffffff;
font-size: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.header-row {
display: flex;
align-items: center;
height: 42px;
background: #0b72d8;
font-weight: 600;
}
.body {
flex: 1;
min-height: 0;
overflow: hidden;
}
.scroll {
display: flex;
flex-direction: column;
}
.scroll.is-scrolling {
animation-name: tableScroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroll.is-paused {
animation-play-state: paused;
}
.row {
display: flex;
align-items: center;
height: 32px;
// background: rgba(0, 0, 0, 0.5);
}
.row:nth-child(odd) {
// background: rgba(0, 0, 0, 0.65);
}
.col {
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col.id {
width: 25%;
}
.col.reason {
width: 35%;
}
.col.time {
width: 40%;
text-align: right;
}
.timea{
text-align: center !important;
}
@keyframes tableScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
src/views/Ind3/components/Bottom.vue 0 → 100644
View file @ 65f7cd8f
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-12 14:23:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-13 15:42:55
* @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="bottom">
<div class="l" v-if="left != 0" @click="left += 152"></div>
<div
class="r"
v-if="left != -(itemArr.length - 3) * 152"
@click="left -= 152"
></div>
<div class="container">
<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"
>
<div class="text">{{ item }}</div>
<div class="ac" :class="{ active: active == item }"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
left: 0,
changeW: 152,
itemArr: ["1", "2", "3", "4", "5", "6"],
active: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.bottom {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -343px;
width: 686px;
height: 50px;
// display: flex;
// justify-content: space-between;
background: url("~@/assets/ind3Img/bigBg.png") no-repeat center center;
display: flex;
align-items: center;
.l,
.r {
position: absolute;
cursor: pointer;
transition: all 0.5s;
top: 18px;
&:hover {
opacity: 0.8;
}
}
.l {
left: 88px;
width: 20px;
height: 14px;
background: url("~@/assets/ind3Img/l.png") no-repeat center center;
}
.r {
right: 88px;
width: 20px;
height: 14px;
background: url("~@/assets/ind3Img/r.png") no-repeat center center;
}
.container {
width: 432px;
height: 28px;
// background: red;
margin: 0 auto;
overflow: hidden;
.container-scroll {
position: relative;
// left: 0;
transition: all 0.5s;
display: flex;
// width: 1000px;
.item {
flex-shrink: 0;
width: 128px;
height: 28px;
margin-right: 24px;
position: relative;
text-align: center;
line-height: 28px;
background: url("~@/assets/ind3Img/boxbg.png") no-repeat center center;
color: #fff;
font-size: 14px;
cursor: pointer;
&.active {
background: rgba(0, 0, 0, 0);
}
.text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 28px;
left: 0;
top: 0;
z-index: 99;
}
.active {
width: 128px;
height: 28px;
background: url("~@/assets/ind3Img/active.png") no-repeat center
center;
position: absolute;
top: 0;
left: 0;
// transition: all 0.5s;
opacity: .8;
}
}
}
}
}
</style>
src/views/Ind3/components/Left.vue 0 → 100644
View file @ 65f7cd8f
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-09 15:10:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-13 13:56:29
* @FilePath: /huaxindd-web/src/views/Ind2/components/Right.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="left">
<div class="lb">
<Title text="设备统计" />
<div class="lba lbamt">
<!-- <div class="box-a">阀门井设备统计</div> -->
<div class="box-b">
<div class="fa">
<div class="faa">调压箱</div>
<div class="facaaa"></div>
</div>
<div class="fb">
<PressureBarChart :data="pressureData" />
</div>
</div>
</div>
<div class="lba">
<!-- <div class="box-a">调压箱统计</div> -->
<div class="box-b">
<div class="fa">
<div class="faa">阀门井</div>
<div class="facbbb"></div>
</div>
<div class="fb">
<PressureBarChart :data="pressureData" />
</div>
</div>
</div>
</div>
<div class="lb2">
<Title text="报警信息" />
<div class="table">
<AlarmScrollTableVue/>
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/PubCom/title.vue";
import PressureBarChart from "./PressureBarChart.vue";
import AlarmScrollTableVue from './AlarmScrollTable.vue';
export default {
name: "",
components: {
Title,
PressureBarChart,
AlarmScrollTableVue
},
data() {
return {
pressureData: [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
{ name: "低压线", value: 50 },
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.left {
// width: 20%;
width: 434px;
position: absolute;
top: 102px;
bottom: 50px;
// background: url("~@/assets/index/r.png") no-repeat center;
// background-size: 100% 100%;
// background: red;
// border: 1px solid red;
left: 10px;
z-index: 9999;
}
.lbamt {
margin-top: 20px;
}
.lba {
height: 205px;
margin-bottom: 30px;
.box-a {
width: 172px;
height: 36px;
background: url("~@/assets/indImg/boxabg.png") no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 36px;
color: #fff;
margin-bottom: 12px;
}
.box-b {
width: 100%;
// height: 130px;
height: 205px;
display: flex;
justify-content: space-between;
align-items: center;
.fa {
width: 155px;
// height: 124px;
height: 205px;
color: #fff;
text-align: center;
padding-top: 15px;
.faa {
position: relative;
text-align: center;
font-size: 22px;
top: 0px;
}
.fab {
position: absolute;
z-index: 99;
font-size: 20px;
}
.facaaa {
position: relative;
top: -25px;
width: 100%;
height: 205px;
background: url("~@/assets/ind3Img/ttt.png") no-repeat center center;
}
.facbbb {
position: relative;
top: -25px;
width: 100%;
height: 205px;
background: url("~@/assets/ind3Img/bbb.png") no-repeat center center;
}
}
.fb {
flex: 1;
}
}
}
.lb2 {
display: flex;
flex-direction: column;
height: 307px;;
.table {
margin-top:20px;
flex: 1;
width: 100%;
// background: red;
overflow: hidden;
}
}
</style>
src/views/Ind3/components/PressureBarChart.vue 0 → 100644
View file @ 65f7cd8f
<template>
<div class="chars-wrapper">
<div class="bg">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div ref="chart" class="pressure-bar-chart"></div>
</div>
</template>
<script>
export default {
name: "PressureBarChart",
props: {
data: {
type: Array,
default() {
return [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
];
},
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.initChart();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
watch: {
data: {
deep: true,
handler() {
this.updateChart();
},
},
},
methods: {
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;
}
const names = this.data.map((item) => item.name);
const values = this.data.map((item) => item.value);
const maxValue = Math.max(...values, 1);
this.chart.setOption({
grid: {
left: 10,
right: 10,
top: 0,
bottom: 0,
containLabel: true,
},
xAxis: {
type: "value",
max: Math.ceil(maxValue * 1.25),
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
},
yAxis: [
{
type: "category",
data: names,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#ffffff",
fontSize: 14,
},
},
{
type: "category",
data: values,
offset:-10,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#ffffff",
fontSize: 14,
},
},
],
series: [
{
type: "bar",
data: values,
barWidth: 10,
barCategoryGap: 5,
showBackground: true,
backgroundStyle: {
color: "rgba(255,255,255,0)",
borderRadius: 6,
},
itemStyle: {
borderRadius: [0, 6, 6, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "#2ea6ff" },
{ offset: 1, color: "#14e0ff" },
]),
},
label: {
show: false,
position: "right",
color: "#ffffff",
fontSize: 14,
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.chars-wrapper{
width: 100%;
position: relative;
}
.bg {
position: absolute;
width: 100%;
height: 152px;
// display: flex;
// flex-direction:column;
// justify-content: space-between;
padding-top: 5px;
.item {
width: 100%;
height: 32px;
// background: rgba(130, 202, 255, 0.18);
background: rgba(130, 202, 255, 0.18);
margin-bottom: 5px;
}
// width: 100%;
// height: 120px;
}
.pressure-bar-chart {
position: relative;
// position:absolute;
// background: red;
width: 100%;
height: 152px;
// overflow: hidden;
// background: red;
}
</style>
src/views/Ind3/components/Right.vue 0 → 100644
View file @ 65f7cd8f
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-09 15:10:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-13 14:10:41
* @FilePath: /huaxindd-web/src/views/Ind2/components/Right.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="right">
<div class="t">
<Title text="视频监控" />
<div class="video-box">
<div v-for="item in 10" class="video">
<div class="text">
场站监控
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/PubCom/title.vue";
export default {
name: "",
components: {
Title,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.right {
// width: 20%;
width: 434px;
position: absolute;
top: 102px;
bottom: 50px;
// background: url("~@/assets/index/r.png") no-repeat center;
// background-size: 100% 100%;
// background: red;
// border: 1px solid red;
right: 10px;
z-index: 9999;
}
.t {
height: 100%;
display: flex;
flex-direction: column;
.video-box {
box-sizing: border-box;
margin-top: 20px;
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
height: 0;
}
.video {
width: 200px;
height: 152px;
background: red;
margin-bottom: 20px;
position:relative;
.text{
position:absolute;
bottom:0;
width: 100%;
height: 40px;
color:#fff;
background: #3AA4FB;
line-height: 40px;
text-align: center;
font-size: 20px;
}
}
}
}
</style>
src/views/Index/index.vue
View file @ 65f7cd8f
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-09 15:34:16
* @LastEditTime: 2026-01-12 15:46:01
* @FilePath: /huaxindd-web/src/views/Index/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -22,7 +22,7 @@
<script>
import Top from "./components/Top.vue";
import Ind from "@/views/Ind2/Ind.vue";
import Ind from "@/views/Ind3/Ind.vue";
export default {
name: "",
......
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