Compare commits

...

8 Commits

Author SHA1 Message Date
copper
b74ca981dd rm auto login 2021-06-08 15:59:30 +08:00
copper
fe087b1d69 false data 2021-06-02 18:08:08 +08:00
copper
a3e9524df0 rm rule 2021-06-02 14:37:19 +08:00
copper
f72513e229 1 2021-06-02 14:36:34 +08:00
copper
c72b4fd3ae 1 2021-06-02 14:36:08 +08:00
copper
c795f3c4eb false data 2021-06-02 14:35:51 +08:00
copper
76c555e113 temp 2021-06-01 17:08:36 +08:00
copper
d6560ebbfa water 2021-06-01 16:40:44 +08:00
20 changed files with 574 additions and 186 deletions

179
package-lock.json generated
View File

@ -1744,6 +1744,16 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428108619&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@ -1770,6 +1780,34 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@ -1791,6 +1829,25 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@ -1855,6 +1912,16 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881839307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@ -1871,6 +1938,18 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@ -3872,6 +3951,11 @@
"timsort": "^0.3.0"
}
},
"css-element-queries": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
"integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
},
"css-loader": {
"version": "3.6.0",
"resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1602609194593&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@ -6327,6 +6411,11 @@
}
}
},
"intersection-observer": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.1.tgz",
"integrity": "sha512-Zd7Plneq82kiXFixs7bX62YnuZ0BMRci9br7io88LwDyF3V43cQMI+G5IiTlTNTt+LsDUppl19J/M2Fp9UkH6g=="
},
"ip": {
"version": "1.1.5",
"resolved": "https://registry.npm.taobao.org/ip/download/ip-1.1.5.tgz",
@ -6963,6 +7052,11 @@
"integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
"dev": true
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.defaultsdeep": {
"version": "4.6.1",
"resolved": "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz",
@ -10964,85 +11058,14 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.9",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.9.tgz?cache=0&sync_timestamp=1603783081012&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.9.tgz",
"integrity": "sha1-UlEsthwpaCfJnA1UOYvvhL5ESPw=",
"dev": true,
"optional": true,
"vue-resize-directive": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-resize-directive/-/vue-resize-directive-1.2.0.tgz",
"integrity": "sha512-LmpFexQcl1XYyz3DQrTrq3Efgj50MKEON60nR9MMAq1D2ZtXFg1WDcy1wy1T0SeduNtIu9hos2aLTsJUplvjlQ==",
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
"integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611787836&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
"css-element-queries": "^1.0.2",
"intersection-observer": "^0.5.0",
"lodash.debounce": "^4.0.8"
}
},
"vue-style-loader": {

View File

@ -15,6 +15,7 @@
"ol": "^6.4.3",
"v-charts": "^1.19.0",
"vue": "^2.6.11",
"vue-resize-directive": "^1.2.0",
"vue-router": "^3.4.8",
"vuex": "^3.5.1"
},

View File

@ -28,7 +28,9 @@
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/dist/locale/zh-cn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.common.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.js.map"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts@1.19.0/lib/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

View File

@ -16,7 +16,7 @@
>
<img :src="logo" />
<p>
<span style="color:white;font-size: 26px;font-weight: bold;text-shadow: 0 0 10px black;">湖北富瑞尔科技有限公司水质监测平台</span>
<span style="color:white;font-size: 26px;font-weight: bold;text-shadow: 0 0 10px black;">水质监测平台</span>
</p>
<div style="color:white;font-size: 13px;font-weight: bold;text-shadow: 0 0 7px black;">
<p>
@ -210,6 +210,7 @@ export default {
this.avter = require("../assets/login-portrait.png");
this.logobg = require("../assets/back.jpg");
this.createCode();
// this.login()
}
};
</script>

View File

@ -56,9 +56,9 @@
<a-menu-item key="qa-sts">
<icon-font type="wt-iconxiangxi" />水质质量类别统计
</a-menu-item>
<a-menu-item key="lur-sts">
<!-- <a-menu-item key="lur-sts">
<icon-font type="wt-iconxiangxi" />水质指标超标统计
</a-menu-item>
</a-menu-item> -->
<a-menu-item key="yl-sts">
<icon-font type="wt-iconxiangxi" />水质超标处理记录
</a-menu-item>

View File

