添加设备台账管理

master
fanluyan 1 year ago
parent f5475266ad
commit 8071152134

2
dist/index.html vendored

@ -1 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cacfrontend</title><script defer="defer" src="static/js/chunk-vendors.ff5c292b.js"></script><script defer="defer" src="static/js/app.6a623dc1.js"></script><link href="static/css/app.c8924e65.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cacfrontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cacfrontend</title><script defer="defer" src="static/js/chunk-vendors.ff5c292b.js"></script><script defer="defer" src="static/js/app.588219af.js"></script><link href="static/css/app.c8924e65.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cacfrontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

5
package-lock.json generated

@ -8454,6 +8454,11 @@
"csstype": "^3.1.0" "csstype": "^3.1.0"
} }
}, },
"vue-cookies": {
"version": "1.8.3",
"resolved": "https://registry.npmmirror.com/vue-cookies/-/vue-cookies-1.8.3.tgz",
"integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

@ -17,6 +17,7 @@
"px2rem-loader": "^0.1.9", "px2rem-loader": "^0.1.9",
"three": "^0.158.0", "three": "^0.158.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-cookies": "^1.8.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

@ -31,7 +31,6 @@ export default {
background-image: url(../assets/bg_CAC.png); background-image: url(../assets/bg_CAC.png);
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
.content-box { .content-box {
width: 100%; width: 100%;
height: calc(100% - 72px); height: calc(100% - 72px);

@ -1,6 +1,9 @@
<template> <template>
<div class="sidebarBox"> <div class="sidebarBox">
<ul class="menuBoxUl"> <ul class="menuBoxUl">
<li class="menuItem" @click="linkHome()">
<a>首页</a>
</li>
<li class="menuItem" v-for="(item, index) in routeItem" :key="index"> <li class="menuItem" v-for="(item, index) in routeItem" :key="index">
<router-link :to="item.path"> {{ item.name }} </router-link> <router-link :to="item.path"> {{ item.name }} </router-link>
</li> </li>
@ -12,15 +15,21 @@
export default { export default {
data() { data() {
return { return {
hostName: "",
isProduction: "",
routeItem: [ routeItem: [
// {
// path: "/home",
// name: "",
// },
{ {
path: "/dataReport", path: "/dataReport",
name: "数据报表", name: "数据报表",
}, },
// { {
// path: "/equipment", path: "/equipment",
// name: "", name: "设备台账管理",
// }, },
// { // {
// path: "/systemManagement", // path: "/systemManagement",
// name: "", // name: "",
@ -32,8 +41,26 @@ export default {
], ],
}; };
}, },
mounted() {
console.log(window.location.host);
console.log(process.env.NODE_ENV);
this.isProduction = process.env.NODE_ENV === "production";
if (this.isProduction) {
// 使IP
this.hostName = window.location.origin;
console.log("aaaaaaaaaaaa");
} else {
// 使 target
console.log("开发环境");
this.hostName = "http://localhost:9527/#/"; // 使 target
}
},
watch: {}, watch: {},
methods: {}, methods: {
linkHome() {
window.location.href = this.hostName;
},
},
created() {}, created() {},
}; };
</script> </script>

@ -42,6 +42,7 @@ export default {
}, },
data() { data() {
return { return {
hostName: "",
currentTime: null, currentTime: null,
userName: localStorage.getItem("userName"), userName: localStorage.getItem("userName"),
role: localStorage.getItem("role"), role: localStorage.getItem("role"),
@ -64,8 +65,11 @@ export default {
message: "退出成功", message: "退出成功",
type: "success", type: "success",
}); });
this.$store.commit("REMOVE_INFO"); //this.$store.commit("REMOVE_INFO");
this.$router.push("/login"); // this.$router.push("/login");
console.log(this.$cookies.get("Admin-Token"));
this.$cookies.remove("Admin-Token");
window.location.href = this.hostName + "/#/login";
break; break;
} }
}, },
@ -76,6 +80,18 @@ export default {
setInterval(() => { setInterval(() => {
this.currentTime = new Date(); this.currentTime = new Date();
}, 1000); }, 1000);
console.log(window.location.host);
console.log(process.env.NODE_ENV);
const isProduction = process.env.NODE_ENV === "production";
if (isProduction) {
// 使IP
this.hostName = window.location.origin;
console.log("aaaaaaaaaaaa");
} else {
// 使 target
console.log("开发环境");
this.hostName = "http://192.168.1.190:88"; // 使 target
}
}, },
}; };
</script> </script>

