数据联调
parent
2d49a12157
commit
e0c8d07522
File diff suppressed because it is too large
Load Diff
|
|
@ -21,6 +21,7 @@
|
|||
"js-md5": "^0.7.3",
|
||||
"mitt": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"mqtt": "4.0.1",
|
||||
"protobufjs": "^7.2.4",
|
||||
"protobufjs-cli": "^1.1.2",
|
||||
"pushstate-server": "^3.1.0",
|
||||
|
|
|
|||
158
src/App.vue
158
src/App.vue
|
|
@ -17,12 +17,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onUnmounted, reactive } from 'vue'
|
||||
import { onUnmounted, reactive, onMounted } from 'vue'
|
||||
import Header from '@/components/Header.vue'
|
||||
import Footer from '@/components/Footer.vue'
|
||||
import Sidebar from '@/components/Sidebar.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { pathMap, localGet } from '@/utils';
|
||||
import mqtt from 'mqtt/dist/mqtt.min';
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
|
@ -36,7 +37,8 @@ export default {
|
|||
const state = reactive({
|
||||
defaultOpen: ['1', '2', '3', '4'],
|
||||
showMenu: true,
|
||||
currentPath: '/dashboard'
|
||||
currentPath: '/dashboard',
|
||||
client: null
|
||||
})
|
||||
// 监听浏览器原生回退事件
|
||||
if (window.history && window.history.pushState) {
|
||||
|
|
@ -66,6 +68,49 @@ export default {
|
|||
document.title = pathMap[to.name]
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (localGet('token')) {
|
||||
state.client = mqtt.connect('ws://www.shikicc.com', {
|
||||
port: 52194,
|
||||
clientId: new Date(),
|
||||
username: 'hsgy',
|
||||
password: "hsgy123",
|
||||
clean: true,
|
||||
keepalive: 1800
|
||||
});
|
||||
mqttMsg();
|
||||
}
|
||||
})
|
||||
|
||||
const mqttMsg = () => {
|
||||
state.client.on("connect", e => {
|
||||
// qos 是通道 一般有 0，1， 2
|
||||
const url = `iot/push/plc_01`;
|
||||
this.client.subscribe([url], { qos: 2 }, error => {
|
||||
if (!error) {
|
||||
console.log("消息订阅成功！");
|
||||
this.mqttAll();
|
||||
} else {
|
||||
console.log("消息订阅失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 接收消息
|
||||
const mqttAll = () => {
|
||||
this.client.on("message", (topic, message) => {
|
||||
// var data = JSON.parse(message);
|
||||
console.log(message);
|
||||
// if (data) {
|
||||
// if (data.topic === `iot/push/plc_01`) {
|
||||
// var res = data.data;
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
unwatch();
|
||||
})
|
||||
|
|
@ -78,55 +123,66 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main {
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
}
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none!important;
|
||||
}
|
||||
.el-submenu {
|
||||
border-top: 1px solid hsla(0, 0%, 100%, .05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
.el-submenu:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.el-submenu [class^="el-icon-"] {
|
||||
vertical-align: -1px!important;
|
||||
}
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
border-top: 1px solid hsla(0, 0%, 100%, .05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.el-submenu:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.el-submenu [class^="el-icon-"] {
|
||||
vertical-align: -1px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,134 +0,0 @@
|
|||
import {
|
||||
getRequest,
|
||||
postJsonRequest,
|
||||
deleteRequest,
|
||||
putRequest,
|
||||
} from "@/utils/axios";
|
||||
const infoApi = {
|
||||
// 获取设备信息
|
||||
getSys(params) {
|
||||
return getRequest("/info", params);
|
||||
},
|
||||
// 获取网络信息
|
||||
getNet(params) {
|
||||
return getRequest("/net", params);
|
||||
},
|
||||
saveNet(params) {
|
||||
return putRequest("/net", params);
|
||||
},
|
||||
reboot() {
|
||||
return postJsonRequest("/reboot",);
|
||||
},
|
||||
// 透传列表
|
||||
getTc(params) {
|
||||
return getRequest('/tc', params)
|
||||
},
|
||||
// 获取透传类型
|
||||
getSupport(params) {
|
||||
return getRequest('/tc/support', params)
|
||||
},
|
||||
// 获取可用串口列表
|
||||
getFree(params) {
|
||||
return getRequest('/com/free', params)
|
||||
},
|
||||
// 获取支持的通讯驱动
|
||||
getTxSupport(params) {
|
||||
return getRequest('/tx/support', params)
|
||||
},
|
||||
|
||||
// 获取所有串口列表api/com
|
||||
getCom(params) {
|
||||
return getRequest('/com', params)
|
||||
},
|
||||
|
||||
saveTx(params) {
|
||||
return postJsonRequest("/tx", params);
|
||||
},
|
||||
editTx(params) {
|
||||
return putRequest("/tx", params);
|
||||
},
|
||||
// 透传服务启停
|
||||
stopTc(params) {
|
||||
return putRequest("/tc", params);
|
||||
},
|
||||
// 透传服务删除
|
||||
delTc(params) {
|
||||
return deleteRequest("/tc", params);
|
||||
},
|
||||
// 模板列表
|
||||
getMb(params) {
|
||||
return getRequest('/tx/mb/list', params)
|
||||
},
|
||||
// 新增模板
|
||||
addMb(params) {
|
||||
return postJsonRequest('/tx/mb', params)
|
||||
},
|
||||
// 编辑模板
|
||||
editMb(params) {
|
||||
return putRequest('/tx/mb', params)
|
||||
},
|
||||
// 删除模板
|
||||
delMb(params) {
|
||||
return deleteRequest('/tx/mb', params)
|
||||
},
|
||||
// 新增点位
|
||||
addP(params) {
|
||||
return putRequest('/tx/mb', params)
|
||||
},
|
||||
|
||||
// 获取点位
|
||||
getP(params) {
|
||||
return postJsonRequest('/tx/mb/info', params)
|
||||
},
|
||||
// 获取设备列表
|
||||
getSet(params) {
|
||||
return postJsonRequest('/tx/info', params)
|
||||
},
|
||||
// 新增设备
|
||||
addSet(params) {
|
||||
return putRequest('/tx/device', params)
|
||||
},
|
||||
// 通讯列表
|
||||
getTx(params) {
|
||||
return getRequest('/tx/list', params)
|
||||
},
|
||||
// 新增通讯列表
|
||||
saveTx(params) {
|
||||
return postJsonRequest("/tx", params);
|
||||
},
|
||||
|
||||
// 通讯服务启用,停用
|
||||
changeStatus(params) {
|
||||
return postJsonRequest(`/tx/${params.url}/${params.name}`, params);
|
||||
},
|
||||
|
||||
// 删除通讯
|
||||
delTx(params) {
|
||||
return deleteRequest(`/tx`, params);
|
||||
},
|
||||
// 获取上报列表
|
||||
getSc(params) {
|
||||
return getRequest('/sb/list', params)
|
||||
},
|
||||
// 获取上报驱动
|
||||
getQuDong(params) {
|
||||
return getRequest('/sb/support', params)
|
||||
},
|
||||
// 新增上报
|
||||
saveTx(params) {
|
||||
return postJsonRequest("/sb", params);
|
||||
},
|
||||
// 编辑通讯
|
||||
updateTx(params) {
|
||||
return putRequest('/sb', params);
|
||||
},
|
||||
// 上报启停
|
||||
stopSc(params) {
|
||||
return putRequest("/sc", params);
|
||||
},
|
||||
// 删除上报
|
||||
delSc(params) {
|
||||
return deleteRequest("/sb", params);
|
||||
},
|
||||
};
|
||||
export default infoApi;
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
const myApi = {
|
||||
// 登录
|
||||
login(params = {}) {
|
||||
return postJsonRequest('/login', params);
|
||||
return postJsonRequest('/user/v1/login', params);
|
||||
},
|
||||
// 修改密码
|
||||
editPass(params) {
|
||||
|
|
@ -16,7 +16,26 @@ import {
|
|||
// 退出
|
||||
logOut() {
|
||||
return postJsonRequest('/logout');
|
||||
},
|
||||
// 获取图表数据
|
||||
getCommonHistogram(params) {
|
||||
return getRequest('/plc/v1/commonHistogram', params)
|
||||
},
|
||||
|
||||
// // 获取当前设备信息
|
||||
getBaseInfo(params) {
|
||||
return getRequest('/plc/v1/info', params)
|
||||
},
|
||||
|
||||
// 上传
|
||||
upload(params) {
|
||||
return postJsonRequest('/common/v1/upload', params)
|
||||
},
|
||||
// 查询
|
||||
getInfo() {
|
||||
return getRequest('/common/v1/info')
|
||||
}
|
||||
|
||||
}
|
||||
export default myApi;
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="echart-div">
|
||||
<div class="top-title">
|
||||
<div class="title">{{echartData.title}}</div>
|
||||
<div class="title">{{ echartData.title }}</div>
|
||||
</div>
|
||||
<div class="echart" :id="echartData.id">
|
||||
</div>
|
||||
|
|
@ -13,6 +13,7 @@ import moment from "moment";
|
|||
import { useStore } from "vuex";
|
||||
import * as echarts from "echarts";
|
||||
import bus from '../utils/bus.js'
|
||||
import myApi from "@/api/myApi.js";
|
||||
|
||||
export default {
|
||||
name: "LineEchart",
|
||||
|
|
@ -27,114 +28,32 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
console.log(12)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
});
|
||||
const getEchart = () => {
|
||||
if (store.state.selectDate === 1) {
|
||||
data = {
|
||||
legend: props.echartData.legend,
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
|
||||
2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
|
||||
],
|
||||
type: ["bar"],
|
||||
};
|
||||
} else if (store.state.selectDate === 2) {
|
||||
data = {
|
||||
legend: props.echartData.legend,
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7
|
||||
],
|
||||
type: ["bar"],
|
||||
};
|
||||
} else if (store.state.selectDate === 0) {
|
||||
var data = {
|
||||
legend: props.echartData.legend,
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
|
||||
2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
|
||||
],
|
||||
type: ["bar"],
|
||||
};
|
||||
})
|
||||
|
||||
|
||||
const getEchart = async () => {
|
||||
var xData = [];
|
||||
var Values = [];
|
||||
const param = {
|
||||
filed: props.echartData.filed,
|
||||
dataType: store.state.selectDate
|
||||
}
|
||||
const res = await myApi.getCommonHistogram(param);
|
||||
res.data.forEach(ele => {
|
||||
xData.push(ele.dateTime);
|
||||
Values.push(ele.dataValue)
|
||||
});
|
||||
|
||||
data = {
|
||||
legend: props.echartData.legend,
|
||||
color: props.echartData.color,
|
||||
xData: xData,
|
||||
Values: Values,
|
||||
type: ["bar"],
|
||||
};
|
||||
let dom = document.getElementById(props.echartData.id);
|
||||
if (dom) {
|
||||
myChart = echarts.init(dom);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, toRefs } from "vue";
|
||||
import { nextTick, onMounted, reactive, toRefs } from "vue";
|
||||
import {useStore} from 'vuex'
|
||||
import { useRouter } from "vue-router";
|
||||
import bus from '../utils/bus.js'
|
||||
|
|
@ -34,13 +34,19 @@
|
|||
});
|
||||
onMounted(() => {
|
||||
if (props.pactiveI) {
|
||||
state.activeI = props.pactiveI;
|
||||
go(props.pactiveI);
|
||||
} else {
|
||||
go(0);
|
||||
}
|
||||
});
|
||||
|
||||
const go = (val) => {
|
||||
state.activeI = val;
|
||||
store.commit("changeSelectDate", val);
|
||||
bus.emit('foo', val);
|
||||
nextTick(() => {
|
||||
bus.emit('foo', val);
|
||||
})
|
||||
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
|
|
|
|||
|
|
@ -49,26 +49,54 @@ export default {
|
|||
title: "UF产水流量-柱状图",
|
||||
legend: ["UF产水流量-柱状图"],
|
||||
color: ["#6fdbce", "#eafbf7"],
|
||||
filed: 'VD2716'
|
||||
},
|
||||
{
|
||||
id: "echart1",
|
||||
title: "自来水前端流量-柱状图",
|
||||
legend: ["自来水前端流量-柱状图"],
|
||||
color: ["#308286", "#eafbf7"],
|
||||
filed: 'VD2816'
|
||||
},
|
||||
{
|
||||
id: "echart2",
|
||||
title: "供水流量-柱状图",
|
||||
legend: ["供水流量-柱状图"],
|
||||
color: ["#308286", "#eafbf7"],
|
||||
filed: 'VD2866'
|
||||
},
|
||||
{
|
||||
id: "echart3",
|
||||
title: "自来水后端流量-柱状图",
|
||||
legend: ["自来水后端流量-柱状图"],
|
||||
color: ["#62d3ff", "#eafbf7"],
|
||||
filed: 'VD2766'
|
||||
},
|
||||
],
|
||||
baseData: {
|
||||
vd500: 2,
|
||||
vd500Max: 12,
|
||||
vd500Min: 0.8,
|
||||
vd504: 3,
|
||||
vd504Max: 11,
|
||||
vd504Min: 0.4,
|
||||
vd2700: 13.4,
|
||||
vd2716: 12.99,
|
||||
vd2800: 12.3,
|
||||
vd2816: 4.56,
|
||||
vd2850: 12.3,
|
||||
vd2866: 34.5,
|
||||
vd2750: 15.4,
|
||||
vd2766: 7.89,
|
||||
vd2600: 12,
|
||||
vd2610: 3.23,
|
||||
vd2620: 23.4,
|
||||
vd2630: 12.3,
|
||||
vd2500: 12,
|
||||
vd2510: 3.23,
|
||||
vd2520: 23.4,
|
||||
vd2530: 12.3
|
||||
},
|
||||
dataList: [
|
||||
{
|
||||
title: "UF产水瞬时流量:m3/H:",
|
||||
|
|
@ -78,6 +106,7 @@ export default {
|
|||
color: "#6fdbce",
|
||||
label: "Q1",
|
||||
value: "20",
|
||||
key: 'vd2700'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -89,6 +118,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Q2",
|
||||
value: "80",
|
||||
key: 'vd2716'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -100,6 +130,7 @@ export default {
|
|||
color: "#308286",
|
||||
label: "Q3",
|
||||
value: "80",
|
||||
key: 'vd2800'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -111,6 +142,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Q4",
|
||||
value: "80",
|
||||
key: 'vd2816'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -122,6 +154,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Q5",
|
||||
value: "80",
|
||||
key: 'vd2850'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -133,6 +166,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Q6",
|
||||
value: "80",
|
||||
key: 'vd2866'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -144,23 +178,30 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Q7",
|
||||
value: "10",
|
||||
key: 'vd2750'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "自来水后端累计弃流量:m3",
|
||||
title: "自来水后端累计流量:m3",
|
||||
data: [
|
||||
{
|
||||
id: "8",
|
||||
color: "#00baff",
|
||||
label: "Q8",
|
||||
value: "40",
|
||||
key: 'vd2766'
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
onMounted(async () => {
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
console.log(ele.data[0].value);
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ export default {
|
|||
});
|
||||
const getUserInfo = async () => {};
|
||||
const logout = async () => {
|
||||
localRemove("token");
|
||||
router.push("/login");
|
||||
};
|
||||
const back = () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<el-image
|
||||
:src="`${realSrc}`"
|
||||
fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`"
|
||||
:preview-src-list="realSrcList"
|
||||
:preview-teleported="true"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon><picture-filled /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isExternal } from "@/utils/validate";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
|
||||
const realSrc = computed(() => {
|
||||
if (!props.src) {
|
||||
return;
|
||||
}
|
||||
let real_src = props.src.split(",")[0];
|
||||
if (isExternal(real_src)) {
|
||||
return real_src;
|
||||
}
|
||||
return import.meta.env.VITE_APP_BASE_API + real_src;
|
||||
});
|
||||
|
||||
const realSrcList = computed(() => {
|
||||
if (!props.src) {
|
||||
return;
|
||||
}
|
||||
let real_src_list = props.src.split(",");
|
||||
let srcList = [];
|
||||
real_src_list.forEach(item => {
|
||||
if (isExternal(item)) {
|
||||
return srcList.push(item);
|
||||
}
|
||||
return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
|
||||
});
|
||||
return srcList;
|
||||
});
|
||||
|
||||
const realWidth = computed(() =>
|
||||
typeof props.width == "string" ? props.width : `${props.width}px`
|
||||
);
|
||||
|
||||
const realHeight = computed(() =>
|
||||
typeof props.height == "string" ? props.height : `${props.height}px`
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
:deep(.el-image__inner) {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
:deep(.image-slot) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload :auto-upload="false" list-type="picture-card" :limit="limit" ref="imageUpload"
|
||||
:before-remove="handleDelete" :show-file-list="true" :file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }" :on-change="getFile">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
|
||||
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs, computed, watch } from "vue";
|
||||
export default {
|
||||
name: "home",
|
||||
props: {
|
||||
modelValue: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"],
|
||||
},
|
||||
},
|
||||
|
||||
setup(props, ctx) {
|
||||
const number = ref(0);
|
||||
const uploadList = ref([]);
|
||||
const fileList = ref([]);
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: ''
|
||||
});
|
||||
watch(() => props.modelValue, val => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = [val];
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
item = { name: item, url: item };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
|
||||
|
||||
// 删除图片
|
||||
function handleDelete(file) {
|
||||
ctx.emit("changeImage", '');
|
||||
}
|
||||
|
||||
// 预览
|
||||
function handlePictureCardPreview(file) {
|
||||
state.dialogImageUrl = file.url;
|
||||
state.dialogVisible = true;
|
||||
}
|
||||
const getFile = (file, fileList) => {
|
||||
getBase64(file.raw).then(res => {
|
||||
ctx.emit("changeImage", res);
|
||||
});
|
||||
}
|
||||
|
||||
const getBase64 = (file) => {
|
||||
return new Promise(function (resolve, reject) {
|
||||
let reader = new FileReader();
|
||||
let imgResult = "";
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function () {
|
||||
imgResult = reader.result;
|
||||
};
|
||||
reader.onerror = function (error) {
|
||||
reject(error);
|
||||
};
|
||||
reader.onloadend = function () {
|
||||
resolve(imgResult);
|
||||
};
|
||||
});
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
handlePictureCardPreview,
|
||||
handleDelete,
|
||||
fileList,
|
||||
getFile
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-upload--picture-card {
|
||||
width: 148px !important;
|
||||
height: 148px !important;
|
||||
line-height: 55px !important;
|
||||
}
|
||||
|
||||
.el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 148px !important;
|
||||
height: 148px !important;
|
||||
}
|
||||
|
||||
:deep(.hide .el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,48 +13,48 @@
|
|||
<font><span class="font26">0.67</span>kg</font>
|
||||
</div>
|
||||
<div>
|
||||
<p>原水箱液位：<span class="font26">0.39</span>m</p>
|
||||
<p>历史最高：<span class="font26">0.50</span>m</p>
|
||||
<p>历史最低：<span class="font26">0.24</span>m</p>
|
||||
<p>原水箱液位：<span class="font26">{{ baseData.vd500.toFixed(2) }}</span>m</p>
|
||||
<p>历史最高：<span class="font26">{{ baseData.vd500Max.toFixed(2) }}</span>m</p>
|
||||
<p>历史最低：<span class="font26">{{ baseData.vd500Min.toFixed(2) }}</span>m</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>净水箱液位：<span class="font26">0.81</span>m</p>
|
||||
<p>历史最高：<span class="font26">1.63</span>m</p>
|
||||
<p>历史最低：<span class="font26">0.48</span>m</p>
|
||||
<p>净水箱液位：<span class="font26">{{ baseData.vd504.toFixed(2) }}</span>m</p>
|
||||
<p>历史最高：<span class="font26">{{ baseData.vd504Max.toFixed(2) }}</span>m</p>
|
||||
<p>历史最低：<span class="font26">{{ baseData.vd504Min.toFixed(2) }}</span>m</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>UF产水</p>
|
||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||
<p>瞬时流量：<span class="font26">{{ baseData.vd2700.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">{{ baseData.vd2716.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>自来水前端</p>
|
||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||
<p>瞬时流量：<span class="font26">{{ baseData.vd2800.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">{{ baseData.vd2816.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div >
|
||||
<p>供水</p>
|
||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||
<p>瞬时流量：<span class="font26">{{ baseData.vd2850.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">{{ baseData.vd2866.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div >
|
||||
<p>自来水后端</p>
|
||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||
<p>瞬时流量：<span class="font26">{{ baseData.vd2750.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量：<span class="font26">{{ baseData.vd2766.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>原水水质</p>
|
||||
<p>余氯：<span class="font26">0.00</span> mg/L</p>
|
||||
<p>浊度：<span class="font26">1.63</span> mg/L</p>
|
||||
<p>氨氮：<span class="font26">1.41</span> mg/L</p>
|
||||
<p>COD：<span class="font26">4.80</span> mg/L</p>
|
||||
<p>余氯：<span class="font26">{{ baseData.vd2600.toFixed(2) }}</span> mg/L</p>
|
||||
<p>浊度：<span class="font26">{{ baseData.vd2610.toFixed(2) }}</span> mg/L</p>
|
||||
<p>氨氮：<span class="font26">{{ baseData.vd2620.toFixed(2) }}</span> mg/L</p>
|
||||
<p>COD：<span class="font26">{{ baseData.vd2630.toFixed(2) }}</span> mg/L</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>净水水质</p>
|
||||
<p>余氯：<span class="font26">-0.73</span> mg/L</p>
|
||||
<p>浊度：<span class="font26">3.56</span> mg/L</p>
|
||||
<p>氨氮：<span class="font26">41.89</span> mg/L</p>
|
||||
<p>COD：<span class="font26">3.53</span> mg/L</p>
|
||||
<p>余氯：<span class="font26">{{ baseData.vd2500.toFixed(2) }}</span> mg/L</p>
|
||||
<p>浊度：<span class="font26">{{ baseData.vd2510.toFixed(2) }}</span> mg/L</p>
|
||||
<p>氨氮：<span class="font26">{{ baseData.vd2520.toFixed(2) }}</span> mg/L</p>
|
||||
<p>COD：<span class="font26">{{ baseData.vd2530.toFixed(2) }}</span> mg/L</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -66,13 +66,49 @@
|
|||
<script>
|
||||
import Menus from "@/components/Menus.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
import myApi from "@/api/myApi.js";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
Menus,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
const state = reactive({
|
||||
baseData: {
|
||||
vd500: 2,
|
||||
vd500Max: 12,
|
||||
vd500Min: 0.8,
|
||||
vd504: 3,
|
||||
vd504Max: 11,
|
||||
vd504Min: 0.4,
|
||||
vd2700: 13.4,
|
||||
vd2716: 12.99,
|
||||
vd2800: 12.3,
|
||||
vd2816: 4.56,
|
||||
vd2850: 12.3,
|
||||
vd2866: 34.5,
|
||||
vd2750: 15.4,
|
||||
vd2766: 7.89,
|
||||
vd2600: 12,
|
||||
vd2610: 3.23,
|
||||
vd2620: 23.4,
|
||||
vd2630: 12.3,
|
||||
vd2500: 12,
|
||||
vd2510: 3.23,
|
||||
vd2520: 23.4,
|
||||
vd2530: 12.3
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
getBaseInfo();
|
||||
})
|
||||
const getBaseInfo = async () => {
|
||||
const res = await myApi.getBaseInfo();
|
||||
state.baseData = res.data;
|
||||
}
|
||||
return {
|
||||
...toRefs(state)
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ import { onMounted, reactive, toRefs, watch,defineExpose } from "vue";
|
|||
import moment from "moment";
|
||||
import { useStore } from "vuex";
|
||||
import * as echarts from "echarts";
|
||||
import bus from '../utils/bus.js'
|
||||
import bus from '../utils/bus.js';
|
||||
import myApi from "@/api/myApi.js";
|
||||
export default {
|
||||
name: "LineEchart",
|
||||
props: {
|
||||
|
|
@ -29,214 +30,27 @@ export default {
|
|||
bus.on('foo', e => {
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
});
|
||||
const getEchart = () => {
|
||||
if (store.state.selectTab === 'pure') {
|
||||
if (store.state.selectDate === 1) {
|
||||
data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
|
||||
2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
} else if (store.state.selectDate === 2) {
|
||||
data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
],
|
||||
Values: [
|
||||
4.3, 1.3, 5.3, 3, 1.3, 2.3, 3.3, 4, 4, 5, 3, 1
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
} else if (store.state.selectDate === 0) {
|
||||
var data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
|
||||
2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
}
|
||||
} else {
|
||||
if (store.state.selectDate === 1) {
|
||||
data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
],
|
||||
Values: [
|
||||
8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 5, 4, 5, 6, 7,6, 7, 8.3,2.3, 5.3, 8.3, 5, 2.3, 5.3,
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
} else if (store.state.selectDate === 2) {
|
||||
data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
],
|
||||
Values: [
|
||||
5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4,
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
} else if (store.state.selectDate === 0) {
|
||||
var data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
Values: [
|
||||
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5, 2.3, 5.3
|
||||
],
|
||||
type: ["line"],
|
||||
};
|
||||
}
|
||||
const getEchart = async () => {
|
||||
var xData = [];
|
||||
var Values = [];
|
||||
const param = {
|
||||
filed: props.echartData.filed,
|
||||
dataType: store.state.selectDate
|
||||
}
|
||||
const res = await myApi.getCommonHistogram(param);
|
||||
res.data.forEach(ele => {
|
||||
xData.push(ele.dateTime);
|
||||
Values.push(ele.dataValue)
|
||||
});
|
||||
data = {
|
||||
legend: {},
|
||||
color: props.echartData.color,
|
||||
xData: xData,
|
||||
Values: Values,
|
||||
type: ["line"],
|
||||
};
|
||||
|
||||
let dom = document.getElementById(props.echartData.id);
|
||||
if (dom) {
|
||||
myChart = echarts.init(dom);
|
||||
|
|
@ -329,24 +143,24 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
symbol: ["none", "none"], // 标线两端的样式
|
||||
data: [
|
||||
{
|
||||
yAxis: 20,
|
||||
},
|
||||
// { yAxis: 10 },
|
||||
],
|
||||
lineStyle: {
|
||||
color: "red",
|
||||
width: 2,
|
||||
},
|
||||
label: {
|
||||
position: "end", // 表现内容展示的位置
|
||||
formatter: props.echartData.title + "限定值", // 标线展示的内容
|
||||
color: "#8C8C8C", // 展示内容颜色
|
||||
},
|
||||
},
|
||||
// markLine: {
|
||||
// symbol: ["none", "none"], // 标线两端的样式
|
||||
// data: [
|
||||
// {
|
||||
// yAxis: 20,
|
||||
// },
|
||||
// // { yAxis: 10 },
|
||||
// ],
|
||||
// lineStyle: {
|
||||
// color: "red",
|
||||
// width: 2,
|
||||
// },
|
||||
// label: {
|
||||
// position: "end", // 表现内容展示的位置
|
||||
// formatter: props.echartData.title + "限定值", // 标线展示的内容
|
||||
// color: "#8C8C8C", // 展示内容颜色
|
||||
// },
|
||||
// },
|
||||
}
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
|
|
@ -44,19 +44,46 @@ export default {
|
|||
Date
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
baseData: {
|
||||
vd500: 2,
|
||||
vd500Max: 12,
|
||||
vd500Min: 0.8,
|
||||
vd504: 3,
|
||||
vd504Max: 11,
|
||||
vd504Min: 0.4,
|
||||
vd2700: 13.4,
|
||||
vd2716: 12.99,
|
||||
vd2800: 12.3,
|
||||
vd2816: 4.56,
|
||||
vd2850: 12.3,
|
||||
vd2866: 34.5,
|
||||
vd2750: 15.4,
|
||||
vd2766: 7.89,
|
||||
vd2600: 12,
|
||||
vd2610: 3.23,
|
||||
vd2620: 23.4,
|
||||
vd2630: 12.3,
|
||||
vd2500: 12,
|
||||
vd2510: 3.23,
|
||||
vd2520: 23.4,
|
||||
vd2530: 12.3
|
||||
},
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "原水箱液位-柱状图",
|
||||
legend: ['原水箱柱状图'],
|
||||
color: ["#6fdbce", "#eafbf7"],
|
||||
filed: 'VD500'
|
||||
},
|
||||
{
|
||||
id: "echart1",
|
||||
title: "净水箱液位-柱状图",
|
||||
legend: ['净水箱柱状图'],
|
||||
color: ["#308286", "#eafbf7"],
|
||||
filed: 'VD504'
|
||||
}
|
||||
],
|
||||
olddataList: [
|
||||
|
|
@ -68,6 +95,7 @@ export default {
|
|||
color: "#6fdbce",
|
||||
label: "Q1",
|
||||
value: "20",
|
||||
key: 'vd500'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -79,6 +107,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Max",
|
||||
value: "80",
|
||||
key: 'vd500Max'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -90,6 +119,7 @@ export default {
|
|||
color: "#308286",
|
||||
label: "Min",
|
||||
value: "80",
|
||||
key: 'vd500Min'
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -103,6 +133,7 @@ export default {
|
|||
color: "#6fdbce",
|
||||
label: "Q2",
|
||||
value: "20",
|
||||
key: 'vd504'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -114,6 +145,7 @@ export default {
|
|||
color: "#00baff",
|
||||
label: "Max",
|
||||
value: "80",
|
||||
key: 'vd504Max'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -124,14 +156,21 @@ export default {
|
|||
id: "3",
|
||||
color: "#308286",
|
||||
label: "Min",
|
||||
value: "80",
|
||||
value: "9",
|
||||
key: 'vd504Min'
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
});
|
||||
onMounted(async () => { });
|
||||
|
||||
onMounted(() => {
|
||||
state.olddataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
state.puredataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
})
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
|
|
@ -164,6 +203,7 @@ export default {
|
|||
.right-div {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
|
||||
.height46 {
|
||||
height: 46%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,17 +3,12 @@
|
|||
<span>{{ itemData.label }}</span>
|
||||
<!-- <div :id="'process' + itemData.id" class="process-echart"></div> -->
|
||||
<div class="process-echart">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="itemData.value"
|
||||
:color="itemData.color"
|
||||
/>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="itemData.value" :color="itemData.color" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs,watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Process",
|
||||
|
|
@ -28,6 +23,15 @@ export default {
|
|||
onMounted(() => {
|
||||
getEchart();
|
||||
});
|
||||
// watch(() => props.itemData, val => {
|
||||
// if (val) {
|
||||
// console.log(123 ,val);
|
||||
// nextTick(() => {
|
||||
// getEchart();
|
||||
// })
|
||||
// }
|
||||
// }, { deep: true, immediate: true });
|
||||
|
||||
const getEchart = () => {
|
||||
data = {};
|
||||
let dom = document.getElementById("process" + props.itemData.id);
|
||||
|
|
@ -167,6 +171,7 @@ export default {
|
|||
height: 50px;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
.process-echart {
|
||||
width: 83%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,17 @@
|
|||
<template>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="原水水质" name="old" key="old">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="净水水质" name="pure" key="pure">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="content-water">
|
||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="原水水质" name="old" key="old">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="净水水质" name="pure" key="pure">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="content-water">
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
<div class="flow-container">
|
||||
<div class="left-div">
|
||||
<div
|
||||
v-for="(item, index) of dataList"
|
||||
:key="index"
|
||||
:class="'div' + index"
|
||||
class="process-content"
|
||||
>
|
||||
<div v-for="(item, index) of dataList" :key="index" :class="'div' + index" class="process-content">
|
||||
<!-- <div>{{ item.title }}</div> -->
|
||||
<div v-for="(it, i) of item.data" :key="i">
|
||||
<Process :itemData="it"></Process>
|
||||
|
|
@ -29,12 +19,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right-div">
|
||||
<div
|
||||
v-for="(item, index) of listData"
|
||||
:key="index"
|
||||
class="echart-content"
|
||||
>
|
||||
<LineEchart :echartData="item" :activeName="activeName" ref="refSon"/>
|
||||
<div v-for="(item, index) of listData" :key="index" class="echart-content">
|
||||
<LineEchart :echartData="item" :activeName="activeName" ref="refSon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,11 +28,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
|
||||
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
|
||||
import LineEchart from "@/components/LineEchart.vue";
|
||||
import Process from "@/components/Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
import {useStore} from 'vuex';
|
||||
import { useStore } from 'vuex';
|
||||
import bus from '../utils/bus.js'
|
||||
export default {
|
||||
name: "Flow",
|
||||
|
|
@ -59,26 +45,54 @@ export default {
|
|||
const refSon = ref(null);
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
baseData: {
|
||||
vd500: 2,
|
||||
vd500Max: 12,
|
||||
vd500Min: 0.8,
|
||||
vd504: 3,
|
||||
vd504Max: 11,
|
||||
vd504Min: 0.4,
|
||||
vd2700: 13.4,
|
||||
vd2716: 12.99,
|
||||
vd2800: 12.3,
|
||||
vd2816: 4.56,
|
||||
vd2850: 12.3,
|
||||
vd2866: 34.5,
|
||||
vd2750: 15.4,
|
||||
vd2766: 7.89,
|
||||
vd2600: 15,
|
||||
vd2610: 13.23,
|
||||
vd2620: 43.4,
|
||||
vd2630: 62.3,
|
||||
vd2500: 12,
|
||||
vd2510: 3.23,
|
||||
vd2520: 23.4,
|
||||
vd2530: 12.3
|
||||
},
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "余氯查询",
|
||||
color: ['#6fdbce']
|
||||
color: ['#6fdbce'],
|
||||
filed: 'VD2600'
|
||||
},
|
||||
{
|
||||
id: "echart1",
|
||||
title: "浊度查询",
|
||||
color: ['#b7e707']
|
||||
color: ['#b7e707'],
|
||||
filed: 'VD2610'
|
||||
},
|
||||
{
|
||||
id: "echart2",
|
||||
title: "氨氮查询",
|
||||
color: ['#f58383']
|
||||
color: ['#f58383'],
|
||||
filed: 'VD2620'
|
||||
},
|
||||
{
|
||||
id: "echart3",
|
||||
title: "COD查询",
|
||||
color: ['#00ffff']
|
||||
color: ['#00ffff'],
|
||||
filed: 'VD2630'
|
||||
},
|
||||
],
|
||||
dataList: [
|
||||
|
|
@ -90,6 +104,8 @@ export default {
|
|||
color: "#6fdbce",
|
||||
label: "余氯: ",
|
||||
value: "20",
|
||||
key: 'vd2600',
|
||||
key1: 'vd2500'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -101,6 +117,8 @@ export default {
|
|||
color: "#b7e707",
|
||||
label: "浊度:",
|
||||
value: "80",
|
||||
key: 'vd2610',
|
||||
key1: 'vd2510'
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
@ -112,6 +130,8 @@ export default {
|
|||
color: "#f58383",
|
||||
label: "氨氮: ",
|
||||
value: "80",
|
||||
key: 'vd2620',
|
||||
key1: 'vd2520'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -123,6 +143,8 @@ export default {
|
|||
color: "#00ffff",
|
||||
label: "COD: ",
|
||||
value: "80",
|
||||
key: 'vd2630',
|
||||
key1: 'vd2530'
|
||||
}
|
||||
],
|
||||
}
|
||||
|
|
@ -131,8 +153,30 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
store.commit("changeSelectTab", "old");
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
});
|
||||
const handleClick = (tab) => {
|
||||
if (tab.props.name == 'old') {
|
||||
state.listData[0].filed = 'VD2600';
|
||||
state.listData[1].filed = 'VD2610';
|
||||
state.listData[2].filed = 'VD2620';
|
||||
state.listData[3].filed = 'VD2630';
|
||||
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
} else {
|
||||
state.listData[0].filed = 'VD2500';
|
||||
state.listData[1].filed = 'VD2510';
|
||||
state.listData[2].filed = 'VD2520';
|
||||
state.listData[3].filed = 'VD2530';
|
||||
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key1]).toFixed(2);
|
||||
})
|
||||
}
|
||||
console.log(tab.props.name);
|
||||
store.commit("changeSelectTab", tab.props.name);
|
||||
bus.emit('foo');
|
||||
|
|
@ -152,14 +196,17 @@ export default {
|
|||
width: 100% !important;
|
||||
height: 95% !important;
|
||||
}
|
||||
|
||||
/* .el-tabs__content{
|
||||
width: 100% !important;
|
||||
height: 95% !important;
|
||||
} */
|
||||
.el-tab-pane, .el-tabs {
|
||||
.el-tab-pane,
|
||||
.el-tabs {
|
||||
width: 100% !important;
|
||||
/* height: 100% !important; */
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
|
|
@ -172,12 +219,14 @@ export default {
|
|||
justify-content: end;
|
||||
height: 3%;
|
||||
}
|
||||
|
||||
.flow-container {
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.right-div {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
|
|
@ -186,11 +235,13 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.echart-content {
|
||||
width: 100%;
|
||||
height: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-div {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -99,15 +99,15 @@ s {
|
|||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.el-upload--picture-card {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
line-height: 55px !important;
|
||||
}
|
||||
.el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
}
|
||||
// .el-upload--picture-card {
|
||||
// width: 48px !important;
|
||||
// height: 48px !important;
|
||||
// line-height: 55px !important;
|
||||
// }
|
||||
// .el-upload-list--picture-card .el-upload-list__item {
|
||||
// width: 48px !important;
|
||||
// height: 48px !important;
|
||||
// }
|
||||
.el-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ axios.interceptors.response.use(
|
|||
(error) => {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.error(error || "401 Unauthorized");
|
||||
router.push({ path: "/login" });
|
||||
// router.push({ path: "/login" });
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,46 +1,14 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="180px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="项目名称配置：" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="180px" class="demo-ruleForm">
|
||||
<el-form-item label="项目名称配置：" prop="title">
|
||||
<el-input v-model="ruleForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登陆背景配置：" prop="loginImage">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img
|
||||
v-if="ruleForm.loginImage"
|
||||
:src="ruleForm.loginImage"
|
||||
class="avatar"
|
||||
/>
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-form-item label="登陆背景配置：" prop="loginImg">
|
||||
<ImageUpload :limit="1" :modelValue="ruleForm.loginImg" :fileType='["png", "jpg", "jpeg"]' @changeImage="changeImage1"></ImageUpload>
|
||||
</el-form-item>
|
||||
<el-form-item label="主页背景配置：" prop="bgImage">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img
|
||||
v-if="ruleForm.bgImage"
|
||||
:src="ruleForm.bgImage"
|
||||
class="avatar"
|
||||
/>
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-form-item label="Logo配置：" prop="logoImg">
|
||||
<ImageUpload :limit="1" :modelValue="ruleForm.logoImg" :fileType='["png", "jpg", "jpeg"]' @changeImage="changeImage"></ImageUpload>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm()"> 提交 </el-button>
|
||||
|
|
@ -53,21 +21,27 @@
|
|||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import { localSet,localGet } from '@/utils'
|
||||
import { localSet, localGet } from '@/utils';
|
||||
import ImageUpload from '@/components/ImageUpload.vue';
|
||||
import myApi from "@/api/myApi.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
name: "home",
|
||||
components: {
|
||||
ImageUpload
|
||||
},
|
||||
setup() {
|
||||
const ruleFormRef = ref(null);
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
name: '',
|
||||
loginImage: "",
|
||||
bgImage: "",
|
||||
title: '',
|
||||
loginImg: "",
|
||||
logoImg: "",
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入项目名称",
|
||||
|
|
@ -75,15 +49,30 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
fileList: []
|
||||
});
|
||||
onMounted(() => {
|
||||
state.ruleForm.name = localGet('projectName') || '世博浦西区活水公园';
|
||||
onMounted(async () => {
|
||||
const res = await myApi.getInfo();
|
||||
state.ruleForm.title = res.data.title || '世博浦西区活水公园';
|
||||
state.ruleForm.loginImg = res.data.loginImg;
|
||||
state.ruleForm.logoImg = res.data.logoImg;
|
||||
})
|
||||
|
||||
const changeImage= (val) => {
|
||||
state.ruleForm.logoImg = val;
|
||||
}
|
||||
const changeImage1= (val) => {
|
||||
state.ruleForm.loginImg = val;
|
||||
}
|
||||
const submitForm = async () => {
|
||||
ruleFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
localSet('projectName', state.ruleForm.name);
|
||||
router.go(0);
|
||||
const res = await myApi.upload(state.ruleForm);
|
||||
if(res.success) {
|
||||
ElMessage.success('请求成功');
|
||||
localSet('projectName', state.ruleForm.title);
|
||||
router.go(0);
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
|
|
@ -94,6 +83,8 @@ export default {
|
|||
...toRefs(state),
|
||||
submitForm,
|
||||
ruleFormRef,
|
||||
changeImage,
|
||||
changeImage1
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
@ -107,6 +98,7 @@ export default {
|
|||
// border: 1px solid rgb(180, 20, 180);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.avatar-uploader {
|
||||
::v-deep .el-upload {
|
||||
border: 1px dashed #99acb0;
|
||||
|
|
@ -115,6 +107,7 @@ export default {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .el-upload:hover {
|
||||
border-color: #99acb0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,26 @@
|
|||
<template>
|
||||
<div class="login-body">
|
||||
<div class="login-body" :style="{
|
||||
backgroundImage: `url(${loginImg})`,
|
||||
}">
|
||||
<div class="login-container">
|
||||
<div class="head">
|
||||
<!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
|
||||
<div class="name">
|
||||
<div class="title">{{projectName}}</div>
|
||||
<div class="title">{{ projectName }}</div>
|
||||
<!-- <div class="tips">Vue3.0 后台管理系统</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
:model="ruleForm"
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
>
|
||||
<el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="ruleForm.username"
|
||||
autocomplete="off"
|
||||
@keyup.enter="submitForm"
|
||||
></el-input>
|
||||
<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model.trim="ruleForm.password"
|
||||
autocomplete="off"
|
||||
@keyup.enter="submitForm"
|
||||
></el-input>
|
||||
<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off"
|
||||
@keyup.enter="submitForm"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
|
||||
<el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm"
|
||||
>立即登录</el-button
|
||||
>
|
||||
<el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm">立即登录</el-button>
|
||||
<!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -54,6 +39,7 @@ export default {
|
|||
const loginForm = ref(null);
|
||||
const state = reactive({
|
||||
projectName: "",
|
||||
loginImg: "",
|
||||
ruleForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
|
|
@ -69,18 +55,21 @@ export default {
|
|||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
state.projectName = localGet("projectName") || "世博浦西区活水公园";
|
||||
onMounted(async () => {
|
||||
const res = await myApi.getInfo();
|
||||
state.projectName = res.data.title || '世博浦西区活水公园';
|
||||
state.loginImg = res.data.loginImg;
|
||||
|
||||
});
|
||||
const submitForm = async () => {
|
||||
loginForm.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const param = {
|
||||
userName: state.ruleForm.username || "",
|
||||
passwordMd5: md5(state.ruleForm.password),
|
||||
account: state.ruleForm.username || "",
|
||||
pwd: state.ruleForm.password,
|
||||
};
|
||||
// const res = await myApi.login(param);
|
||||
localSet("token", "81527a9e9e2594b58babdd7f623f112f");
|
||||
const res = await myApi.login(param);
|
||||
localSet("token", "token");
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
|
|
@ -109,9 +98,10 @@ export default {
|
|||
width: 100%;
|
||||
/* background-color: #fff; */
|
||||
/* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
|
||||
background: url("../assets/bg1.png") no-repeat;
|
||||
background: url("../assets/bg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 420px;
|
||||
height: 400px;
|
||||
|
|
@ -119,26 +109,31 @@ export default {
|
|||
border-radius: 4px;
|
||||
box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 0 20px 0;
|
||||
}
|
||||
|
||||
.head img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.head .title {
|
||||
font-size: 28px;
|
||||
color: #1baeae;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.head .tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
|
|
@ -148,6 +143,7 @@ export default {
|
|||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-form .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import Liquid from "@/components/Liquid.vue";
|
|||
import Quality from "@/components/Quality.vue";
|
||||
import Flow from "@/components/Flow.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
import bus from '../utils/bus.js'
|
||||
export default {
|
||||
name: 'cl-hy',
|
||||
components: {
|
||||
|
|
@ -48,6 +49,7 @@ export default {
|
|||
})
|
||||
const changeIndex = (index) => {
|
||||
state.index = index;
|
||||
bus.off("foo")// 清除监听
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
|
|
|
|||
|
|
@ -24,11 +24,9 @@ export default ({ mode }) => defineConfig({
|
|||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://192.168.1.123:8866',
|
||||
// target: 'http://10.10.14.123',
|
||||
target: 'https://cdcmapi.shikicc.com',
|
||||
target: 'http://whh.shikicc.com:52189',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '/api')
|
||||
rewrite: path => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue