Skip to content

H
huaxinDD
Commit 7a99569c authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

第一个页面做完了

parent 81e79551
Hide whitespace changes
Inline Side-by-side
Showing with 1436 additions and 113 deletions
src/components/DeviceSummary.vue 0 → 100644
View file @ 7a99569c
<template>
<div class="device-summary">
<div class="left">
<div class="title">{{ title }}</div>
<img class="device-img" :src="leftImage" alt="" />
</div>
<div class="right">
<div v-for="item in list" :key="item.label" class="row">
<div class="label">{{ item.label }}</div>
<div class="bar">
<div class="fill" :style="{ width: item.percent + '%' }"></div>
</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</div>
</template>
<script>
import leftImage from "@/assets/index/b.png";
export default {
name: "DeviceSummary",
props: {
title: {
type: String,
default: "阀门井",
},
list: {
type: Array,
default() {
return [
{ label: "在线设备", value: 230, percent: 80 },
{ label: "离线设备", value: 30, percent: 20 },
{ label: "报警设备", value: 3, percent: 10 },
{ label: "故障设备", value: 3, percent: 10 },
];
},
},
},
data() {
return {
leftImage,
};
},
};
</script>
<style lang="scss" scoped>
.device-summary {
display: flex;
align-items: center;
background: #000;
color: #fff;
font-size: 14px;
width: 500px;
}
.left {
position: relative;
width: 230px;
height: 210px;
display: flex;
align-items: flex-end;
justify-content: center;
margin-right: 18px;
}
.title {
position: absolute;
top: 18px;
left: 0;
right: 0;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #a9ddff;
}
.device-img {
width: 220px;
height: 200px;
object-fit: contain;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.row {
display: flex;
align-items: center;
height: 28px;
background: rgba(12, 135, 220, 0.9);
padding: 0 10px;
}
.label {
width: 70px;
color: #e7f6ff;
}
.bar {
flex: 1;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin: 0 10px;
overflow: hidden;
}
.fill {
height: 100%;
background: linear-gradient(90deg, #0bd6ff 0%, #27a0ff 100%);
}
.value {
width: 36px;
text-align: right;
font-weight: 600;
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 81e79551
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/IssueTable.vue 0 → 100644
View file @ 7a99569c
<template>
<div
class="issue-table"
:style="{
minWidth: minWidth + 'px',
maxHeight: maxHeight + 'px',
height: height ? height + 'px' : '100%',
}"
>
<div class="header-row">
<div class="col id">工单编号</div>
<div class="col type">类型</div>
<div class="col issue">整改问题</div>
<div class="col status">状态</div>
</div>
<div class="body" ref="body">
<div
class="scroll"
:class="{ 'is-scrolling': shouldScroll }"
:style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
>
<div v-for="row in rows" :key="row.id + row.issue" class="row">
<div class="col 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">
<span :class="['tag', row.status === '整改中' ? 'tag-blue' : 'tag-orange']">
{{ row.status }}
</span>
</div>
</div>
<template v-if="shouldScroll">
<div
v-for="(row, index) in rows"
:key="'clone-' + index + row.issue"
class="row"
>
<div class="col 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">
<span :class="['tag', row.status === '整改中' ? 'tag-blue' : 'tag-orange']">
{{ row.status }}
</span>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "IssueTable",
props: {
rows: {
type: Array,
default() {
return [
{ id: "1", type: "阀门井", issue: "阀门井泄漏", status: "整改中" },
{ id: "2", type: "调压箱", issue: "调压箱老化", status: "未整改" },
{ id: "3", type: "管线", issue: "管线老化", status: "整改中" },
];
},
},
minWidth: {
type: Number,
default: 431,
},
maxHeight: {
type: Number,
default: 525,
},
height: {
type: Number,
default: 0,
},
speed: {
type: Number,
default: 20,
},
},
data() {
return {
shouldScroll: false,
};
},
computed: {
scrollDuration() {
const rowsCount = this.rows.length || 1;
return Math.max(6, rowsCount * this.speed * 0.1);
},
},
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;
}
this.shouldScroll = body.scrollHeight > body.clientHeight;
console.log( body.scrollHeight,body.clientHeight)
});
},
},
};
</script>
<style lang="scss" scoped>
.issue-table {
width: 100%;
background: #000;
color: #fff;
font-size: 14px;
overflow: hidden;
}
.header-row {
display: flex;
align-items: center;
height: 42px;
background: #0b75d3;
font-weight: 600;
}
.body {
padding: 8px 0;
height: calc(100% - 42px);
overflow: hidden;
}
.scroll {
display: flex;
flex-direction: column;
}
.scroll.is-scrolling {
animation-name: tableScroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.issue-table:hover .scroll.is-scrolling {
animation-play-state: paused;
}
.row {
display: flex;
align-items: center;
height: 34px;
}
.col {
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
}
.id {
width: 28%;
text-align: left;
}
.type {
width: 18%;
}
.issue {
width: 34%;
overflow: hidden;
text-overflow: ellipsis;
}
.status {
width: 20%;
display: flex;
justify-content: flex-end;
padding-right: 14px;
}
.tag {
display: inline-block;
min-width: 54px;
text-align: center;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
line-height: 20px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tag-blue {
background: #1e88e5;
}
.tag-orange {
background: #e85d2a;
}
@keyframes tableScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
src/components/PressureBars.vue 0 → 100644
View file @ 7a99569c
<template>
<div class="pressure-bars">
<div v-for="item in list" :key="item.label" class="row">
<div class="label">{{ item.label }}</div>
<div class="bar">
<div class="fill" :style="{ width: item.percent + '%' }"></div>
</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</template>
<script>
export default {
name: "PressureBars",
props: {
list: {
type: Array,
default() {
return [
{ label: "次高压线", value: 120, percent: 80 },
{ label: "中压线", value: 98, percent: 60 },
{ label: "低压线", value: 86, percent: 40 },
];
},
},
},
};
</script>
<style lang="scss" scoped>
.pressure-bars {
width: 100%;
background: #000;
color: #fff;
font-size: 14px;
}
.row {
display: flex;
align-items: center;
padding: 10px 12px;
background: rgba(120, 195, 255, 0.7);
}
.row + .row {
margin-top: 8px;
}
.label {
width: 70px;
font-weight: 600;
}
.bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
margin: 0 12px;
overflow: hidden;
}
.fill {
height: 100%;
background: linear-gradient(90deg, #00b7ff 0%, #20e0ff 100%);
border-radius: 4px;
}
.value {
width: 36px;
text-align: right;
font-weight: 600;
}
</style>
src/router/index.js
View file @ 7a99569c
/*
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2026-01-04 10:50:30
* @LastEditTime: 2026-01-05 10:44:09
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/router/index.js
......@@ -9,7 +9,8 @@
import Vue from "vue";
import VueRouter from "vue-router";
// import Home from '../views/Home.vue'
import Ind from "../views/Ind/Ind.vue";
import Index from "../views/Index/index.vue";
Vue.use(VueRouter);
......@@ -17,7 +18,7 @@ const routes = [
{
path: "/",
name: "Rotate",
component: Ind,
component: Index,
},
];
......
src/views/Ind/Ind.vue
View file @ 7a99569c
......@@ -2,21 +2,18 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:31:16
* @LastEditTime: 2026-01-05 13:53:06
* @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="ind"
:style="{
transform: `scale(${scaleX},${scaleX})`,
top: `-${((1 - scaleX) * innerHeight) / 2}px`,
}"
>
<img class="img" :src="bg" alt="" />
<Top />
<Left />
<Right />
<div
......@@ -46,7 +43,7 @@
? `scale(1.5)`
: innerWidth < 1600
? `scale(1.1)`
: `scale(${1.8 * scaleX},${1.8 * scaleX})`,
: `scale(${1.63 * scaleX},${1.63 * scaleX})`,
}"
>
<Rotate />
......@@ -56,7 +53,6 @@
</template>
<script>
import Top from "./components/Top.vue";
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Rotate from "./components/Rotate.vue";
......@@ -65,7 +61,7 @@ import bg from "@/assets/rotate/bg.png";
export default {
name: "",
components: {
Top,
Left,
Right,
Rotate,
......@@ -91,19 +87,19 @@ export default {
};
</script>
<style lang="scss" scoped>
.ind {
// width:2880px;
width: 1920px;
height: 100vh;
// .ind {
// // width:2880px;
// width: 1920px;
// height: 100vh;
background: black;
position: relative;
left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
overflow: hidden;
}
// background: black;
// position: relative;
// left: 50%;
// top: 0px;
// // margin-left: -1440px;
// margin-left: -960px;
// overflow: hidden;
// }
.center-rotate {
// padding-top: 240px;
position: absolute;
......
src/views/Ind/components/DeviceScrollTable.vue 0 → 100644
View file @ 7a99569c
<template>
<div class="device-scroll-table" :style="rootStyle">
<div class="header-row">
<div class="col id">设备编号</div>
<div class="col type">设备类型</div>
<div class="col date">安装时间</div>
<div class="col status">设备状态</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 in rows" :key="row.id + row.date" class="row">
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div class="col status">
<span :class="['tag', row.status === '正常' ? 'tag-blue' : 'tag-orange']">
{{ row.status }}
</span>
</div>
</div>
<template v-if="shouldScroll">
<div
v-for="(row, index) in rows"
:key="'clone-' + index + row.id"
class="row"
>
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div class="col status">
<span :class="['tag', row.status === '正常' ? 'tag-blue' : 'tag-orange']">
{{ row.status }}
</span>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "DeviceScrollTable",
props: {
rows: {
type: Array,
default() {
return [
{ id: "1", type: "阀门井", date: "2014-12-10", status: "正常" },
{ id: "2", type: "调压箱", date: "2015-12-24", status: "临期" },
{ id: "3", type: "调压箱", date: "2014-12-10", status: "正常" },
{ id: "4", type: "阀门井", date: "2014-12-10", status: "正常" },
{ id: "5", type: "调压箱", date: "2015-12-24", status: "临期" },
{ id: "6", type: "调压箱", date: "2014-12-10", status: "正常" },
];
},
},
speed: {
type: Number,
default: 20,
},
height: {
type: Number,
default: 180,
},
},
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" } : { height: "100%" };
},
},
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;
}
this.shouldScroll = body.scrollHeight > body.clientHeight;
});
},
},
};
</script>
<style lang="scss" scoped>
.device-scroll-table {
width: 100%;
color: #ffffff;
font-size: 14px;
background: #000;
overflow: hidden;
}
.header-row {
display: flex;
align-items: center;
height: 42px;
background: #0b75d3;
font-weight: 600;
}
.body {
padding: 6px 0;
height: calc(100% - 42px);
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;
}
.col {
padding: 0 10px;
white-space: nowrap;
}
.col.id {
width: 28%;
}
.col.type {
width: 24%;
}
.col.date {
width: 28%;
}
.col.status {
width: 20%;
display: flex;
justify-content: flex-end;
}
.tag {
display: inline-block;
min-width: 40px;
text-align: center;
padding: 2px 6px;
border-radius: 2px;
font-size: 12px;
}
.tag-blue {
background: #1ea7ff;
}
.tag-orange {
background: #ff6a00;
}
@keyframes tableScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
src/views/Ind/components/Left.vue
View file @ 7a99569c
......@@ -2,56 +2,189 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:32:47
* @LastEditTime: 2026-01-06 17:02:54
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="left">
<div class="time">
<div class="l">{{ YYYY }}</div>
<div>{{ HHHH }}</div>
<div class="t">
<Title text="管线长度" text2="单位（公里）" />
<div class="gxbox">
<div v-for="item in itemArr" :key="item.text" class="gxbox-item">
<div class="num">{{ item.num }}</div>
<div class="text">{{ item.text }}</div>
</div>
</div>
</div>
<div class="lb">
<Title text="设备统计" />
<div class="lba lbamt">
<div class="box-a">阀门井设备统计</div>
<div class="box-b">
<div class="fa">
<div class="faa">266</div>
<div class="fab">总量</div>
<div class="fac"></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">1448</div>
<div class="fab">总量</div>
<div class="fac"></div>
</div>
<div class="fb">
<PressureBarChart :data="pressureData2" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/PubCom/title.vue";
import PressureBarChart from "@/views/Ind/components/PressureBarChart.vue";
export default {
name: "",
components: {
Title,
PressureBarChart,
},
data() {
return {
YYYY: null,
HHHH: null,
itemArr: [
{
num: "3.396",
text: "高压",
},
{
num: "14.66",
text: "次高",
},
{
num: "347.866",
text: "中压",
},
{
num: "1201.94",
text: "低压",
},
],
pressureData: [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
],
pressureData2: [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
],
};
},
created() {
setInterval(() => {
this.YYYY = this.$dayjs().format("YYYY-MM-DD");
this.HHHH = this.$dayjs().format("HH:mm:ss");
});
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.left {
width: 20%;
overflow: hidden;
// width: 20%;
width: 434px;
top: 102px;
bottom: 50px;
background: url("~@/assets/index/l.png") no-repeat center;
background-size: 100% 100%;
// background: url("~@/assets/index/l.png") no-repeat center;
// background-size: 100% 100%;
// border: 1px solid red;
position: absolute;
left: 40px;
z-index:9999;
.time {
font-size: 28px;
top:-88px;
display: flex;
position:absolute;
left: 10px;
z-index: 9999;
}
.t {
margin-bottom: 40px;
}
.gxbox {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
.gxbox-item {
width: 90px;
height: 106px;
background: url("~@/assets/indImg/itemBg.png") no-repeat center;
padding-top: 5px;
> div {
color: #fff;
text-align: center;
}
.num {
font-size: 24px;
margin-bottom: 2px;
}
.text {
font-size: 14px;
}
}
}
.lbamt {
margin-top: 42px;
}
.lba {
height: 152px;
margin-bottom: 80px;
.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;
.l{
margin-right:20px;
margin-bottom: 12px;
}
.box-b {
width: 100%;
height: 130px;
display: flex;
justify-content: space-between;
.fa {
width: 155px;
height: 124px;
color: #fff;
text-align: center;
padding-top: 15px;
.faa {
position: relative;
font-size: 30px;
}
.fab {
position: relative;
z-index: 99;
font-size: 20px;
}
.fac {
position: relative;
top: -55px;
width: 100%;
height: 100px;
background: url("~@/assets/indImg/fabg.png") no-repeat;
}
}
.fb {
flex: 1;
}
}
}
......
src/views/Ind/components/PressureBarChart.vue 0 → 100644
View file @ 7a99569c
<template>
<div class="chars-wrapper">
<div class="bg">
<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: 40px;
// background: rgba(130, 202, 255, 0.18);
background: rgba(130, 202, 255, 0.18);
margin-bottom: 10px;
}
// width: 100%;
// height: 120px;
}
.pressure-bar-chart {
position: relative;
// position:absolute;
// background: red;
width: 100%;
height: 152px;
// overflow: hidden;
// background: red;
}
</style>
src/views/Ind/components/Right.vue
View file @ 7a99569c
......@@ -2,20 +2,67 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:32:56
* @LastEditTime: 2026-01-07 10:56:45
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="right">
<img class="imgr" :src="d" alt="" />
<div class="t1">
<Title text="事件定位" />
<div class="t1box">
<div class="b1">
<img class="img1" src="@/assets/indImg/rimga.png" alt="" />
<div>事件概况</div>
<img class="shu" src="@/assets/indImg/shu.png" alt="" />
</div>
<div class="b2">
<div class="b2t1">发生泄露报警</div>
<div class="b2t2">
<div class="dz">地址：</div>
<div>河北省石家庄市平山西柏坡经济开发区经开路1号</div>
</div>
</div>
<div class="b3">
<img class="img1" src="@/assets/indImg/rimgb.png" alt="" />
<div>点击定位</div>
</div>
</div>
</div>
<div class="t2">
<Title text="事件定位" />
<div class="chars-box">
<UserTypeBarChartVue />
</div>
</div>
<div class="t3">
<Title text="设备生命周期" />
<div class="tab-box">
<Table/>
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/PubCom/title.vue";
import d from "@/assets/index/rt.png";
import UserTypeBarChartVue from "./UserTypeBarChart.vue";
import Table from "@/views/Ind/components/DeviceScrollTable.vue"
export default {
name: "",
components: {
Title,
UserTypeBarChartVue,
Table
},
data() {
return {
d,
......@@ -26,15 +73,18 @@ export default {
</script>
<style lang="scss" scoped>
.right {
width: 20%;
// width: 20%;
width: 434px;
position: absolute;
top: 102px;
bottom: 50px;
background: url("~@/assets/index/r.png") no-repeat center;
background-size: 100% 100%;
right: 40px;
z-index:9999;
// background: url("~@/assets/index/r.png") no-repeat center;
// background-size: 100% 100%;
// background: red;
// border: 1px solid red;
right: 10px;
z-index: 9999;
.imgr {
position: absolute;
......@@ -42,4 +92,76 @@ export default {
top: -88px;
}
}
.t1box {
width: 100%;
height: 120px;
background: url("~@/assets/indImg/t1boxbg.png") no-repeat;
background-size: 100% 100%;
display: flex;
box-sizing: border-box;
padding: 20px 0;
margin-top: 20px;
margin-bottom: 40px;
.b1 {
// display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
padding-top: 10px;
position: relative;
width: 95px;
.img1 {
margin-bottom: 2px;
}
.shu {
position: absolute;
right: 0;
top: 0;
}
}
.b2 {
width: 240px;
color: #fff;
padding-left: 15px;
.b2t1 {
color: #ff6464;
font-size: 20px;
margin-bottom: 4px;
}
.b2t2 {
display: flex;
font-size: 16px;
.dz {
width: 90px;
}
}
}
.b3 {
// padding-left:5px;
color: #fff;
padding-top: 25px;
text-align: center;
}
}
.t2 {
margin-bottom: 20px;
.chars-box {
margin-top: 20px;
}
}
.t3 {
display: flex;
flex-direction:column;
height: 210px;
.tab-box{
margin-top:20px;
flex:1;
background: red;
overflow: hidden;
}
}
</style>
src/views/Ind/components/UserTypeBarChart.vue 0 → 100644
View file @ 7a99569c
<template>
<div ref="chart" class="user-type-bar-chart"></div>
</template>
<script>
export default {
name: "UserTypeBarChart",
props: {
categories: {
type: Array,
default() {
return ["白芨屯", "七树庄", "王浒圳", "新罕电", "小张各庄", "欢喜庄", "李朝庄"];
},
},
residential: {
type: Array,
default() {
return [26, 34, 18, 22, 24, 28, 10];
},
},
industrial: {
type: Array,
default() {
return [18, 24, 8, 18, 20, 26, 22];
},
},
},
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: {
categories() {
this.updateChart();
},
residential() {
this.updateChart();
},
industrial() {
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;
}
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,
axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
axisTick: { show: false },
axisLabel: {
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.industrial,
barWidth: 10,
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: "#42ff9d",
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.user-type-bar-chart {
width: 100%;
height: 200px;
}
</style>
src/views/Index/components/Top.vue 0 → 100644
View file @ 7a99569c
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-05 10:58:43
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="top">
<img :src="top" alt="" />
<div class="time">
<div class="l">{{ YYYY }}</div>
<div>{{ HHHH }}</div>
</div>
ƒ
</div>
</template>
<script>
import top from "@/assets/index/top.png";
export default {
name: "",
data() {
return {
top,
YYYY: null,
HHHH: null,
};
},
created() {
setInterval(() => {
this.YYYY = this.$dayjs().format("YYYY-MM-DD");
this.HHHH = this.$dayjs().format("HH:mm:ss");
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
.top {
width: 100%;
height: 102px;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
}
.time {
font-size: 20px;
top: 24px;
left: 48px;
display: flex;
position: absolute;
color: #fff;
z-index: 9999;
.l {
margin-right: 20px;
}
}
</style>
src/views/Index/index.vue 0 → 100644
View file @ 7a99569c
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-05 10:43:52
* @FilePath: /huaxindd-web/src/views/Index/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div
class="ind"
:style="{
transform: `scale(${scaleX},${scaleX})`,
top: `-${((1 - scaleX) * innerHeight) / 2}px`,
}"
>
<Top />
<Ind />
</div>
</template>
<script>
import Top from "./components/Top.vue";
import Ind from "@/views/Ind/Ind.vue";
export default {
name: "",
components: {
Top,
Ind,
},
data() {
return {
scaleX: 1,
innerWidth: 0,
innerHeight: 0,
};
},
created() {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
},
methods: {},
};
</script>
<style lang="scss" scoped>
.ind {
// width:2880px;
width: 1920px;
height: 100vh;
background: black;
position: relative;
left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
overflow: hidden;
}
</style>
src/views/PubCom/title.vue 0 → 100644
View file @ 7a99569c
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-06 10:16:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-06 14:18:17
* @FilePath: /huaxindd-web/src/views/PubCom/title.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="title-wrapper">
<div class="t1">{{text}}</div>
<div class="t2">{{text2}}</div>
</div>
</template>
<script>
export default {
name: "",
props: {
text: {
type: String,
default: "",
},
text2: {
type: String,
default: "",
},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.title-wrapper {
width: 424px;
height: 52px;
display: flex;
align-items: center;
background: url("~@/assets/pbuImg/titlebg.png") no-repeat;
box-sizing: border-box;
padding-left:165px;
}
.t1,.t2{
color:#fff;
}
.t1{
font-size: 22px;
margin-right: 10px;
}
.t2{
font-size: 14px;
}
</style>
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