@ -0,0 +1,88 @@
<template>
<div>
<h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
<div
v-resize="init"
ref="chart"
style="min-width: 400px; min-height: 300px; width: 100%; height: 100%"
></div>
</div>
</template>
<script>
import { generateWaterData } from "@/utils/water";
import Moment from "../utils/moment.zh_cn";
export default {
data() {
return {
data: [],
};
},
methods: {
init() {
let chart = echarts.init(this.$refs.chart);
chart.setOption(this.getOption());
},
getOption() {
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['周一', '周二', '周三',
'周四', '周五', '周六', '周日'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
let option = {
tooltip: {
position: 'top'
},
title: [],
singleAxis: [],
series: []
};
days.forEach(function (day, idx) {
option.title.push({
textBaseline: 'middle',
top: (idx + 0.5) * 100 / days.length + '%',
text: day
});
option.singleAxis.push({
left: 100,
type: 'category',
boundaryGap: false,
data: hours,
top: (idx * 100 / days.length + 5) + '%',
height: (100 / days.length - 10) + '%',
axisLabel: {
interval: 2
}
});
option.series.push({
singleAxisIndex: idx,
coordinateSystem: 'singleAxis',
type: 'scatter',
data: [],
symbolSize: function (dataItem) {
return dataItem[1] * 4;
}
});
});
data.forEach(function (dataItem) {
option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});
return option;
},
},
mounted() {
this.init();
},
};
</script>
<style>
</style>

View File

@ -0,0 +1,139 @@
<template>
<div
ref="chart"
style="min-width: 400px; min-height: 300px; width: 100%; height: 100%"
></div>
</template>
<script>
import { generateWaterData } from "@/utils/water";
import Moment from "../utils/moment.zh_cn";
export default {
data() {
return {
data: [],
};
},
methods: {
init() {
let chart = echarts.init(this.$refs.chart);
chart.setOption(this.getOption());
},
getOption() {
let count = 1000;
let data = generateWaterData(["t", "p"], count);
let opt = {
title: {
text: "水质指标关系图",
subtext: "",
left: "center",
align: "right",
},
grid: {
bottom: 80,
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: "none",
},
restore: {},
saveAsImage: {},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: false,
label: {
backgroundColor: "#505765",
},
},
},
legend: {
data: ["温度", "浊度"],
left: 10,
},
dataZoom: [
{
show: true,
start: 65,
end: 85,
},
{
type: "inside",
start: 65,
end: 85,
},
],
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: { onZero: false },
data: data.map(function (o) {
return o.time_str.replace(" ", "\n");
}),
},
],
yAxis: [
{
name: "温度(℃)",
type: "value",
max: 10,
},
{
name: "浊度(mm)",
nameLocation: "start",
max: 5,
type: "value",
inverse: true,
},
],
series: [
{
name: "温度",
type: "line",
areaStyle: {},
lineStyle: {
width: 1,
},
emphasis: {
focus: "series",
},
data: data.map((v) => v.t),
},
{
name: "浊度",
type: "line",
yAxisIndex: 1,
areaStyle: {},
lineStyle: {
width: 1,
},
emphasis: {
focus: "series",
},
data: data.map((v) => v.p),
},
],
};
return opt;
},
},
mounted() {
this.init();
},
};
</script>
<style>
</style>

View File

