main
parent
e0c8d07522
commit
ef69e7c282
29
src/App.vue
29
src/App.vue
|
@ -24,6 +24,7 @@ import Sidebar from '@/components/Sidebar.vue'
|
|||
import { useRouter } from 'vue-router'
|
||||
import { pathMap, localGet } from '@/utils';
|
||||
import mqtt from 'mqtt/dist/mqtt.min';
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
@ -32,6 +33,7 @@ export default {
|
|||
Sidebar
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const noMenu = ['/login']
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
|
@ -70,8 +72,8 @@ export default {
|
|||
|
||||
onMounted(() => {
|
||||
if (localGet('token')) {
|
||||
state.client = mqtt.connect('ws://www.shikicc.com', {
|
||||
port: 52194,
|
||||
state.client = mqtt.connect('ws://www.shikicc.com:52190/mqtt', {
|
||||
port: 52190,
|
||||
clientId: new Date(),
|
||||
username: 'hsgy',
|
||||
password: "hsgy123",
|
||||
|
@ -86,10 +88,10 @@ export default {
|
|||
state.client.on("connect", e => {
|
||||
// qos 是通道 一般有 0,1, 2
|
||||
const url = `iot/push/plc_01`;
|
||||
this.client.subscribe([url], { qos: 2 }, error => {
|
||||
state.client.subscribe([url], { qos: 2 }, error => {
|
||||
if (!error) {
|
||||
console.log("消息订阅成功!");
|
||||
this.mqttAll();
|
||||
mqttAll();
|
||||
} else {
|
||||
console.log("消息订阅失败!");
|
||||
}
|
||||
|
@ -100,15 +102,16 @@ export default {
|
|||
|
||||
// 接收消息
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
state.client.on("message", (topic, message) => {
|
||||
var data = JSON.parse(message);
|
||||
if (data) {
|
||||
if (data.topic === `iot/push/plc_01`) {
|
||||
var res = data.data;
|
||||
store.commit("setPlcData", res);
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
|
|
|
@ -28,7 +28,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(12)
|
||||
getEchart();
|
||||
})
|
||||
})
|
||||
|
@ -61,7 +60,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -27,7 +27,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
|
@ -142,7 +141,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -27,7 +27,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
|
@ -137,7 +136,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -27,7 +27,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
|
@ -133,7 +132,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -27,7 +27,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
|
@ -137,7 +136,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -27,7 +27,6 @@ export default {
|
|||
});
|
||||
onMounted(() => {
|
||||
bus.on('foo', e => {
|
||||
console.log(e)
|
||||
getEchart();
|
||||
})
|
||||
getEchart();
|
||||
|
@ -137,7 +136,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(data);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "8%", //画布左移位置
|
||||
|
|
|
@ -4,20 +4,12 @@
|
|||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) of listData"
|
||||
:key="index"
|
||||
class="echart-content"
|
||||
>
|
||||
<div v-for="(item, index) of listData" :key="index" class="echart-content">
|
||||
<BarEchart :echartData="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-div">
|
||||
<div
|
||||
v-for="(item, index) of dataList"
|
||||
:key="index"
|
||||
:class="'div' + index"
|
||||
>
|
||||
<div v-for="(item, index) of dataList" :key="index" :class="'div' + index">
|
||||
<div>{{ item.title }}</div>
|
||||
<div v-for="(it, i) of item.data" :key="i">
|
||||
<Process :itemData="it"></Process>
|
||||
|
@ -28,12 +20,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { onMounted, reactive, ref, toRefs,watch } 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: {
|
||||
|
@ -42,6 +35,7 @@ export default {
|
|||
Date
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
|
@ -73,30 +67,6 @@ export default {
|
|||
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:",
|
||||
|
@ -196,12 +166,20 @@ export default {
|
|||
}
|
||||
],
|
||||
});
|
||||
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);
|
||||
})
|
||||
});
|
||||
watch(() => store.state.pclData, val => {
|
||||
if (val) {
|
||||
console.log('flow',val);
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
|
||||
})
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
// 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),
|
||||
|
@ -217,6 +195,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.left-div {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
|
@ -224,20 +203,23 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.echart-content {
|
||||
width: 49%;
|
||||
height: 46%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-div {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 3%;
|
||||
}
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -66,7 +66,6 @@ export default {
|
|||
router.push("/config");
|
||||
}
|
||||
router.afterEach((to) => {
|
||||
console.log("to", to);
|
||||
const { id } = to.query;
|
||||
state.name = pathMap[to.name];
|
||||
state.modelName = store.state.modelName;
|
||||
|
|
|
@ -204,12 +204,9 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
state.value1 = state.fxOptions[0];
|
||||
console.log(123, state.value1)
|
||||
state.listData[0].title = state.value1.label;
|
||||
});
|
||||
const changeValue = (data) => {
|
||||
console.log('data', data);
|
||||
console.log('selectItem', state.value1);
|
||||
state.listData[0].title = state.value1.label;
|
||||
}
|
||||
return {
|
||||
|
|
|
@ -194,12 +194,9 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
state.value1 = state.fxOptions[0];
|
||||
console.log(123, state.value1)
|
||||
state.listData[0].title = state.value1.label;
|
||||
});
|
||||
const changeValue = (data) => {
|
||||
console.log('data', data);
|
||||
console.log('selectItem', state.value1);
|
||||
state.listData[0].title = state.value1.label;
|
||||
}
|
||||
return {
|
||||
|
|
|
@ -210,13 +210,10 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
state.value1 = state.fxOptions[0];
|
||||
console.log(123, state.value1)
|
||||
state.listData[0].title = state.value1.label;
|
||||
|
||||
});
|
||||
const changeValue = (data) => {
|
||||
console.log('data', data);
|
||||
console.log('selectItem', state.value1);
|
||||
state.listData[0].title = state.value1.label;
|
||||
}
|
||||
return {
|
||||
|
|
|
@ -204,12 +204,9 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
state.value1 = state.fxOptions[0];
|
||||
console.log(123, state.value1)
|
||||
state.listData[0].title = state.value1.label;
|
||||
});
|
||||
const changeValue = (data) => {
|
||||
console.log('data', data);
|
||||
console.log('selectItem', state.value1);
|
||||
state.listData[0].title = state.value1.label;
|
||||
}
|
||||
return {
|
||||
|
|
|
@ -194,12 +194,9 @@ export default {
|
|||
});
|
||||
onMounted(async () => {
|
||||
state.value1 = state.fxOptions[0];
|
||||
console.log(123, state.value1)
|
||||
state.listData[0].title = state.value1.label;
|
||||
});
|
||||
const changeValue = (data) => {
|
||||
console.log('data', data);
|
||||
console.log('selectItem', state.value1);
|
||||
state.listData[0].title = state.value1.label;
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,6 @@
|
|||
|
||||
<script setup>
|
||||
import { isExternal } from "@/utils/validate";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
|
|
|
@ -4,168 +4,156 @@
|
|||
<div class="index-right">
|
||||
<div class="one-card">
|
||||
<div class="one-card-content">
|
||||
<div>
|
||||
<p>节水量</p>
|
||||
<font><span class="font26">4.00</span>m³</font>
|
||||
</div>
|
||||
<div>
|
||||
<p>节碳量</p>
|
||||
<font><span class="font26">0.67</span>kg</font>
|
||||
</div>
|
||||
<div>
|
||||
<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">{{ 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">{{ 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">{{ 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">{{ 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">{{ 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">{{ 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">{{ 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>
|
||||
<p>节水量</p>
|
||||
<font><span class="font26">4.00</span>m³</font>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>节碳量</p>
|
||||
<font><span class="font26">0.67</span>kg</font>
|
||||
</div>
|
||||
<div>
|
||||
<p>原水箱液位:<span class="font26">{{ baseData && baseData.vd500.toFixed(2) }}</span>m</p>
|
||||
<p>历史最高:<span class="font26">{{ baseData && baseData.vd500Max.toFixed(2) }}</span>m</p>
|
||||
<p>历史最低:<span class="font26">{{ baseData && baseData.vd500Min.toFixed(2) }}</span>m</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>净水箱液位:<span class="font26">{{ baseData && baseData.vd504.toFixed(2) }}</span>m</p>
|
||||
<p>历史最高:<span class="font26">{{ baseData && baseData.vd504Max.toFixed(2) }}</span>m</p>
|
||||
<p>历史最低:<span class="font26">{{ baseData && baseData.vd504Min.toFixed(2) }}</span>m</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>UF产水</p>
|
||||
<p>瞬时流量:<span class="font26">{{ baseData && baseData.vd2700.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量:<span class="font26">{{ baseData && baseData.vd2716.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>自来水前端</p>
|
||||
<p>瞬时流量:<span class="font26">{{ baseData && baseData.vd2800.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量:<span class="font26">{{ baseData && baseData.vd2816.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>供水</p>
|
||||
<p>瞬时流量:<span class="font26">{{ baseData && baseData.vd2850.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量:<span class="font26">{{ baseData && baseData.vd2866.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>自来水后端</p>
|
||||
<p>瞬时流量:<span class="font26">{{ baseData && baseData.vd2750.toFixed(2) }}</span> m³/H</p>
|
||||
<p>累计流量:<span class="font26">{{ baseData && baseData.vd2766.toFixed(2) }}</span>m³</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>原水水质</p>
|
||||
<p>余氯:<span class="font26">{{ baseData && baseData.vd2600.toFixed(2) }}</span> mg/L</p>
|
||||
<p>浊度:<span class="font26">{{ baseData && baseData.vd2610.toFixed(2) }}</span> mg/L</p>
|
||||
<p>氨氮:<span class="font26">{{ baseData && baseData.vd2620.toFixed(2) }}</span> mg/L</p>
|
||||
<p>COD:<span class="font26">{{ baseData && baseData.vd2630.toFixed(2) }}</span> mg/L</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>净水水质</p>
|
||||
<p>余氯:<span class="font26">{{ baseData && baseData.vd2500.toFixed(2) }}</span> mg/L</p>
|
||||
<p>浊度:<span class="font26">{{ baseData && baseData.vd2510.toFixed(2) }}</span> mg/L</p>
|
||||
<p>氨氮:<span class="font26">{{ baseData && baseData.vd2520.toFixed(2) }}</span> mg/L</p>
|
||||
<p>COD:<span class="font26">{{ baseData && baseData.vd2530.toFixed(2) }}</span> mg/L</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
import Menus from "@/components/Menus.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
import { onMounted, reactive, ref, toRefs, computed } from "vue";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
Menus,
|
||||
},
|
||||
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
|
||||
}
|
||||
|
||||
});
|
||||
onMounted(() => {
|
||||
getBaseInfo();
|
||||
})
|
||||
const getBaseInfo = async () => {
|
||||
const res = await myApi.getBaseInfo();
|
||||
state.baseData = res.data;
|
||||
}
|
||||
const baseData = computed(() =>
|
||||
store.state.pclData
|
||||
);
|
||||
// onMounted(() => {
|
||||
// getBaseInfo();
|
||||
// })
|
||||
// const getBaseInfo = async () => {
|
||||
// const res = await myApi.getBaseInfo();
|
||||
// state.baseData = res.data;
|
||||
// }
|
||||
return {
|
||||
...toRefs(state)
|
||||
...toRefs(state),
|
||||
baseData
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.index-left {
|
||||
width: 69%;
|
||||
border: 1px solid rgb(179, 174, 174);
|
||||
}
|
||||
|
||||
.index-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
.one-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px #99ACB0 inset;
|
||||
|
||||
h2 {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.one-card-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
>div {
|
||||
width: 46%;
|
||||
// height: 22%;
|
||||
border: 1px solid rgb(197, 195, 195);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:#3CB6CC;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
margin: 10px 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.one-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px #99ACB0 inset;
|
||||
|
||||
h2 {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.one-card-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
>div {
|
||||
width: 46%;
|
||||
// height: 22%;
|
||||
border: 1px solid rgb(197, 195, 195);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #3CB6CC;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
margin: 10px 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -58,9 +58,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadlineChart = (myChart, data) => {
|
||||
console.log(store.state.selectTab );
|
||||
console.log(store.state.selectDate );
|
||||
console.log(data );
|
||||
var option = {
|
||||
legend: {
|
||||
data: data.legend,
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick, onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs,watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
|
@ -46,30 +46,30 @@ export default {
|
|||
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
|
||||
},
|
||||
// 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",
|
||||
|
@ -163,14 +163,25 @@ export default {
|
|||
}
|
||||
],
|
||||
});
|
||||
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);
|
||||
})
|
||||
})
|
||||
watch(() => store.state.pclData, val => {
|
||||
if (val) {
|
||||
console.log('liquid', val);
|
||||
state.olddataList.forEach(ele => {
|
||||
ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
|
||||
})
|
||||
state.puredataList.forEach(ele => {
|
||||
ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
|
||||
})
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
// 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),
|
||||
};
|
||||
|
|
|
@ -41,7 +41,6 @@ export default {
|
|||
}
|
||||
};
|
||||
const loadProcessChart = (myChart, data) => {
|
||||
console.log(123, myChart);
|
||||
var option = {
|
||||
grid: {
|
||||
top: "0",
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
|
||||
import { onMounted, reactive, toRefs, ref, watch } from "vue";
|
||||
import LineEchart from "@/components/LineEchart.vue";
|
||||
import Process from "@/components/Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
|
@ -45,30 +45,7 @@ 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
|
||||
},
|
||||
baseData: {},
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
|
@ -151,11 +128,22 @@ export default {
|
|||
],
|
||||
activeName: 'old'
|
||||
});
|
||||
watch(() => store.state.pclData, val => {
|
||||
if (val) {
|
||||
console.log('quality', val);
|
||||
state.baseData = val;
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = store.state.selectTab == 'old'
|
||||
? Number(val[ele.data[0].key]).toFixed(2) + ''
|
||||
: Number(val[ele.data[0].key1]).toFixed(2) + '';
|
||||
})
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
onMounted(() => {
|
||||
store.commit("changeSelectTab", "old");
|
||||
state.dataList.forEach(ele => {
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
|
||||
})
|
||||
});
|
||||
const handleClick = (tab) => {
|
||||
if (tab.props.name == 'old') {
|
||||
|
@ -173,11 +161,10 @@ export default {
|
|||
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);
|
||||
})
|
||||
// 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');
|
||||
};
|
||||
|
|
|
@ -33,7 +33,6 @@ export default {
|
|||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
|
|
|
@ -40,7 +40,6 @@ export default {
|
|||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||||
title: {
|
||||
|
@ -212,7 +211,6 @@ export default {
|
|||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -334,7 +332,6 @@ export default {
|
|||
};
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -455,7 +452,6 @@ export default {
|
|||
};
|
||||
const getChartsZf4 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
|
|
@ -46,7 +46,6 @@ export default {
|
|||
});
|
||||
const getChartsZfl = (id, text, num, color) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ["#80FFA5"],
|
||||
title: {
|
||||
|
@ -134,7 +133,6 @@ export default {
|
|||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -256,7 +254,6 @@ export default {
|
|||
};
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -377,7 +374,6 @@ export default {
|
|||
};
|
||||
const getChartsZf4 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
|
|
@ -43,7 +43,6 @@ export default {
|
|||
});
|
||||
const getChartsZfl = (id, text, num, color) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ["#80FFA5"],
|
||||
title: {
|
||||
|
@ -131,7 +130,6 @@ export default {
|
|||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -253,7 +251,6 @@ export default {
|
|||
};
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
@ -374,7 +371,6 @@ export default {
|
|||
};
|
||||
const getChartsZf4 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
|
|
|
@ -33,7 +33,6 @@ export default {
|
|||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
import { createStore } from "vuex"
|
||||
import {
|
||||
createStore
|
||||
} from "vuex"
|
||||
// 引入持久化
|
||||
import createPersistedState from 'vuex-persistedstate';
|
||||
|
||||
|
@ -8,7 +10,31 @@ const store = createStore({
|
|||
userInfo: {},
|
||||
selectDate: 0,
|
||||
selectTab: 'old',
|
||||
modelName: ''
|
||||
modelName: '',
|
||||
pclData: {
|
||||
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
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
updateCurrentPath(state, path) {
|
||||
|
@ -25,10 +51,15 @@ const store = createStore({
|
|||
},
|
||||
setModelName(state, data) {
|
||||
state.modelName = data;
|
||||
},
|
||||
setPlcData(state, data) {
|
||||
state.pclData = data;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateCurrentPath({ commit }, path) {
|
||||
updateCurrentPath({
|
||||
commit
|
||||
}, path) {
|
||||
commit('updateCurrentPath', path)
|
||||
}
|
||||
},
|
||||
|
@ -40,7 +71,7 @@ const store = createStore({
|
|||
},
|
||||
plugins: [
|
||||
createPersistedState({
|
||||
key: 'vuex',
|
||||
key: 'vuex',
|
||||
storage: window.localStorage
|
||||
})
|
||||
]
|
||||
|
|
|
@ -31,7 +31,6 @@
|
|||
onMounted(() => {
|
||||
});
|
||||
const showContent = (i) => {
|
||||
console.log(i)
|
||||
state.activeindex = i;
|
||||
}
|
||||
return {
|
||||
|
|
|
@ -72,7 +72,6 @@ export default {
|
|||
localSet("token", "token");
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -18,8 +18,8 @@ import Index from "@/components/Index.vue";
|
|||
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'
|
||||
import { onMounted, reactive, ref, toRefs, nextTick, computed } from "vue";
|
||||
import bus from '../utils/bus.js';
|
||||
export default {
|
||||
name: 'cl-hy',
|
||||
components: {
|
||||
|
|
Loading…
Reference in New Issue