Skip to content

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

嵌入大屏进入项目

parent c6ebbd51
Hide whitespace changes
Inline Side-by-side
Showing with 3974 additions and 138 deletions
huaxin-web/src/assets/bigwindowImg/rotate/bg.png 0 → 100644
View file @ e5395ceb
This diff is collapsed.
huaxin-web/src/main.js
View file @ e5395ceb
...@@ -2,67 +2,76 @@ ...@@ -2,67 +2,76 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2023-12-27 10:02:02 * @Date: 2023-12-27 10:02:02
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-12-27 14:52:30 * @LastEditTime: 2026-01-15 14:55:09
* @FilePath: /huaxin-web/src/main.js * @FilePath: /huaxin-web/src/main.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import Vue from 'vue' import Vue from "vue";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import Element from 'element-ui' import Element from "element-ui";
import './assets/styles/element-variables.scss' import "./assets/styles/element-variables.scss";
import '@/assets/styles/index.scss' // global css import "@/assets/styles/index.scss"; // global css
import '@/assets/styles/zehong.scss' // zehong css import "@/assets/styles/zehong.scss"; // zehong css
import "@/assets/styles/flex.scss" import "@/assets/styles/flex.scss";
import App from './App' import App from "./App";
import store from './store' import store from "./store";
import router from './router' import router from "./router";
import permission from './directive/permission' import permission from "./directive/permission";
import './assets/icons' // icon import "./assets/icons"; // icon
import './permission' // permission control import "./permission"; // permission control
import { getDicts } from "@/api/system/dict/data"; import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config"; import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/zehong"; import {
parseTime,
resetForm,
addDateRange,
selectDictLabel,
selectDictLabels,
download,
handleTree,
} from "@/utils/zehong";
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
// 自定义表格工具扩展 // 自定义表格工具扩展
import RightToolbar from "@/components/RightToolbar" import RightToolbar from "@/components/RightToolbar";
let dayjs = require("dayjs");
Vue.prototype.$dayjs = dayjs;
import echarts from "echarts";
import echarts from 'echarts' import "animate.css";
import 'animate.css'; Vue.prototype.$echarts = echarts;
Vue.prototype.$echarts = echarts
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm Vue.prototype.resetForm = resetForm;
Vue.prototype.addDateRange = addDateRange Vue.prototype.addDateRange = addDateRange;
Vue.prototype.selectDictLabel = selectDictLabel Vue.prototype.selectDictLabel = selectDictLabel;
Vue.prototype.selectDictLabels = selectDictLabels Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.download = download Vue.prototype.download = download;
Vue.prototype.handleTree = handleTree Vue.prototype.handleTree = handleTree;
Vue.prototype.$Vue = Vue; Vue.prototype.$Vue = Vue;
Vue.prototype.msgSuccess = function (msg) { Vue.prototype.msgSuccess = function (msg) {
this.$message({ showClose: true, message: msg, type: "success" }); this.$message({ showClose: true, message: msg, type: "success" });
} };
Vue.prototype.msgError = function (msg) { Vue.prototype.msgError = function (msg) {
this.$message({ showClose: true, message: msg, type: "error" }); this.$message({ showClose: true, message: msg, type: "error" });
} };
Vue.prototype.msgInfo = function (msg) { Vue.prototype.msgInfo = function (msg) {
this.$message.info(msg); this.$message.info(msg);
} };
// 全局组件挂载 // 全局组件挂载
Vue.component('Pagination', Pagination) Vue.component("Pagination", Pagination);
Vue.component('RightToolbar', RightToolbar) Vue.component("RightToolbar", RightToolbar);
Vue.use(permission) Vue.use(permission);
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
...@@ -74,14 +83,14 @@ Vue.use(permission) ...@@ -74,14 +83,14 @@ Vue.use(permission)
*/ */
Vue.use(Element, { Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size size: Cookies.get("size") || "medium", // set element-ui default size
}) });
Vue.config.productionTip = false Vue.config.productionTip = false;
new Vue({ new Vue({
el: '#app', el: "#app",
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}) });
huaxin-web/src/permission.js
View file @ e5395ceb
import router from './router' /*
import store from './store' * @Author: 纪泽龙 jizelong@qq.com
import { Message } from 'element-ui' * @Date: 2026-01-04 09:01:34
import NProgress from 'nprogress' * @LastEditors: 纪泽龙 jizelong@qq.com
import 'nprogress/nprogress.css' * @LastEditTime: 2026-01-15 15:07:27
import { getToken } from '@/utils/auth' * @FilePath: /huaxin-web/src/permission.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";
NProgress.configure({ showSpinner: false }) NProgress.configure({ showSpinner: false });
const whiteList = ['/login', '/auth-redirect', '/bind', '/register'] const whiteList = ["/login", "/auth-redirect", "/bind", "/register"];
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start();
if (getToken()) { if (getToken()) {
/* has token*/ /* has token*/
if (to.path === '/login') { if (to.path === "/login") {
next({ path: '/' }) next({ path: "/" });
NProgress.done() NProgress.done();
} else { } else {
if (store.getters.roles.length === 0) { if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息 // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { store
store.dispatch('GenerateRoutes').then(accessRoutes => { .dispatch("GetInfo")
// 根据roles权限生成可访问的路由表 .then(() => {
router.addRoutes(accessRoutes) // 动态添加可访问路由表 store.dispatch("GenerateRoutes").then((accessRoutes) => {
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 // 根据roles权限生成可访问的路由表
}) router.addRoutes(accessRoutes); // 动态添加可访问路由表
}).catch(err => { if (to.fullPath == "/") {
store.dispatch('LogOut').then(() => { next({ path: "/checktask/jmchacktask" });
Message.error(err) } else {
next({ path: '/' }) next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
}) }
});
}) })
.catch((err) => {
store.dispatch("LogOut").then(() => {
Message.error(err);
// next({ path: '/' })
next({ path: "/checktask/jmchacktask" });
});
});
} else { } else {
next() next();
} }
} }
} else { } else {
// 没有token // 没有token
if (whiteList.indexOf(to.path) !== -1) { if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入 // 在免登录白名单，直接进入
next() next();
} else { } else {
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页 next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
NProgress.done() NProgress.done();
} }
} }
}) });
router.afterEach(() => { router.afterEach(() => {
NProgress.done() NProgress.done();
}) });
huaxin-web/src/router/index.js
View file @ e5395ceb
import Vue from 'vue' import Vue from "vue";
import Router from 'vue-router' import Router from "vue-router";
Vue.use(Router) Vue.use(Router);
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from "@/layout";
import ParentView from '@/components/ParentView'; import ParentView from "@/components/ParentView";
/** /**
* Note: 路由配置项 * Note: 路由配置项
...@@ -28,101 +28,110 @@ import ParentView from '@/components/ParentView'; ...@@ -28,101 +28,110 @@ import ParentView from '@/components/ParentView';
// 公共路由 // 公共路由
export const constantRoutes = [ export const constantRoutes = [
{ {
path: '/redirect', path: "/redirect",
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [
{ {
path: '/redirect/:path(.*)', path: "/redirect/:path(.*)",
component: (resolve) => require(['@/views/redirect'], resolve) component: (resolve) => require(["@/views/redirect"], resolve),
} },
] ],
}, },
{ {
path: '/login', path: "/login",
component: (resolve) => require(['@/views/login'], resolve), component: (resolve) => require(["@/views/login"], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/404', path: "/404",
component: (resolve) => require(['@/views/error/404'], resolve), component: (resolve) => require(["@/views/error/404"], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/401', path: "/401",
component: (resolve) => require(['@/views/error/401'], resolve), component: (resolve) => require(["@/views/error/401"], resolve),
hidden: true hidden: true,
}, },
{ {
path: '', path: "/bigWindow",
component: Layout, component: (resolve) => require(["@/views/bigWindow"], resolve),
redirect: 'index', hidden: true,
children: [
{
path: 'index',
component: (resolve) => require(['@/views/index'], resolve),
name: '首页',
meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
}
]
}, },
// {
// path: "",
// component: Layout,
// redirect: "index",
// // hidden: true,
// children: [
// {
// path: "index",
// component: (resolve) => require(["@/views/index"], resolve),
// name: "首页",
// meta: { title: "首页", icon: "dashboard", noCache: true, affix: true },
// },
// ],
// },
{ {
path: '/user', path: "/user",
component: Layout, component: Layout,
hidden: true, hidden: true,
redirect: 'noredirect', redirect: "noredirect",
children: [ children: [
{ {
path: 'profile', path: "profile",
component: (resolve) => require(['@/views/system/user/profile/index'], resolve), component: (resolve) =>
name: 'Profile', require(["@/views/system/user/profile/index"], resolve),
meta: { title: '个人中心', icon: 'user' } name: "Profile",
} meta: { title: "个人中心", icon: "user" },
] },
],
}, },
{ {
path: '/dict', path: "/dict",
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [
{ {
path: 'type/data/:dictId(\\d+)', path: "type/data/:dictId(\\d+)",
component: (resolve) => require(['@/views/system/dict/data'], resolve), component: (resolve) => require(["@/views/system/dict/data"], resolve),
name: 'Data', name: "Data",
meta: { title: '字典数据', icon: '' } meta: { title: "字典数据", icon: "" },
} },
] ],
}, },
{ {
path: '/job', path: "/job",
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [
{ {
path: 'log', path: "log",
component: (resolve) => require(['@/views/monitor/job/log'], resolve), component: (resolve) => require(["@/views/monitor/job/log"], resolve),
name: 'JobLog', name: "JobLog",
meta: { title: '调度日志' } meta: { title: "调度日志" },
} },
] ],
}, },
{ {
path: '/gen', path: "/gen",
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [
{ {
path: 'edit/:tableId(\\d+)', path: "edit/:tableId(\\d+)",
component: (resolve) => require(['@/views/tool/gen/editTable'], resolve), component: (resolve) =>
name: 'GenEdit', require(["@/views/tool/gen/editTable"], resolve),
meta: { title: '修改生成配置' } name: "GenEdit",
} meta: { title: "修改生成配置" },
] },
} ],
] },
];
export default new Router({ export default new Router({
mode: 'history', // 去掉url中的# mode: "history", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes routes: constantRoutes,
}) });
huaxin-web/src/views/bigWindow/Ind/Ind.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:29:29
* @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"
>
<img class="img" :src="bg" alt="" />
<Left />
<Right />
<div
class="center-rotate"
:style="{
top: innerWidth > 1920 ? '240px' : innerWidth <= 1600 ? '17%' : '230px',
}"
>
<!-- <div
class="scale"
:style="{
transform:
innerWidth >= 1920
? `scale(1.1)`
: innerWidth < 1600
? `scale(1)`
: `scale(${3* scaleX},${3 * scaleX})`,
}"
>
<Rotate />
</div> -->
<div
class="scale"
:style="{
transform:
innerWidth >= 1920
? `scale(1.5)`
: innerWidth < 1600
? `scale(1.1)`
: `scale(${1.63 * scaleX},${1.63 * scaleX})`,
}"
>
<Rotate />
</div>
</div>
</div>
</template>
<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Rotate from "./components/Rotate.vue";
import bg from "@/assets/bigwindowImg/rotate/bg.png";
export default {
name: "",
components: {
Left,
Right,
Rotate,
},
data() {
return {
bg,
scaleX: 1,
innerWidth: 0,
innerHeight: 0,
};
},
computed: {},
watch: {},
created() {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
console.log(window.innerWidth);
// 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;
// }
.center-rotate {
// padding-top: 240px;
position: absolute;
width: 40%;
height: 100%;
z-index: 999;
left: 50%;
top: 20%;
margin-left: -20%;
}
.scale {
transform: scale(2.1);
}
.img {
opacity: 0.5;
height: 100%;
position: absolute;
// margin-left:-920px;
// height: 100vh;
pointer-events: none;
z-index: 9999;
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/DeviceScrollTable.vue 0 → 100644
View file @ e5395ceb
<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: rgba(0, 124, 225, 0.4);
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>
huaxin-web/src/views/bigWindow/Ind/components/Left.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:32:30
* @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="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/bigWindow/PubCom/title.vue";
import PressureBarChart from "@/views/bigWindow/Ind/components/PressureBarChart.vue";
export default {
name: "",
components: {
Title,
PressureBarChart,
},
data() {
return {
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 },
],
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.left {
overflow: hidden;
// width: 20%;
width: 434px;
top: 102px;
bottom: 50px;
// background: url("~@/assets/bigwindowImg/index/l.png") no-repeat center;
// background-size: 100% 100%;
// border: 1px solid red;
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/bigwindowImg/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/bigwindowImg/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;
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/bigwindowImg/indImg/fabg.png") no-repeat;
}
}
.fb {
flex: 1;
}
}
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/PressureBarChart.vue 0 → 100644
View file @ e5395ceb
<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>
huaxin-web/src/views/bigWindow/Ind/components/Right.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:51:18
* @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/bigwindowImg/indImg/rimga.png" alt="" />
<div>事件概况</div>
<img class="shu" src="@/assets/bigwindowImg/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/bigwindowImg/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/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"
export default {
name: "",
components: {
Title,
UserTypeBarChartVue,
Table
},
data() {
return {
d,
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.right {
// width: 20%;
width: 434px;
position: absolute;
top: 102px;
bottom: 50px;
// background: url("~@/assets/bigwindowImg/index/r.png") no-repeat center;
// background-size: 100% 100%;
// background: red;
// border: 1px solid red;
right: 10px;
z-index: 9999;
.imgr {
position: absolute;
right: 0;
top: -88px;
}
}
.t1box {
width: 100%;
height: 120px;
background: url("~@/assets/bigwindowImg/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>
huaxin-web/src/views/bigWindow/Ind/components/Rotate.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-16 11:10:26
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:29:16
* @FilePath: /test-ranqi/src/views/Rotate.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="container">
<div
@mouseenter="imgScale = 1.2"
@mouseleave="imgScale = 1"
@dblclick="dbclick"
class="imgcenter-shadow"
></div>
<img
class="imgcenter"
:src="center"
:style="{ transform: `scale(${imgScale})` }"
alt=""
/>
<div class="out-box">
<div
v-for="item in imgArr"
:key="item.num"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
class="a"
:style="{
background: `url(${item.src}) no-repeat`,
backgroundSsize: '100% 100%;',
}"
></div>
<!-- <div class="a"></div> -->
<!-- 地图 -->
<div class="b"></div>
<!-- 两个圆圈 -->
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</div>
</template>
<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";
export default {
name: "",
data() {
return {
timer: null,
rotateNum: 0,
rotateNumb: 0,
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 },
],
center,
};
},
mounted() {
this.rotate();
},
methods: {
rotate() {
this.timer = setInterval(() => {
this.rotateNum += 0.1;
const outBox = document.querySelector(".out-box");
const b = document.querySelector(".b");
const c = document.querySelector(".c");
const d = document.querySelector(".d");
const e = document.querySelector(".e");
const imgcenterShadow = document.querySelector(".imgcenter-shadow");
const a = document.querySelectorAll(".a");
outBox.style.transform = `rotateY(${this.rotateNum}deg)`;
b.style.transform = ` rotateY(-${this.rotateNum}deg) translateZ(10px) `;
c.style.transform = `rotateX(90deg) translateZ(230px) rotateZ(${this.rotateNum}deg)`;
d.style.transform = `rotateX(90deg) translateZ(230px) rotateZ(${this.rotateNum}deg)`;
e.style.transform = `rotateX(90deg) translateZ(130px) rotateZ(${this.rotateNum}deg)`;
const degNum = 360 / this.imgArr.length;
a.forEach((item, index) => {
item.style.transform = ` rotateY(${
degNum * index
}deg) translateZ(300px) rotateY(-${
degNum * index + this.rotateNum
}deg)`;
});
}, 10);
},
dbclick() {
console.log("双击");
},
mouseenter() {
clearInterval(this.timer);
},
mouseleave() {
this.rotate();
},
},
};
</script>
<style lang="scss" scoped>
// body {
// // background: url("~@/assets/bigwindowImg/rotate/bg.png") no-repeat;
// width: 100%;
// height: 100%;
// }
.container {
perspective: 1400px;
transform-style: preserve-3d;
transform: rotateX(-15deg);
.qinxie {
}
}
.imgcenter {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
margin-left: -150px;
top: -220px;
transform-style: preserve-3d;
pointer-events: none;
transition: all 0.1s linear;
}
.imgcenter-shadow {
position: absolute;
width: 180px;
height: 200px;
background: red;
left: 50%;
margin-left: -100px;
top: -180px;
z-index: 999;
opacity: 0;
cursor: pointer;
}
.out-box {
position: relative;
// width: 100px;
// height: 100px;
margin: 300px auto;
// background: red;
transform-style: preserve-3d;
// animation: rotateDog .5s linear infinite;
&:hover {
// animation-play-state: paused;
}
& .a {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: 1px;
height: 70px;
width: 50px;
z-index: 99900;
background: url("~@/assets/bigwindowImg/rotate/a.png") no-repeat;
background-size: 100% 100% !important;
cursor: pointer;
// transition: all 0.1s linear;
// background: blue;
&:hover {
position: absolute;
left: 50%;
top: 50%;
margin-top: -28px;
margin-left: -38px;
height: 100px;
width: 76px;
}
div {
text-align: center;
}
}
.b {
position: absolute;
left: 50%;
margin-left: -100px;
top: -100px;
transform-style: preserve-3d;
// background: blue;
height: 200px;
width: 200px;
transform: translateZ(200px) rotateX(-10deg);
z-index: -1;
pointer-events: none;
}
.c {
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;
width: 600px;
height: 600px;
border-radius: 50%;
// border: 1px solid red;
// border-top-color: black;
background: url("~@/assets/bigwindowImg/rotate/bottomC.png") center no-repeat;
background-size: 100% 100%;
transform: rotateX(90deg) translateZ(250px);
}
.d {
position: absolute;
left: 50%;
top: 3px;
margin-left: -300px;
width: 600px;
height: 600px;
border-radius: 50%;
border: 1px solid rgba(89, 178, 245, 0.6);
box-shadow: 0px 3px 1px 2px rgba(89, 178, 245, 0.6); /* 添加阴影效果 */
// border-top-color: black;
// background: url("~@/assets/bigwindowImg/rotate/bottomD.png") center no-repeat;
transform: rotateX(90deg) translateZ(250px);
}
.e {
position: absolute;
left: 50%;
top: 0;
margin-left: -200px;
width: 400px;
height: 400px;
// border-radius: 50%;
// border: 1px solid red;
// border-top-color: black;
background: url("~@/assets/bigwindowImg/rotate/circleBg.png") center no-repeat;
background-size: 100% 100%;
transform: rotateX(90deg) translateZ(250px);
}
.a:nth-child(1) {
transform: translateZ(300px);
}
.a:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.a:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.a:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.a:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.a:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
}
@keyframes rotateDog {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/Top.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:29: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
-->
<template>
<div class="top">
<img :src="top" alt="" />
</div>
</template>
<script>
import top from "@/assets/bigwindowImg/index/top.png";
export default {
name: "",
data() {
return {
top,
};
},
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;
}
</style>
huaxin-web/src/views/bigWindow/Ind/components/UserTypeBarChart.vue 0 → 100644
View file @ e5395ceb
<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>
huaxin-web/src/views/bigWindow/Ind2/Ind.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:37:44
* @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="ind2">
<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/mapClass/newMap";
import {
deviceType,
deviceIcon,
pipeColor,
} from "@/utils/mapClass/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>
.ind2 {
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/bigwindowImg/index/backIndex.png") no-repeat center center;
line-height: 48px;
z-index: 999;
cursor: pointer;
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/Bottom.vue 0 → 100644
View file @ e5395ceb
<!--
* @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>
huaxin-web/src/views/bigWindow/Ind2/components/HazardOverview.vue 0 → 100644
View file @ e5395ceb
<template>
<div class="hazard-overview">
<div ref="chart" class="hazard-ring"></div>
<div class="legend">
<div
v-for="item in items"
:key="item.name"
class="legend-item"
>
<span class="dot" :style="{ backgroundColor: item.color }"></span>
<span class="label">{{ item.name }}</span>
<span class="value">{{ item.value }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HazardOverview",
props: {
items: {
type: Array,
default() {
return [
{ name: "居民用户隐患", value: 3, color: "#4aa8ff" },
{ name: "工商用户隐患", value: 2, color: "#ffb357" },
{ name: "管线隐患", value: 4, color: "#3be6ff" },
{ name: "其他设施", value: 3, color: "#ff4a4a" },
];
},
},
},
data() {
return {
chart: null,
};
},
computed: {
totalValue() {
return this.items.reduce((sum, item) => {
const value = Number(item.value) || 0;
return sum + value;
}, 0);
},
},
mounted() {
this.initChart();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
watch: {
items: {
handler() {
this.updateChart();
},
deep: true,
},
},
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 data = this.items.map((item) => ({
name: item.name,
value: Number(item.value) || 0,
}));
this.chart.setOption({
color: this.items.map((item) => item.color),
title: {
text: String(this.totalValue),
subtext: "总数",
left: "center",
top: "center",
textStyle: {
color: "#ffffff",
fontSize: 32,
fontWeight: "bold",
},
subtextStyle: {
color: "#ffffff",
fontSize: 14,
},
},
series: [
{
type: "pie",
radius: ["68%", "86%"],
center: ["50%", "50%"],
startAngle: 90,
label: { show: false },
labelLine: { show: false },
emphasis: { scale: false },
itemStyle: {
borderWidth: 3,
borderColor: "rgba(3, 16, 28, 0.9)",
},
data,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.hazard-overview {
width: 100%;
display: flex;
align-items: center;
}
.hazard-ring {
width: 180px;
height: 180px;
}
.legend {
flex:1;
display: flex;
flex-direction: column;
gap: 10px;
margin-left: 16px;
}
.legend-item {
display: flex;
align-items: center;
height: 34px;
padding: 0 12px;
background: linear-gradient(
90deg,
rgba(64, 156, 255, 0.35) 0%,
rgba(64, 156, 255, 0.08) 100%
);
border: 1px solid rgba(64, 156, 255, 0.5);
color: #ffffff;
box-shadow: inset 0 0 14px rgba(64, 156, 255, 0.25);
}
.dot {
width: 16px;
height: 8px;
border-radius: 2px;
margin-right: 10px;
flex-shrink: 0;
}
.label {
flex: 1;
font-size: 14px;
white-space: nowrap;
}
.value {
font-size: 16px;
font-weight: 600;
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/IssueTable.vue 0 → 100644
View file @ e5395ceb
<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 vid">{{ 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 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">
<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: "整改中" },
{ id: "4", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "5", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "6", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "7", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "8", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "9", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "10", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "11", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "12", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "13", type: "管线", issue: "管线老化", status: "整改中" },
{ id: "14", 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: 16px;
overflow: hidden;
}
.header-row {
display: flex;
align-items: center;
height: 52px;
background: rgba(0, 124, 225, 0.4);
font-weight: 600;
}
.body {
padding: 8px 0;
// padding-left: 4px;
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;
}
.vid{
padding-left:15px;
}
.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: 4px 8px;
border-radius: 2px;
font-size: 14px;
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>
huaxin-web/src/views/bigWindow/Ind2/components/Left.vue 0 → 100644
View file @ e5395ceb
<template>
<div class="left">
<div class="t">
<Title text="用户安检" />
<div class="btn">
<div
class="btn-item"
v-for="item in btnData1"
:key="item"
:class="{ active: btn1Active == item }"
>
{{ item }}
</div>
</div>
<div class="chars1">
<div><img src="@/assets/bigwindowImg/ind2Img/ind2Imga.png" alt="" /></div>
<div class="bb">
<div class="text">安检任务1进度</div>
<PressureBarChartVue />
</div>
</div>
<div class="chars2">
<UserTypeStackBarChart />
</div>
</div>
<div class="b">
<Title text="管线巡检" />
<div class="btn">
<div
class="btn-item"
v-for="item in btnData2"
:key="item"
:class="{ active: btn2Active == item }"
>
{{ item }}
</div>
</div>
<div class="text-wrapper">
<div v-for="item in textData" :key="item.t1">
<div class="text1">{{ item.t1 }}</div>
<div class="text2">{{ item.t2 }}</div>
</div>
</div>
<div class="chars3">
<PressureBarChart2 />
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/bigWindow/PubCom/title.vue";
import PressureBarChartVue from "./PressureBarChart.vue";
import PressureBarChart2 from "./PressureBarChart2.vue";
import UserTypeStackBarChart from "./UserTypeStackBarChart.vue";
export default {
name: "",
components: {
Title,
PressureBarChartVue,
UserTypeStackBarChart,
PressureBarChart2,
},
data() {
return {
textData: [
{
t1: "2.396",
t2: "高压已巡检",
},
{
t1: "2.3961",
t2: "高压已巡检",
},
{
t1: "2.3962",
t2: "高压已巡检",
},
{
t1: "2.3963",
t2: "高压已巡检",
},
],
btnData1: ["居民", "工商业"],
btn1Active: "居民",
btnData2: ["日", "季度", "年"],
btn2Active: "日",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.left {
overflow: hidden;
// width: 20%;
width: 434px;
top: 102px;
bottom: 50px;
// background: url("~@/assets/bigwindowImg/index/l.png") no-repeat center;
// background-size: 100% 100%;
// border: 1px solid red;
position: absolute;
left: 10px;
z-index: 999999;
}
.btn {
display: flex;
margin-top: 15px;
margin-bottom: 20px;
.btn-item {
width: 71px;
height: 38px;
background: rgba(25, 151, 254, 0.098);
box-sizing: border-box;
border: 0.96px solid #10b4f5;
box-shadow: inset 0px 0px 13px 0px rgba(25, 151, 254, 0.61);
margin-right: 15px;
cursor: pointer;
text-align: center;
line-height: 38px;
color:#fff;
&.active {
background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
border: 1px solid #72c1ff;
}
}
}
.chars1 {
display: flex;
.bb {
flex: 1;
margin-bottom: 12px;
.text {
color: #fff;
font-size: 16px;
margin-bottom: 2px;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
}
}
}
.b {
margin-top: 25px;
}
.text-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
color: #fff;
.text1 {
font-size: 28px;
}
.text2 {
font-size: 16px;
}
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/PressureBarChart.vue 0 → 100644
View file @ e5395ceb
<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: {
value: {
type: Number,
default: 78,
},
max: {
type: Number,
default: 100,
},
},
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: {
value() {
this.updateChart();
},
max() {
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 maxValue = Math.max(this.max, 1);
const safeValue = Math.min(Math.max(this.value, 0), maxValue);
this.chart.setOption({
grid: {
left: 0,
right: 40,
top: 0,
bottom: 0,
containLabel: true,
},
xAxis: {
type: "value",
max: maxValue,
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
},
yAxis: [
{
show: false,
type: "category",
data: [""],
axisTick: { show: false },
axisLine: { show: false },
},
{
// show: false,
type: "category",
data: [`${this.value}%`],
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#ffffff",
fontSize: 18,
},
},
],
series: [
{
type: "bar",
data: [safeValue],
barWidth: 14,
barCategoryGap: 5,
showBackground: true,
backgroundStyle: {
color: "rgba(16, 180, 245, 0.22)",
borderRadius: 6,
},
itemStyle: {
borderRadius: [0, 6, 6, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "#2f7bff" },
{ offset: 0.6, color: "#31c3ff" },
{ offset: 1, color: "#2ef5ff" },
]),
},
label: {
show: false,
position: "right",
color: "#fff",
fontSize: 16,
formatter: ({ value }) => `${value}%`,
},
},
],
});
},
},
};
</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: 20px;
// overflow: hidden;
// background: red;
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/PressureBarChart2.vue 0 → 100644
View file @ e5395ceb
<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: 90 },
{ name: "七树庄镇", value: 78 },
{ name: "丰登坞镇", value: 75 },
{ name: "新军屯镇", value: 70 },
{ name: "小张各庄镇", value: 68 },
{ name: "欢喜庄乡", value: 65 },
{ name: "李钊庄镇", value: 64 },
];
},
},
},
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: 0,
right: 20,
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: 16,
},
},
{
type: "category",
data: values.map(item=>`${item}%`),
offset:20,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#ffffff",
fontSize: 16,
},
},
],
series: [
{
type: "bar",
data: values,
barWidth: 14,
barCategoryGap: 5,
showBackground: true,
backgroundStyle: {
color: "rgba(255,255,255,0.12)",
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: 234px;
// 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: 234px;
// overflow: hidden;
// background: red;
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/Right.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-09 15:10:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:35:58
* @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="tc">
<HazardOverviewVue />
</div>
</div>
<div class="b">
<Title text="设备生命周期" />
<div class="table">
<Table/>
</div>
</div>
</div>
</template>
<script>
import Title from "@/views/bigWindow/PubCom/title.vue";
import HazardOverviewVue from "./HazardOverview.vue";
import Table from "./IssueTable.vue"
export default {
name: "",
components: {
Title,
HazardOverviewVue,
Table
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.right {
// width: 20%;
width: 434px;
position: absolute;
top: 102px;
bottom: 50px;
// background: url("~@/assets/bigwindowImg/index/r.png") no-repeat center;
// background-size: 100% 100%;
// background: red;
// border: 1px solid red;
right: 10px;
z-index: 9999;
.t {
// margin-top:25px;
.tc{
margin-top:25px;
}
}
.b{
margin-top:25px;
.table{
margin-top:10px;
width: 255px;
height: 500px;
// background: blue;
}
}
}
</style>
huaxin-web/src/views/bigWindow/Ind2/components/UserTypeStackBarChart.vue 0 → 100644
View file @ e5395ceb
<template>
<div ref="chart" class="user-type-stack-bar-chart"></div>
</template>
<script>
export default {
name: "UserTypeStackBarChart",
props: {
categories: {
type: Array,
default() {
return [
"白芨屯",
"七树庄",
"王浒圳",
"新罕电",
"小张各庄",
"欢喜庄",
"李朝庄",
];
},
},
residential: {
type: Array,
default() {
return [22, 14, 24, 22, 26, 18, 28];
},
},
industrial: {
type: Array,
default() {
return [10, 8, 12, 10, 6, 16, 4];
},
},
},
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: 6,
right: 6,
top: 28,
bottom: 0,
containLabel: true,
},
legend: {
top: 0,
right: 10,
itemWidth: 16,
itemHeight: 8,
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
xAxis: {
type: "category",
data: this.categories,
axisLine: { lineStyle: { color: "rgba(19,253,245,0.19)" } },
axisTick: {
show: true,
inside: true,
length: 1.5,
width:2,
lineStyle: { color: "#2CFFFF" },
},
axisLabel: {
color: "#ffffff",
fontSize: 11,
},
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
lineStyle: { color: "rgba(19,253,245,0.19)" },
},
},
series: [
{
name: "居民用户",
type: "bar",
stack: "total",
data: this.residential,
barWidth: 14,
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: "#20c8ff",
},
},
{
name: "工商业用户",
type: "bar",
stack: "total",
data: this.industrial,
barWidth: 14,
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: "#ff6b3d",
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.user-type-stack-bar-chart {
width: 100%;
height: 200px;
}
</style>
huaxin-web/src/views/bigWindow/Ind3/Ind.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:40:35
* @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/mapClass/newMap";
import {
deviceType,
deviceIcon,
pipeColor,
} from "@/utils/mapClass/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/bigwindowImg/index/backIndex.png") no-repeat center center;
line-height: 48px;
z-index: 999;
cursor: pointer;
}
</style>
huaxin-web/src/views/bigWindow/Ind3/components/AlarmScrollTable.vue 0 → 100644
View file @ e5395ceb
<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>
huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-12 14:23:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:38:19
* @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/bigwindowImg/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/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;
}
.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/bigwindowImg/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/bigwindowImg/ind3Img/active.png") no-repeat center
center;
position: absolute;
top: 0;
left: 0;
// transition: all 0.5s;
opacity: .8;
}
}
}
}
}
</style>
huaxin-web/src/views/bigWindow/Ind3/components/Left.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-09 15:10:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:39:47
* @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/bigWindow/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/bigwindowImg/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/bigwindowImg/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/bigwindowImg/ind3Img/ttt.png") no-repeat center center;
}
.facbbb {
position: relative;
top: -25px;
width: 100%;
height: 205px;
background: url("~@/assets/bigwindowImg/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>
huaxin-web/src/views/bigWindow/Ind3/components/PressureBarChart.vue 0 → 100644
View file @ e5395ceb
<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>
huaxin-web/src/views/bigWindow/Ind3/components/Right.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-09 15:10:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:39:55
* @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/bigWindow/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/bigwindowImg/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>
huaxin-web/src/views/bigWindow/Index/components/Top.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:43:30
* @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/bigwindowImg/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>
huaxin-web/src/views/bigWindow/Index/index.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 15:04:49
* @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="index"
:style="{
transform: `scale(${scaleX},${scaleX})`,
top: `-${((1 - scaleX) * innerHeight) / 2}px`,
}"
>
<div class="back" @click="back">跳转后台</div>
<Top />
<component :is="currentTabComponent"></component>
<!-- <Ind /> -->
</div>
</template>
<script>
import Top from "./components/Top.vue";
import Ind from "@/views/bigWindow/Ind/Ind.vue";
export default {
name: "",
components: {
Top,
// Ind,
},
data() {
return {
scaleX: 1,
innerWidth: 0,
innerHeight: 0,
currentTabComponent: Ind,
};
},
created() {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
},
methods: {
back() {
this.$router.push("/checktask/jmchacktask")
},
},
};
</script>
<style lang="scss" scoped>
.index {
// width:2880px;
width: 1920px;
height: 100vh;
background: black;
position: relative;
left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
overflow: hidden;
.back {
position: absolute;
border: 1px solid rgba(0, 124, 225, 1);
border-radius: 5px;;
cursor: pointer;
padding: 5px 10px;
color: #fff;
font-size: 16px;
right: 436px;
top: 113px;
&:hover {
background: rgba(0, 124, 225, 0.4);
}
}
}
</style>
huaxin-web/src/views/bigWindow/PubCom/title.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-06 10:16:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:30:54
* @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/bigwindowImg/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>
huaxin-web/src/views/bigWindow/index.vue 0 → 100644
View file @ e5395ceb
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-15 13:55:58
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-15 14:51:48
* @FilePath: /huaxin-web/src/views/bigWindow/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="wpa">
<Index />
</div>
</template>
<script>
import Index from "./Index/index";
export default {
name: "",
components: {
Index,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.wpa{
// background: red;
background: #000 !important
}
</style>
huaxin-web/src/views/login.vue
View file @ e5395ceb
...@@ -95,6 +95,7 @@ export default { ...@@ -95,6 +95,7 @@ export default {
$route: { $route: {
handler: function(route) { handler: function(route) {
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
// console.log(" this.redirect", this.redirect)
}, },
immediate: true immediate: true
} }
...@@ -134,7 +135,10 @@ export default { ...@@ -134,7 +135,10 @@ export default {
Cookies.remove('rememberMe'); Cookies.remove('rememberMe');
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
this.$router.push({ path: "bigWindow" || "/" }).catch(()=>{});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
this.getCode(); this.getCode();
......
huaxin-web/vue.config.js
View file @ e5395ceb
...@@ -34,8 +34,8 @@ module.exports = { ...@@ -34,8 +34,8 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8909/huaxin`, // target: `http://localhost:8909/huaxin`,
//target: `https://yhq.zhkjgf.com:8898`, target: `https://yhq.zhkjgf.com:8898`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''
......
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