@ -20,6 +20,9 @@ import "./utils/rem";
//引入日期// 注册全局 moment //引入日期// 注册全局 moment
import moment from "moment"; import moment from "moment";
Vue.prototype.$moment = moment; Vue.prototype.$moment = moment;
//cookies
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
//挂载弹出信息 //挂载弹出信息
import { message } from "@/utils/resetMessage"; import { message } from "@/utils/resetMessage";
@ -30,14 +33,15 @@ Vue.config.productionTip = false;
//使用钩子函数对路由进行权限跳转 //使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 状态监测数据汇集系统`; document.title = `${to.meta.title} | 状态监测数据汇集系统`;
const token = localStorage.getItem("token");
if (!token && to.path !== "/login") {
next({
path: "/login",
});
} else {
next(); next();
} // const token = localStorage.getItem("token");
// if (!token && to.path !== "/login") {
// next({
// path: "/login",
// });
// } else {
// next();
// }
}); });
new Vue({ new Vue({

@ -4,16 +4,24 @@ import VueRouter from "vue-router";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [ const routes = [
{ // {
path: "/login", // path: "/login",
component: () => import("../views/login/index.vue"), // component: () => import("../views/login/index.vue"),
meta: { title: "登录" }, // meta: { title: "登录" },
}, // },
{ {
path: "/", path: "/",
redirect: "/dataReport", redirect: "/dataReport",
component: () => import("../components/Home.vue"), component: () => import("../components/Home.vue"),
children: [ children: [
// {
// path: "/home",
// component: () => import("../views/homePage/index.vue"),
// name: "homepage",
// meta: {
// title: "首页",
// },
// },
{ {
path: "/dataReport", path: "/dataReport",
component: () => import("../views/dataReport/index.vue"), component: () => import("../views/dataReport/index.vue"),
@ -26,9 +34,52 @@ const routes = [
path: "/equipment", path: "/equipment",
component: () => import("../views/equipment/index.vue"), component: () => import("../views/equipment/index.vue"),
name: "equipment", name: "equipment",
redirect: "/equipment/bdz",
meta: { meta: {
title: "设备台账管理", title: "设备台账管理",
}, },
children: [
{
path: "/equipment/bdz",
component: () => import("../views/equipment/bdz/index.vue"),
name: "bdz",
meta: {
title: "变电站",
},
},
{
path: "/equipment/qyjg",
component: () => import("../views/equipment/qyjg/index.vue"),
name: "qyjg",
meta: {
title: "区域间隔",
},
},
{
path: "/equipment/sblx",
component: () => import("../views/equipment/sblx/index.vue"),
name: "sblx",
meta: {
title: "设备类型",
},
},
{
path: "/equipment/zsb",
component: () => import("../views/equipment/zsb/index.vue"),
name: "zsb",
meta: {
title: "主设备",
},
},
{
path: "/equipment/modevtype",
component: () => import("../views/equipment/modevtype/index.vue"),
name: "modevtype",
meta: {
title: "监测设备类型",
},
},
],
}, },
{ {
path: "/systemManagement", path: "/systemManagement",

@ -103,10 +103,208 @@ export function colListApi(data) {
}); });
} }
// export function getexportApi() { //设备台账管理列表api
// return request({ //变电站相关接口
// url: "/sensor/export", //新增
// method: "post", export function bdzAddApi(data) {
// responseType: "blob", return request({
// }); url: "/bdz/add",
// } method: "post",
data,
});
}
//修改更新
export function bdzUpdateApi(data) {
return request({
url: "/bdz/update",
method: "post",
data,
});
}
//删除
export function bdzDeleteApi(data) {
return request({
url: "/bdz/delete",
method: "post",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//查询全部
export function bdzListAllApi(data) {
return request({
url: "/bdz/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//区域间隔相关接口
//新增
export function areaAddApi(data) {
return request({
url: "/area/add",
method: "post",
data,
});
}
//修改更新
export function areaUpdateApi(data) {
return request({
url: "/area/update",
method: "post",
data,
});
}
//删除
export function areaDeleteApi(data) {
return request({
url: "/area/delete",
method: "post",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//查询全部
export function areaListAllApi(data) {
return request({
url: "/area/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//主设备管理相关接口
//新增
export function zsbAddApi(data) {
return request({
url: "/zsb/add",
method: "post",
data,
});
}
//修改更新
export function zsbUpdateApi(data) {
return request({
url: "/zsb/update",
method: "post",
data,
});
}
//删除
export function zsbDeleteApi(data) {
return request({
url: "/zsb/delete",
method: "post",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//查询全部
export function zsbListAllApi(data) {
return request({
url: "/zsb/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//设备类型相关接口
//新增
export function sblxAddApi(data) {
return request({
url: "/lx/add",
method: "post",
data,
});
}
//修改更新
export function sblxUpdateApi(data) {
return request({
url: "/lx/update",
method: "post",
data,
});
}
//删除
export function sblxDeleteApi(data) {
return request({
url: "/lx/delete",
method: "post",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//查询全部
export function sblxListAllApi(data) {
return request({
url: "/lx/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//监测设备类型相关接口
//新增
export function modevtypeAddApi(data) {
return request({
url: "/modevtype/add",
method: "post",
data,
});
}
//修改更新
export function modevtypeUpdateApi(data) {
return request({
url: "/modevtype/update",
method: "post",
data,
});
}
//删除
export function modevtypeDeleteApi(data) {
return request({
url: "/modevtype/delete",
method: "post",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//查询全部
export function modevtypeListAllApi(data) {
return request({
url: "/modevtype/listAll",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}

@ -481,7 +481,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.dataReport { .dataReport {
display: flex;
display: flex; display: flex;
height: 100%; height: 100%;
//background: #fcc; //background: #fcc;

@ -0,0 +1,128 @@
<template>
<div class="bdzAddBox">
<el-dialog
class="bdzAddDialogBox"
:title="title"
:visible.sync="bdzDialogshow"
width="520px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:rules="rules"
:model="formInfo"
>
<el-form-item label="名称:" prop="mc">
<el-input v-model="formInfo.mc"></el-input>
</el-form-item>
<el-form-item label="坐标:" prop="coordinate">
<el-input v-model="formInfo.coordinate"></el-input>
</el-form-item>
<el-form-item label="电压等级:" prop="voltagegrade">
<el-input v-model="formInfo.voltagegrade"></el-input>
</el-form-item>
<el-form-item label="规模:" prop="scale">
<el-input v-model="formInfo.scale"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="note">
<el-input v-model="formInfo.note"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { bdzAddApi, bdzUpdateApi } from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
bdzDialogshow: false,
formInfo: {},
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
this.formInfo = JSON.parse(JSON.stringify(val));
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加电站") {
console.log(this.formInfo);
bdzAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getbdzAllList(); //
}
})
.catch((err) => {});
} else {
bdzUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getbdzAllList(); //
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
display() {
this.bdzDialogshow = true;
},
hide() {
this.bdzDialogshow = false;
this.$refs.formInfo.resetFields(); //
},
},
};
</script>
<style lang="less">
.bdzAddBox {
.bdzAddDialogBox {
.el-input-number--small {
width: 374px;
.el-input__inner {
text-align: left;
}
}
.el-input-number.is-controls-right[class*="small"] [class*="decrease"],
.el-input-number.is-controls-right[class*="small"] [class*="increase"] {
display: none;
}
}
}
</style>

@ -0,0 +1,137 @@
<template>
<div class="bdzBox">
<div class="reportHead">
<h3>变电站管理</h3>
</div>
<div class="page-body">
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加电站</el-button
>
<div class="bdzTableBox">
<el-table
v-loading="bdzLoading"
:data="bdzTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="mc" label="名称"> </el-table-column>
<el-table-column prop="coordinate" label="坐标"></el-table-column>
<el-table-column prop="voltagegrade" label="电压等级">
</el-table-column>
<el-table-column prop="scale" label="规模"> </el-table-column>
<el-table-column prop="note" label="描述"> </el-table-column>
<el-table-column label="操作" width="200" class-name="editClass">
<template slot-scope="scope">
<el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
>
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<addbdzDialog ref="bdzAddRef" :title="title"></addbdzDialog>
</div>
</template>
<script>
import { bdzDeleteApi, bdzListAllApi } from "@/utils/api/index";
import addbdzDialog from "./components/addbdzDialog";
export default {
components: {
addbdzDialog,
},
data() {
return {
bdzLoading: false,
bdzTableData: [],
title: "",
};
},
created() {},
mounted() {
this.getbdzAllList();
},
watch: {},
methods: {
getbdzAllList() {
this.bdzLoading = true;
bdzListAllApi()
.then((res) => {
console.log(res);
this.bdzTableData = res.data;
this.bdzLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleAddClick() {
this.title = "添加电站";
this.$refs.bdzAddRef.display();
//this.$refs.bdzAddRef.getdataform(null);
},
//
handleEditClick(data) {
this.title = "编辑";
this.$refs.bdzAddRef.display();
this.$refs.bdzAddRef.getdataform(data);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
bdzDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getbdzAllList(); //
} else {
this.$message.error(res.data);
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
.bdzBox {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.bdzTableBox {
margin-top: 8px;
height: calc(100% - 38px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}
}
}
</style>

@ -1,13 +1,51 @@
<template> <template>
<div class="equiment"> <div class="equiment">
<div class="leftTree">设备管理</div> <div class="equimentList">
<div class="reportTable"></div> <div class="sideNav">
<h3><i class="el-icon-s-tools"></i>设备台账</h3>
<ul class="navList">
<li v-for="(item, index) in navlist" :key="index">
<router-link :to="item.path">
<span>{{ item.name }}</span
><i class="el-icon-arrow-right"></i>
</router-link>
</li>
</ul>
</div>
</div>
<div class="reportTable">
<router-view></router-view>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {}; return {
activeIndex: 0,
navlist: [
{
name: "变电站管理",
path: "/equipment/bdz",
},
{
name: "区域管理",
path: "/equipment/qyjg",
},
{
name: "主设备管理",
path: "/equipment/zsb",
},
{
name: "设备类型管理",
path: "/equipment/sblx",
},
{
name: "监测设备类型管理",
path: "/equipment/modevtype",
},
],
};
}, },
methods: {}, methods: {},
}; };
@ -15,15 +53,129 @@ export default {
<style lang="less"> <style lang="less">
.equiment { .equiment {
display: flex; display: flex;
.leftTree { height: 100%;
width: 200px; .equimentList {
height: 500px; min-width: 240px;
border: 1px solid #fff; max-width: 240px;
height: 100%;
overflow: auto;
//border: 1px solid #fff;
margin-right: 24px; margin-right: 24px;
background: rgba(8, 9, 36, 0.28);
box-shadow: inset 0 4px 44px 0 #106cde;
//padding: 0px 12px;
.sideNav {
margin: 10px;
height: calc(100% - 20px);
background-color: #fff;
}
h3 {
font-weight: normal;
display: block;
height: 38px;
line-height: 36px;
margin: 0;
padding: 0 16px 0 16px;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-size: 14px;
text-decoration: none;
color: #262626;
display: flex;
align-items: center;
i {
margin-right: 6px;
}
}
.navList {
box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
position: relative;
background-color: #fbfbfb;
li {
padding: 0 16px 0 38px;
color: #262626;
height: 38px;
line-height: 36px;
font-size: 14px;
display: flex;
align-items: center;
&::before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 23px;
top: 0;
bottom: 19px;
border-left: 1px solid #e2e2e2;
}
&:hover {
a {
cursor: pointer;
color: #106cde;
}
}
a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: #262626;
&::before {
content: "";
display: inline-block;
position: absolute;
width: 5px;
height: 5px;
left: -18px;
top: 16px;
background-color: #fff;
border: 1px solid #e2e2e2;
z-index: 2;
border-radius: 4px;
}
}
.router-link-active {
color: #106cde;
}
}
}
} }
.reportTable { .reportTable {
flex: 1; flex: 1;
border: 1px solid #fff; overflow-x: hidden;
background: rgba(8, 9, 36, 0.28);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
box-shadow: inset 0 4px 44px 0 #106cde;
padding: 0px 12px;
.reportHead {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
h3 {
font-size: 14px;
color: #fff;
font-weight: normal;
height: 40px;
line-height: 40px;
}
}
.el-table .el-table__cell {
text-align: center;
}
.editClass {
.el-link.el-link--primary {
margin-right: 14px;
}
}
} }
} }
</style> </style>

@ -0,0 +1,150 @@
<template>
<div class="modevtypeAddBox">
<el-dialog
class="modevtypeAddDialogBox"
:title="title"
:visible.sync="modevtypeDialogshow"
width="520px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:rules="rules"
:model="formInfo"
>
<el-form-item label="设备名称:" prop="mc">
<el-input v-model="formInfo.mc"></el-input>
</el-form-item>
<el-form-item label="选择表名:">
<el-select v-model="formInfo.tablename">
<el-option
v-for="item in tableOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
modevtypeAddApi,
modevtypeUpdateApi,
tableListApi,
} from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
modevtypeDialogshow: false,
formInfo: {},
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
tableOptions: [],
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
this.formInfo = JSON.parse(JSON.stringify(val));
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加监测类型") {
console.log(this.formInfo);
modevtypeAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getmodevtypeAllList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.errorMsg,
type: "error",
});
}
})
.catch((err) => {});
} else {
modevtypeUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getmodevtypeAllList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.errorMsg,
type: "error",
});
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
//table
gettableList() {
tableListApi()
.then((res) => {
console.log(res);
this.tableOptions = res.data;
})
.catch((err) => {
console.log(err); //
});
},
display() {
this.modevtypeDialogshow = true;
this.gettableList();
},
hide() {
this.modevtypeDialogshow = false;
this.$refs.formInfo.resetFields(); //
},
},
};
</script>
<style lang="less">
.modevtypeAddBox {
.modevtypeAddDialogBox {
.el-select {
width: 376px;
}
}
}
</style>

@ -0,0 +1,137 @@
<template>
<div class="modevtypeBox">
<div class="reportHead">
<h3>监测设备类型管理</h3>
</div>
<div class="page-body">
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加监测类型</el-button
>
<div class="modevtypeTableBox">
<el-table
v-loading="modevtypeLoading"
:data="modevtypeTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="mc" label="设备名称"> </el-table-column>
<el-table-column prop="tablename" label="表名"> </el-table-column>
<el-table-column label="操作" width="200" class-name="editClass">
<template slot-scope="scope">
<el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
>
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<addmodevtypeDialog
ref="modevtypeAddRef"
:title="title"
></addmodevtypeDialog>
</div>
</template>
<script>
import { modevtypeDeleteApi, modevtypeListAllApi } from "@/utils/api/index";
import addmodevtypeDialog from "./components/addmodevtypeDialog";
export default {
components: {
addmodevtypeDialog,
},
data() {
return {
modevtypeLoading: false,
modevtypeTableData: [],
title: "",
};
},
created() {},
mounted() {
this.getmodevtypeAllList();
},
watch: {},
methods: {
//
getmodevtypeAllList() {
this.modevtypeLoading = true;
modevtypeListAllApi()
.then((res) => {
console.log(res);
this.modevtypeTableData = res.data;
this.modevtypeLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleAddClick() {
this.title = "添加监测类型";
this.$refs.modevtypeAddRef.display();
},
//
handleEditClick(data) {
this.title = "编辑";
this.$refs.modevtypeAddRef.display();
this.$refs.modevtypeAddRef.getdataform(data);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
modevtypeDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getmodevtypeAllList(); //
} else {
this.$message.error(res.data);
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
.modevtypeBox {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.modevtypeTableBox {
margin-top: 8px;
height: calc(100% - 38px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}
}
}
</style>

@ -0,0 +1,139 @@
<template>
<div class="qyjgAddBox">
<el-dialog
class="qyjgAddDialogBox"
:title="title"
:visible.sync="qyjgDialogshow"
width="520px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:rules="rules"
:model="formInfo"
>
<el-form-item label="名称:" prop="mc">
<el-input v-model="formInfo.mc"></el-input>
</el-form-item>
<el-form-item label="所属电站:">
<el-select v-model="formInfo.bdzid">
<el-option
v-for="item in bdzOptions"
:key="item.id"
:label="item.mc"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { areaAddApi, areaUpdateApi, bdzListAllApi } from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
qyjgDialogshow: false,
formInfo: {
bdzid: "",
mc: "",
},
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
bdzOptions: [],
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
this.formInfo = JSON.parse(JSON.stringify(val));
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加区域") {
console.log(this.formInfo);
areaAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getAreaAllList(); //
}
})
.catch((err) => {});
} else {
areaUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getAreaAllList(); //
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
//
getbdzListAll() {
bdzListAllApi()
.then((res) => {
console.log(res);
this.bdzOptions = res.data;
console.log(this.title);
if (this.title == "添加区域") {
console.log(this.formInfo);
this.formInfo.bdzid = this.bdzOptions[0].id;
}
})
.catch((err) => {
console.log(err); //
});
},
display() {
this.qyjgDialogshow = true;
this.getbdzListAll();
},
hide() {
this.qyjgDialogshow = false;
this.$refs.formInfo.resetFields(); //
},
},
};
</script>
<style lang="less">
.qyjgAddBox {
.qyjgAddDialogBox {
.el-select {
width: 376px;
}
}
}
</style>

@ -0,0 +1,134 @@
<template>
<div class="qyjgBox">
<div class="reportHead">
<h3>区域管理</h3>
</div>
<div class="page-body">
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加区域</el-button
>
<div class="qyjgTableBox">
<el-table
v-loading="qyjgLoading"
:data="qyjgTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="mc" label="区域名称"> </el-table-column>
<el-table-column prop="bdzName" label="所属电站"> </el-table-column>
<el-table-column label="操作" width="200" class-name="editClass">
<template slot-scope="scope">
<el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
>
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<addqyjgDialog ref="qyjgAddRef" :title="title"></addqyjgDialog>
</div>
</template>
<script>
import { areaDeleteApi, areaListAllApi } from "@/utils/api/index";
import addqyjgDialog from "./components/addqyjgDialog";
export default {
components: {
addqyjgDialog,
},
data() {
return {
qyjgLoading: false,
qyjgTableData: [],
title: "",
};
},
created() {},
mounted() {
this.getAreaAllList();
},
watch: {},
methods: {
//
getAreaAllList() {
this.qyjgLoading = true;
areaListAllApi()
.then((res) => {
console.log(res);
this.qyjgTableData = res.data;
this.qyjgLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleAddClick() {
this.title = "添加区域";
this.$refs.qyjgAddRef.display();
//this.$refs.qyjgAddRef.getdataform(null);
},
//
handleEditClick(data) {
this.title = "编辑";
this.$refs.qyjgAddRef.display();
this.$refs.qyjgAddRef.getdataform(data);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
areaDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getAreaAllList(); //
} else {
this.$message.error(res.data);
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
.qyjgBox {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.qyjgTableBox {
margin-top: 8px;
height: calc(100% - 38px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}
}
}
</style>

@ -0,0 +1,109 @@
<template>
<div class="sblxAddBox">
<el-dialog
class="sblxAddDialogBox"
:title="title"
:visible.sync="sblxDialogshow"
width="520px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:rules="rules"
:model="formInfo"
>
<el-form-item label="名称:" prop="mc">
<el-input v-model="formInfo.mc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { sblxAddApi, sblxUpdateApi } from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
sblxDialogshow: false,
formInfo: {},
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
bdzOptions: [],
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
this.formInfo = JSON.parse(JSON.stringify(val));
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加设备类型") {
console.log(this.formInfo);
sblxAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getsblxAllList(); //
}
})
.catch((err) => {});
} else {
sblxUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getsblxAllList(); //
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
display() {
this.sblxDialogshow = true;
},
hide() {
this.sblxDialogshow = false;
this.$refs.formInfo.resetFields(); //
},
},
};
</script>
<style lang="less">
.sblxAddBox {
.sblxAddDialogBox {
.el-select {
width: 376px;
}
}
}
</style>

@ -0,0 +1,133 @@
<template>
<div class="sblxBox">
<div class="reportHead">
<h3>设备类型管理</h3>
</div>
<div class="page-body">
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加设备类型</el-button
>
<div class="sblxTableBox">
<el-table
v-loading="sblxLoading"
:data="sblxTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="mc" label="设备名称"> </el-table-column>
<el-table-column label="操作" width="200" class-name="editClass">
<template slot-scope="scope">
<el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
>
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<addsblxDialog ref="sblxAddRef" :title="title"></addsblxDialog>
</div>
</template>
<script>
import { sblxDeleteApi, sblxListAllApi } from "@/utils/api/index";
import addsblxDialog from "./components/addsblxDialog";
export default {
components: {
addsblxDialog,
},
data() {
return {
sblxLoading: false,
sblxTableData: [],
title: "",
};
},
created() {},
mounted() {
this.getsblxAllList();
},
watch: {},
methods: {
//
getsblxAllList() {
this.sblxLoading = true;
sblxListAllApi()
.then((res) => {
console.log(res);
this.sblxTableData = res.data;
this.sblxLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleAddClick() {
this.title = "添加设备类型";
this.$refs.sblxAddRef.display();
//this.$refs.sblxAddRef.getdataform(null);
},
//
handleEditClick(data) {
this.title = "编辑";
this.$refs.sblxAddRef.display();
this.$refs.sblxAddRef.getdataform(data);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
sblxDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getsblxAllList(); //
} else {
this.$message.error(res.data);
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
.sblxBox {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.sblxTableBox {
margin-top: 8px;
height: calc(100% - 38px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}
}
}
</style>

@ -0,0 +1,211 @@
<template>
<div class="zsbAddBox">
<el-dialog
class="zsbAddDialogBox"
:title="title"
:visible.sync="zsbDialogshow"
width="520px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="104px"
:rules="rules"
:model="formInfo"
>
<el-form-item label="所属电站:">
<el-select v-model="formInfo.bdzid" @change="changeJg">
<el-option
v-for="item in bdzOptions"
:key="item.id"
:label="item.mc"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属区域:">
<el-select v-model="formInfo.jgid">
<el-option
v-for="item in jgOptions"
:key="item.id"
:label="item.mc"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型:">
<el-select v-model="formInfo.lxid">
<el-option
v-for="item in sblxOptions"
:key="item.id"
:label="item.mc"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备名称:" prop="mc">
<el-input v-model="formInfo.mc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hide"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
zsbAddApi,
zsbUpdateApi,
bdzListAllApi,
areaListAllApi,
sblxListAllApi,
} from "@/utils/api/index";
export default {
props: ["title"],
data() {
return {
zsbDialogshow: false,
formInfo: {
bdzid: "",
jgid: "",
mc: "",
},
rules: {
mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
bdzOptions: [],
jgOptions: [],
sblxOptions: [],
};
},
created() {},
mounted() {},
watch: {},
methods: {
//
getdataform(val) {
console.log(val);
this.formInfo = JSON.parse(JSON.stringify(val));
},
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "添加主设备") {
console.log(this.formInfo);
zsbAddApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.hide();
this.$parent.getzsbAllList(); //
}
})
.catch((err) => {});
} else {
zsbUpdateApi(this.formInfo)
.then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
message: "修改成功",
type: "success",
});
this.hide();
this.$parent.getzsbAllList(); //
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
//
getbdzListAll() {
bdzListAllApi()
.then((res) => {
console.log(res);
this.bdzOptions = res.data;
console.log(this.title);
if (this.title == "添加主设备") {
console.log(this.formInfo);
this.formInfo.bdzid = this.bdzOptions[0].id;
}
this.getareaListAll();
})
.catch((err) => {
console.log(err); //
});
},
//
changeJg(val) {
console.log(val);
this.formInfo.bdzid = val;
this.getareaListAll();
this.formInfo.jgid = "";
},
//
getareaListAll() {
areaListAllApi({ bdzid: this.formInfo.bdzid })
.then((res) => {
console.log(res);
this.jgOptions = res.data;
console.log(this.title);
if (this.title == "添加主设备") {
console.log(this.formInfo);
this.formInfo.jgid = this.jgOptions[0].id;
this.formInfo.mc = "";
}
})
.catch((err) => {
console.log(err); //
});
},
//
getsblxListAll() {
sblxListAllApi()
.then((res) => {
console.log(res);
this.sblxOptions = res.data;
console.log(this.title);
if (this.title == "添加主设备") {
console.log(this.formInfo);
this.formInfo.lxid = this.sblxOptions[0].id;
}
})
.catch((err) => {
console.log(err); //
});
},
display() {
this.zsbDialogshow = true;
this.getbdzListAll();
this.getsblxListAll();
},
hide() {
this.zsbDialogshow = false;
this.$refs.formInfo.resetFields(); //
},
},
};
</script>
<style lang="less">
.zsbAddBox {
.zsbAddDialogBox {
.el-select {
width: 376px;
}
}
}
</style>

@ -0,0 +1,136 @@
<template>
<div class="zsbBox">
<div class="reportHead">
<h3>主设备管理</h3>
</div>
<div class="page-body">
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
>添加主设备</el-button
>
<div class="zsbTableBox">
<el-table
v-loading="zsbLoading"
:data="zsbTableData"
stripe
border
style="width: 100%"
height="calc(100% - 0px)"
>
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="bdzName" label="所属电站"> </el-table-column>
<el-table-column prop="lxName" label="设备类型"> </el-table-column>
<el-table-column prop="jgName" label="所属间隔"> </el-table-column>
<el-table-column prop="mc" label="设备名称"> </el-table-column>
<el-table-column label="操作" width="200" class-name="editClass">
<template slot-scope="scope">
<el-link
type="primary"
@click="handleEditClick(scope.row)"
size="small"
icon="el-icon-document"
>编辑</el-link
>
<el-link
type="danger"
@click="handleDeleteClick(scope.row)"
size="small"
icon="el-icon-delete"
>删除</el-link
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<addzsbDialog ref="zsbAddRef" :title="title"></addzsbDialog>
</div>
</template>
<script>
import { zsbDeleteApi, zsbListAllApi } from "@/utils/api/index";
import addzsbDialog from "./components/addzsbDialog";
export default {
components: {
addzsbDialog,
},
data() {
return {
zsbLoading: false,
zsbTableData: [],
title: "",
};
},
created() {},
mounted() {
this.getzsbAllList();
},
watch: {},
methods: {
//
getzsbAllList() {
this.zsbLoading = true;
zsbListAllApi()
.then((res) => {
console.log(res);
this.zsbTableData = res.data;
this.zsbLoading = false;
})
.catch((err) => {
console.log(err); //
});
},
//
handleAddClick() {
this.title = "添加主设备";
this.$refs.zsbAddRef.display();
//this.$refs.zsbAddRef.getdataform(null);
},
//
handleEditClick(data) {
this.title = "编辑";
this.$refs.zsbAddRef.display();
this.$refs.zsbAddRef.getdataform(data);
},
//
handleDeleteClick(data) {
this.$confirm("确定要删除记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
zsbDeleteApi({ id: data.id }).then((res) => {
if (res.success) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功",
});
this.getzsbAllList(); //
} else {
this.$message.error(res.data);
}
});
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
.zsbBox {
width: 100%;
height: 100%;
.page-body {
width: calc(100% - 24px);
height: calc(100% - 74px);
padding: 12px;
background: #eee;
.zsbTableBox {
margin-top: 8px;
height: calc(100% - 38px);
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}
}
}
</style>

@ -1,13 +1,42 @@
<template> <template>
<div class="homeBox">首页</div> <div class="homeBox">
<div class="homeLeft">
<div class="pageleftBox">
<!-- <div class="divTop">我是上面</div> -->
<oilChromatography></oilChromatography>
<div class="divcenter">我是上面2</div>
<div class="divBottom">我是上面3</div>
</div>
</div>
<div class="homeCenter">
<div class="pagecenterBox">
<div class="divTop"></div>
<div class="divcenter"></div>
<div class="divBottom"></div>
</div>
</div>
<div class="homeRight">
<div class="pagerightBox">
<div class="divTop"></div>
<div class="divcenter"></div>
<div class="divBottom"></div>
</div>
</div>
</div>
</template> </template>
<script> <script>
// import { // import {
// getTermStatistics, // getTermStatistics,
// } from "@/utils/api/index"; // } from "@/utils/api/index";
// import pageLeft from "./components/pageLeft";
// import pageCenter from "./components/pageCenter";
import oilChromatography from "./oilChromatography/index.vue";
export default { export default {
name: "home", name: "homepage",
components: {
oilChromatography,
},
data() { data() {
return {}; return {};
}, },
@ -19,5 +48,101 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.homeBox { .homeBox {
width: 100%;
height: 100%;
display: flex;
.homeLeft,
.homeRight {
width: 20%;
height: 100%;
}
.homeCenter {
padding: 0px 10px;
flex: 1;
.pagecenterBox {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.divTop,
.divcenter,
.divBottom {
position: relative;
}
.divTop {
height: 380px;
margin-bottom: 10px;
background: rgba(8, 9, 36, 0.28);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: inset 0 4px 44px 0 #106cde;
}
.divcenter {
height: 190px;
margin-bottom: 10px;
background: url(../../assets/card3Bg.png) no-repeat center;
background-size: 100% 100%;
}
.divBottom {
height: 248px;
background: rgba(255, 27, 27, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: inset 0 4px 44px 0 rgba(235, 20, 20, 0.69);
border: 1px solid #ff1b1b;
}
}
}
.pageleftBox {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.divTop,
.divcenter,
.divBottom {
background: url(../../assets/cardBg.png) no-repeat center;
background-size: 100% 100%;
position: relative;
}
.divTop {
height: 280px;
margin-bottom: 10px;
}
.divcenter {
height: 270px;
margin-bottom: 10px;
}
.divBottom {
height: 270px;
}
}
.pagerightBox {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.divcenter,
.divBottom {
background: url(../../assets/cardBg.png) no-repeat center;
background-size: 100% 100%;
position: relative;
}
.divTop {
background: url(../../assets/card2Bg.png) no-repeat center;
background-size: 100% 100%;
height: 280px;
margin-bottom: 10px;
}
.divcenter {
height: 270px;
margin-bottom: 10px;
}
.divBottom {
height: 270px;
}
}
} }
</style> </style>

@ -0,0 +1,63 @@
<template>
<div class="oilChromatographyBox">
<div class="tendencyChartText" @click="tendencyChartChange()"></div>
<h3>{{ pageCardTitle }}</h3>
<div class="cardContent">我是内容</div>
</div>
</template>
<script>
export default {
name: "oil",
data() {
return {
pageCardTitle: "油色谱",
};
},
created() {},
methods: {},
};
</script>
<style lang="less">
.oilChromatographyBox {
background: url(../../../assets/cardBg.png) no-repeat center;
background-size: 100% 100%;
position: relative;
height: 280px;
margin-bottom: 10px;
h3 {
height: 50px;
line-height: 50px;
padding: 0px 60px 0px 20px;
box-sizing: border-box;
color: #03bcff;
font-weight: normal;
text-align: left;
display: flex;
font-size: 16px;
justify-content: space-between;
align-items: center;
}
.tendencyChartText {
writing-mode: vertical-lr;
position: absolute;
right: 8px;
top: 15px;
color: #fff;
font-weight: normal;
font-size: 14px;
line-height: 14px;
letter-spacing: 0px;
text-align: left;
cursor: pointer;
&:hover {
color: #03bcff;
}
}
.cardContent {
padding: 10px 40px 9px 20px;
box-sizing: border-box;
}
}
</style>
Loading…
Cancel
Save