@ -0,0 +1,101 @@
<template>
<div>
<h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
<div
v-resize="init"
ref="chart"
style="min-width: 400px; min-height: 600px; width: 100%; height: 100%"
></div>
</div>
</template>
<script>
import { generateWaterData } from "@/utils/water";
import Moment from "../utils/moment.zh_cn";
export default {
data() {
return {
data: [],
};
},
methods: {
init() {
let myChart = echarts.init(this.$refs.chart)
setTimeout(function () {
var option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['水质指标', '2012', '2013', '2014', '2015', '2016', '2017'],
['优', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['良', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['合格', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['不合格', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {focus: 'data'},
label: {
formatter: ' {@2012} ({d}%)'
},
encode: {
itemName: '指标统计',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});
},
},
mounted() {
this.init();
},
};
</script>
<style>
</style>

View File

@ -18,12 +18,12 @@
</a-layout-sider>
<a-layout style="padding: 20px">
<a-layout-header style="background: #fff; padding: 15px 0 5px 15px">
<a-radio-group default-value="a" button-style="solid" style="display: block; line-height: 32px">
<a-radio-button value="a"> 小时值分析 </a-radio-button>
<a-radio-button value="b"> 日均值分析 </a-radio-button>
<a-radio-button value="c"> 水质指标统计 </a-radio-button>
<a-radio-button value="d"> 质量等级统计 </a-radio-button>
<a-radio-button value="e"> 质量对比分析 </a-radio-button>
<a-radio-group default-value="a" button-style="solid" style="display: block; line-height: 32px">
<a-radio-button @click=" tab = 'a'" value="a"> 小时值分析 </a-radio-button>
<a-radio-button @click=" tab = 'b'" value="b"> 日均值分析 </a-radio-button>
<a-radio-button @click=" tab = 'c'" value="c"> 水质指标统计 </a-radio-button>
<a-radio-button @click=" tab = 'd'" value="d"> 质量等级统计 </a-radio-button>
<a-radio-button @click=" tab = 'e'" value="e"> 质量对比分析 </a-radio-button>
</a-radio-group>
<span>
检测项
@ -43,13 +43,16 @@
</span>
</a-layout-header>
<a-layout-content style="padding: 20px 0 20px 0">
<a-row>
<!-- <a-row>
图表类型
<a-select placeholder="选择类型" style="min-width: 150px">
<a-select-option value="0"> 单站点多指标分析 </a-select-option>
<a-select-option value="1"> 多站点多指标分析 </a-select-option>
</a-select>
</a-row>
</a-row> -->
<a-1 v-if="tab === 'd'"/>
<a-2 v-if="tab === 'e'" />
<a-3 v-if="tab === 'c'" />
</a-layout-content>
</a-layout>
</a-layout>
@ -57,7 +60,11 @@
</template>
<script>
import A1 from './A1.vue';
import A2 from './A2.vue';
import A3 from './A3.vue';
export default {
components: { A1, A2, A3 },
data() {
return {
checkedKeys: ["all"],
@ -67,6 +74,7 @@ export default {
datetimeRange: [],
columns: [],
data: [],
tab: 'e'
};
},
computed: {

View File

@ -11,6 +11,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
@ -38,7 +39,7 @@ export default {
let e = this.$refs['indexChart']
if(!e)return
let myChart = echarts.init(e);
const { title, xAxis, series, seriesName, seriesType, yRange } = this.setting;
const { title, xAxis, series, seriesName, seriesType } = this.setting;
let option = {
title: {
text: title,
@ -53,12 +54,9 @@ export default {
}),
},
yAxis: {
min: yRange[0] - (yRange[1] - yRange[0]) * 0.05,
max: yRange[1] + (yRange[1] - yRange[0]) * 0.05,
splitLine: {
show: false
}
type: "value"
},
dataZoom: [
{
// startValue: '2014-06-01'
@ -77,49 +75,14 @@ export default {
saveAsImage: {},
},
},
visualMap: {
show: true,
top: 40,
right: 50,
type:'piecewise',
text:'图例',
pieces: [
{
gte: yRange[0],
lte: yRange[1],
color: '#0000ff',
},
{
gt: yRange[1],
color: "#ff0000",
},
{
gt: yRange[1],
color: "#ff0000",
},
],
categories:['合格','不合格'],
outOfRange: {
color: "#0000ff",
},
},
series: {
name: seriesName,
type: seriesType,
data: this.rawData.map(function (item) {
return item[series];
}),
markLine: {
silent: true,
data: [
{
yAxis: yRange[0],
},
{
yAxis: yRange[1],
},
],
},
},
};
console.log(option)

View File

@ -1,4 +1,4 @@
import { Icon } from 'ant-design-vue';
import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2205869_ablhiuxmevf.js', // generated by iconfont.cn

View File

@ -46,7 +46,7 @@
</a-radio-button>
</a-radio-group>
<span style="margin-left: 30px"
><a-button @click="getData"> 刷新数据</span
><a-button @click="getData"> 刷新数据</a-button></span
>
</a-layout-header>
<a-layout-content style="padding: 20px 0 20px 0">
@ -86,7 +86,7 @@
// import SZJCChart from "./SZJCChart";
import { getData, URL_MAP } from "@/utils/http";
import Moment from "@/components/utils/moment.zh_cn";
import { processWater } from "@/utils/water";
import { generateWaterData, processWater } from "@/utils/water";
import BaseIndexChart from "../charts/BaseIndexChart.vue";
export default {
components: {
@ -217,10 +217,10 @@ export default {
series: sensor.param_key,
seriesName: sensor.param_name,
seriesType: "line",
yRange: [
ruleSlot[sensor.param_key].mmin,
ruleSlot[sensor.param_key].mmax,
],
// yRange: [
// ruleSlot[sensor.param_key].mmin,
// ruleSlot[sensor.param_key].mmax,
// ],
});
});
this.chartSettings = chartSettings;
@ -251,30 +251,15 @@ export default {
async getData() {
this.loading = true;
try {
const params = {
timestamp__gte: this.startTime.toDate().getTime(),
timestamp__lte: this.endTime.toDate().getTime(),
device_id__in: this.selectedKeys,
};
if (this.currentType === "table") {
params.page = this.pagination.current;
}
let count = 10
if (this.currentType === "chart") {
params.page = 0;
params.page_size = 1e13;
count = 300;
}
let data = await getData(URL_MAP.WATER_LIST, params);
if (data.total === 0) {
this.waterData = [];
} else {
this.waterData = processWater(
data.data,
this.sensorList.map((s) => s.param_key)
);
}
this.pagination.total = data.total;
// let data = await getData(URL_MAP.WATER_LIST, params);
let data = generateWaterData(this.sensorList.map((s) => s.param_key), count)
this.waterData = data
this.pagination.total = 300;
} catch (e) {
console.log(e);
this.waterData = [];

View File

@ -48,6 +48,7 @@
</template>
<script>
import { generateWaterData } from '@/utils/water';
export default {
data() {
return {
@ -81,10 +82,14 @@ export default {
},
{
title: "日期",
dataIndex: "time",
dataIndex: "time_str",
},
];
let label = []
this.sensorList.forEach((sensor) => {
label.push(sensor.param_key + '1')
label.push(sensor.param_key + '2')
label.push(sensor.param_key + '3')
columns.push({
title: sensor.param_name + '('+(sensor.uint || "-") + ')',
children: [
@ -119,6 +124,7 @@ export default {
children: deviceTree,
},
];
this.data = generateWaterData(label, 10)
},
};
</script>

View File

@ -23,7 +23,7 @@
</a-radio-group>
<span>
<a-date-picker
:locale="locale"
v-model="startValue"
:disabled-date="disabledStartDate"
format="YYYY-MM-DD"
@ -31,7 +31,7 @@
@openChange="handleStartOpenChange"
/> -
<a-date-picker
:locale="locale"
v-model="endValue"
:disabled-date="disabledEndDate"
format="YYYY-MM-DD"
@ -56,12 +56,13 @@
</template>
<script>
import { generateWaterData } from '@/utils/water';
import Moment from '../utils/moment.zh_cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
// import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
data() {
return {
locale,
// locale,
checkedKeys: ['all'],
autoExpandParent: true,
selectedKeys: [],
@ -178,7 +179,7 @@ export default {
},
{
title: "时间",
dataIndex: "time",
dataIndex: "time_str",
},
];
this.sensorList.forEach((sensor) => {
@ -209,6 +210,7 @@ export default {
children: deviceTree,
},
];
this.data = generateWaterData(this.sensorList.map(v => v.param_key), 10)
},
};
</script>

View File

@ -48,6 +48,7 @@
</template>
<script>
import { generateWaterData } from '@/utils/water';
export default {
data() {
return {
@ -81,7 +82,7 @@ export default {
},
{
title: "日期",
dataIndex: "time",
dataIndex: "time_str",
},
];
this.sensorList.forEach((sensor) => {
@ -116,6 +117,11 @@ export default {
children: deviceTree,
},
];
let data = generateWaterData(this.sensorList.map(v => v.param_key), 10)
data.forEach(o => {
o.level = Math.ceil( Math.random() * 10 )
})
this.data = data
},
};
</script>

View File

@ -48,6 +48,7 @@
</template>
<script>
import { generateWaterData } from '@/utils/water';
export default {
data() {
return {
@ -74,6 +75,18 @@ export default {
dateRangeChange() {},
},
mounted() {
let days = [
'good_days',
'well_days',
'small_days',
'bad_days'
]
let ratios = [
'good_ratio',
'small_ratio',
'well_ratio',
'bad_ratio'
]
const columns = [
{
title: "站点名",
@ -162,6 +175,25 @@ export default {
children: deviceTree,
},
];
let data = generateWaterData(['ff'], 10)
data.forEach(o => {
let s = 0
days.forEach(d => {
o[d] = Math.ceil(Math.random() * 10)
s += o[d]
})
o['all_days'] = s
ratios.forEach(d => {
let ss = d.split('_')[0] + '_days'
o[d] = parseFloat(( o[ss] / 30).toFixed(1))
})
o['all_ratio'] =parseFloat(( s / 30).toFixed(1))
})
this.data = data
},
};
</script>

View File

@ -48,6 +48,7 @@
</template>
<script>
import Moment from '../utils/moment.zh_cn';
export default {
data() {
return {
@ -88,24 +89,24 @@ export default {
dataIndex: "lur-count"
},
{
title: '超标比率',
dataIndex: "lur-count"
title: '超标等级',
dataIndex: "lur-level"
},
{
title: '是否处理',
dataIndex: "lur-count"
dataIndex: "isok"
},
{
title: '处理人',
dataIndex: "lur-count"
dataIndex: "people"
},
{
title: '处理时间',
dataIndex: "lur-count"
dataIndex: "time"
},
{
title: '处理概述',
dataIndex: "lur-count"
dataIndex: "msg"
},
];
@ -125,6 +126,22 @@ export default {
children: deviceTree,
},
];
let data = []
for(let i=0; i< 10; i++) {
let start = Moment().subtract(i + 10 * Math.ceil(Math.random() * 10), 'day')
let end = start.add(1, 'days')
data.push({
'range': start.format('ll') + '-' + end.format('ll'),
'lur-count': Math.ceil(10 *Math.random()) + Math.random(),
'lur-level': Math.ceil(10 *Math.random()),
'isok': Math.random() > 0.5 ? '是':'否',
'people': 'sf',
'time': start.add(Math.ceil(24 *Math.random()), 'hour').format('lll'),
})
this.data = data
}
},
};
</script>

View File

@ -8,6 +8,8 @@ import router from './utils/router'
// Vue.use(Antd)
// Vue.use(VCharts)
import resize from 'vue-resize-directive'
Vue.directive('resize', resize)
Vue.config.productionTip = false
Vue.prototype.$store = store

View File

@ -28,3 +28,21 @@ export function processTimeData(dataArr=[], start=new Date(), end=new Date(), st
})
}
}
export function generateWaterData(label, count) {
let data = []
let start = Moment().subtract(count, "minute")
for(let _ = 0; _< count; _ ++) {
let d = {}
label.forEach((key, i) => {
d[key] = Math.sin( _ * _ * _ * 34654 - _ * _ * 54324 + _ * 2345 + 343) + 1 + Math.random() / 10
d[key] = parseFloat( d[key].toFixed(3) )
})
d.key = Math.round( Math.random() * 10000000 ).toString()
d['time_str'] = start.add(_, "minute").format('lll')
d['time'] = start.add(_, "minute").toDate()
data.push(d)
}
return data;
}

View File

@ -2,7 +2,7 @@ const path = require('path')
const { env } = require('process')
module.exports = {
publicPath: '/',
publicPath: '/wt/',
devServer: {
host: '127.0.0.1',
@ -12,7 +12,7 @@ module.exports = {
'/backend': {
// target: 'http://223.75.53.208:8081',
// target: 'http://121.36.155.145:10025/',
target: 'http://127.0.0.1:7788/'
target: 'http://8.136.226.16:10025/'
}
}
},
@ -33,7 +33,7 @@ module.exports = {
'com': path.resolve(__dirname, 'src', 'components')
}
},
externals: true ? {
externals: {
'vue': 'Vue',
'vuex':'Vuex',
'antd': 'antd',
@ -42,14 +42,8 @@ module.exports = {
"md5": "js-md5",
'axios': 'axios',
'v-charts':'VCharts',
'ol':'ol'
}: {
'antd': 'antd',
'ol':'ol',
'v-charts':'VCharts',
"moment": "moment",
"md5": "js-md5",
'axios': 'axios',
'echarts': 'echarts'
},
module: {