|
@@ -3,42 +3,87 @@
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
<!-- 搜索信息 -->
|
|
|
- <el-form ref="chartForm" :model="chartForm" size="small" :inline="true" label-width="80px">
|
|
|
- <el-form-item label="数据组" prop="itemGroupId">
|
|
|
- <el-select clearable v-model="chartForm.itemGroupId" placeholder="请选择数据组">
|
|
|
- <el-option v-for="itemGroup in itemGroupList" :key="itemGroup.id" :label="itemGroup.groupName"
|
|
|
- :value="itemGroup.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="数据项" prop="itemList">
|
|
|
- <el-input v-model="chartForm.itemList" disabled placeholder="请选择数据项" maxlength="10">
|
|
|
- <el-button type="primary" slot="append" icon="el-icon-search"
|
|
|
- @click="chooseItemEvent">选择</el-button>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="开始时间" prop="startTime">
|
|
|
- <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.startTime" type="datetime"
|
|
|
- placeholder="选择日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结束时间" prop="endTime">
|
|
|
- <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.endTime" type="datetime"
|
|
|
- placeholder="选择日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryData">查询</el-button>
|
|
|
- <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
- <el-button type="primary" plain icon="el-icon-folder-opened" size="mini"
|
|
|
- @click="exportData">导出</el-button>
|
|
|
- </el-form-item>
|
|
|
+ <el-form ref="chartForm" :model="chartForm" :rules="chartFormRules" size="small" :inline="true">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="4" :xs="8" :sm="6" :md="4" :lg="3" :xl="4">
|
|
|
+ <el-form-item prop="trendType">
|
|
|
+ <el-radio-group v-model="chartForm.trendType">
|
|
|
+ <el-radio :label="0">实时趋势</el-radio>
|
|
|
+ <el-radio :label="1">历史趋势</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :span="4">
|
|
|
+ <el-form-item label="更新频率" prop="frequencyValue">
|
|
|
+ <el-input v-model="chartForm.frequencyValue"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :span="1" :xl="2">
|
|
|
+ <el-form-item prop="frequencyType">
|
|
|
+ <el-select v-model="chartForm.frequencyType">
|
|
|
+ <el-option v-for="timeType in timeTypeList" :key="timeType.value"
|
|
|
+ :label="timeType.label" :value="timeType.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :span="4">
|
|
|
+ <el-form-item label="时间长度" prop="timeValue">
|
|
|
+ <el-input v-model="chartForm.timeValue"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 0" :span="2">
|
|
|
+ <el-form-item prop="timeType">
|
|
|
+ <el-select v-model="chartForm.timeType">
|
|
|
+ <el-option v-for="timeType in timeTypeList" :key="timeType.value"
|
|
|
+ :label="timeType.label" :value="timeType.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 1" :span="6">
|
|
|
+ <el-form-item label="开始时间" prop="startTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.startTime"
|
|
|
+ type="datetime" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="chartForm.trendType == 1" :span="6">
|
|
|
+ <el-form-item label="结束时间" prop="endTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="chartForm.endTime"
|
|
|
+ type="datetime" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="数据项" prop="itemListTitile">
|
|
|
+ <el-input :title="chartForm.itemListTitile" v-model="chartForm.itemListTitile" disabled
|
|
|
+ placeholder="请选择数据项" maxlength="10">
|
|
|
+ <el-button type="primary" slot="append" icon="el-icon-search"
|
|
|
+ @click="chooseItemEvent">选择</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小数位" prop="decimalPlaces">
|
|
|
+ <el-input v-model="chartForm.decimalPlaces"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="量程" prop="range">
|
|
|
+ <el-input v-model="chartForm.range"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" plain icon="el-icon-search" size="mini"
|
|
|
+ @click="queryData">查询</el-button>
|
|
|
+ <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button type="primary" plain icon="el-icon-folder-opened" size="mini"
|
|
|
+ @click="exportData">导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <!-- 数据项表格 -->
|
|
|
- <ItemTable ref="itemTable" @receiveCheckedData="receiveCheckedData"></ItemTable>
|
|
|
+ <!-- 添加数据项 -->
|
|
|
+ <ChooseItem ref="chooseItem" @receiveCheckedData="receiveCheckedData"></ChooseItem>
|
|
|
<!-- 统计图 -->
|
|
|
<div class="lineChartContant" v-on:mouseover="mouseOver()" v-on:mouseout="mouseOut()">
|
|
|
<div id="lineChart" class="lineChart" />
|
|
@@ -47,18 +92,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { showLoading } from '@/utils/cqcy'
|
|
|
import { parseTime } from "@/utils/index";
|
|
|
-import { getAllItemGroup, getItemListValue } from '@/api/source/itemGroup'
|
|
|
-import ItemTable from './itemTable.vue'
|
|
|
+import ChooseItem from './chooseItem.vue'
|
|
|
+import { getItemListValue } from '@/api/source/itemGroup'
|
|
|
import qs from 'qs'
|
|
|
import echarts from 'echarts'
|
|
|
|
|
|
export default {
|
|
|
created() {
|
|
|
- this.getAllItemGroup()
|
|
|
},
|
|
|
components: {
|
|
|
- ItemTable
|
|
|
+ ChooseItem
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -67,12 +112,57 @@ export default {
|
|
|
state: null,
|
|
|
count: 0,
|
|
|
itemGroupList: [],
|
|
|
+ trendTypeList: [
|
|
|
+ { label: '实时趋势', value: 0 },
|
|
|
+ { label: '历史趋势', value: 1 }
|
|
|
+ ],
|
|
|
+ timeTypeList: [
|
|
|
+ { label: '秒', value: 0 },
|
|
|
+ { label: '分', value: 1 },
|
|
|
+ { label: '时', value: 2 },
|
|
|
+ { label: '天', value: 3 }
|
|
|
+ ],
|
|
|
+ itemList: [],
|
|
|
chartForm: {
|
|
|
- itemGroupId: null,
|
|
|
+ itemListTitile: '',
|
|
|
idList: [],
|
|
|
+ decimalPlaces: 0,
|
|
|
+ trendType: 0,
|
|
|
+ range: null,
|
|
|
+ frequencyValue: 1,
|
|
|
+ frequencyType: 0,
|
|
|
+ timeValue: 60,
|
|
|
+ timeType: 0,
|
|
|
startTime: null,
|
|
|
endTime: null
|
|
|
},
|
|
|
+ chartFormRules: {
|
|
|
+
|
|
|
+ frequencyValue: [
|
|
|
+ { required: true, message: '更新频率值不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ frequencyType: [
|
|
|
+ { required: true, message: '更新频率类型不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ timeValue: [
|
|
|
+ { required: true, message: '时间值不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ timeType: [
|
|
|
+ { required: true, message: '时间类型不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ startTime: [
|
|
|
+ { required: true, message: '开始时间不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ { required: true, message: '结束时间不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ decimalPlaces: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ range: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
chooseStartTime: null,
|
|
|
chooseEndTime: null,
|
|
|
//charts
|
|
@@ -99,16 +189,7 @@ export default {
|
|
|
label: {
|
|
|
backgroundColor: '#777'
|
|
|
},
|
|
|
- },
|
|
|
- // formatter: function (params, ticket, callback) {
|
|
|
- // let b = '<div style="display:inline;">'
|
|
|
- // for (let a of params) {
|
|
|
- // b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span>'
|
|
|
- // + a.seriesName + ': ' + a.data + '</span></div>'
|
|
|
- // }
|
|
|
- // b += '</div>'
|
|
|
- // return b;
|
|
|
- // }
|
|
|
+ }
|
|
|
},
|
|
|
//列标题
|
|
|
legend: {
|
|
@@ -145,7 +226,7 @@ export default {
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
+ color: '#FFFFFF'
|
|
|
}
|
|
|
},
|
|
|
data: []
|
|
@@ -159,7 +240,7 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
+ color: '#FFFFFF'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
@@ -181,37 +262,25 @@ export default {
|
|
|
methods: {
|
|
|
/** 接受传过来的数据 */
|
|
|
receiveCheckedData(data) {
|
|
|
+ this.itemList = data
|
|
|
let arr = []
|
|
|
- for (let a of data) {
|
|
|
+ let b = ''
|
|
|
+ for (let i in data) {
|
|
|
+ const a = data[i]
|
|
|
arr.push(a.id)
|
|
|
+ if (i == data.length - 1) {
|
|
|
+ b += a.itemGroupId + "." + a.itemReadName
|
|
|
+ } else {
|
|
|
+ b += a.itemGroupId + "." + a.itemReadName + ","
|
|
|
+ }
|
|
|
}
|
|
|
this.chartForm.idList = arr
|
|
|
- },
|
|
|
- /** 获取所有数据组 */
|
|
|
- getAllItemGroup() {
|
|
|
- let queryParams = { page: 1, limit: 999 }
|
|
|
- getAllItemGroup(queryParams).then(res => {
|
|
|
- if (!res || !res.data) {
|
|
|
- this.$message({
|
|
|
- message: '数据查询失败!',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.itemGroupList = res.data.itemGroupList
|
|
|
- })
|
|
|
+ this.chartForm.itemListTitile = b
|
|
|
},
|
|
|
/** 选择数据项事件 */
|
|
|
chooseItemEvent() {
|
|
|
- if (!this.chartForm.itemGroupId) {
|
|
|
- this.$message({
|
|
|
- message: '请选择数据组',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.$refs.itemTable.visible = true
|
|
|
- this.$refs.itemTable.itemGroupId = this.chartForm.itemGroupId
|
|
|
+ this.$refs.chooseItem.selectedItemList = this.itemList
|
|
|
+ this.$refs.chooseItem.visible = true
|
|
|
},
|
|
|
/** 查询数据 */
|
|
|
queryData() {
|
|
@@ -219,13 +288,6 @@ export default {
|
|
|
clearInterval(this.timer)
|
|
|
this.timer = null
|
|
|
this.chart = null
|
|
|
- if (!this.chartForm.itemGroupId) {
|
|
|
- this.$message({
|
|
|
- message: '请选择数据组',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
if (this.chartForm.idList.length == 0) {
|
|
|
this.$message({
|
|
|
message: '请选择数据项',
|
|
@@ -233,40 +295,52 @@ export default {
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- if (this.chartForm.startTime) {
|
|
|
- //如果开始时间和结束时间都有,则展示死数据
|
|
|
- if (this.chartForm.endTime) {
|
|
|
- this.chooseStartTime = this.chartForm.startTime
|
|
|
- this.chooseEndTime = this.chartForm.endTime
|
|
|
- this.state = false
|
|
|
- this.initChart()
|
|
|
- } else {
|
|
|
- //如果只有开始时间,则展示固定长度时间线的数据
|
|
|
- let currentTime = new Date().getTime()
|
|
|
- this.count = currentTime - new Date(this.chartForm.startTime).getTime()
|
|
|
- this.chooseStartTime = this.chartForm.startTime
|
|
|
- this.chooseEndTime = parseTime(currentTime)
|
|
|
- this.state = true
|
|
|
- this.initChart()
|
|
|
- this.startTimer()
|
|
|
+ //如果为实时趋势
|
|
|
+ if (this.chartForm.trendType == 0) {
|
|
|
+ if (!this.chartForm.frequencyValue) {
|
|
|
+ this.$message({
|
|
|
+ message: '频率不能为空',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- } else {
|
|
|
- if (this.chartForm.endTime) {
|
|
|
+ if (!this.chartForm.timeValue) {
|
|
|
this.$message({
|
|
|
- message: '不能只选择结束时间',
|
|
|
+ message: '时间长度不能为空',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ let currentTime = new Date().getTime()
|
|
|
+ this.count = this.timeCalculation(this.chartForm.timeValue, this.chartForm.timeType)
|
|
|
+ this.chooseStartTime = parseTime(new Date(currentTime - this.count))
|
|
|
+ this.chooseEndTime = parseTime(currentTime)
|
|
|
+ //添加监听事件
|
|
|
+ this.state = true
|
|
|
+ //初始化统计图
|
|
|
+ this.initChart()
|
|
|
+ //如果为历史趋势
|
|
|
+ } else if (this.chartForm.trendType == 1) {
|
|
|
+ if (!this.chartForm.startTime) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择开始时间',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.chartForm.endTime) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择结束时间',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
- } else {
|
|
|
- //如果开始时间和结束时间都没有,则从当前时刻开始,往前推一分钟
|
|
|
- this.count = 60 * 60 * 1000
|
|
|
- let currentTime = new Date().getTime()
|
|
|
- this.chooseEndTime = parseTime(currentTime)
|
|
|
- this.chooseStartTime = parseTime(new Date(currentTime - this.count))
|
|
|
- this.state = true
|
|
|
- this.initChart()
|
|
|
- this.startTimer()
|
|
|
}
|
|
|
+ this.chooseStartTime = this.chartForm.startTime
|
|
|
+ this.chooseEndTime = this.chartForm.endTime
|
|
|
+ //展示死统计图,且不添加监听事件
|
|
|
+ this.state = false
|
|
|
+ this.initChart()
|
|
|
}
|
|
|
},
|
|
|
/** 重置 */
|
|
@@ -295,6 +369,7 @@ export default {
|
|
|
},
|
|
|
/** 初始化统计图,如果state为true,则是动态,否则是静态 */
|
|
|
initChart() {
|
|
|
+ const loading = showLoading(this, "加载中,请稍候···")
|
|
|
this.getItemListValue((res) => {
|
|
|
let data = res.data
|
|
|
this.chart = echarts.init(document.getElementById('lineChart'))
|
|
@@ -319,6 +394,16 @@ export default {
|
|
|
}
|
|
|
seriesData.push(b)
|
|
|
}
|
|
|
+ // let decimalPlaces = this.chartForm.decimalPlaces
|
|
|
+ this.tooltip.formatter = function (params, ticket, callback) {
|
|
|
+ let b = '<div style="display:inline;">'
|
|
|
+ for (let a of params) {
|
|
|
+ b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span style="color:' + a.color + '">'
|
|
|
+ + a.seriesName + ': ' + a.data + '</span></div>'
|
|
|
+ }
|
|
|
+ b += '</div>'
|
|
|
+ return b
|
|
|
+ }
|
|
|
this.legend.data = legendData
|
|
|
this.xAxis.data = data[0].dataTimeList
|
|
|
this.series = seriesData
|
|
@@ -333,6 +418,11 @@ export default {
|
|
|
yAxis: this.yAxis,
|
|
|
series: this.series
|
|
|
})
|
|
|
+ if (this.state) {
|
|
|
+ //启动定时器,轮训更新统计图
|
|
|
+ this.startTimer()
|
|
|
+ }
|
|
|
+ loading.close()
|
|
|
})
|
|
|
},
|
|
|
/** 鼠标移入事件 */
|
|
@@ -358,7 +448,19 @@ export default {
|
|
|
this.chooseStartTime = this.chooseEndTime
|
|
|
this.chooseEndTime = parseTime(new Date())
|
|
|
this.updateChartData()
|
|
|
- }, 1000)
|
|
|
+ }, this.timeCalculation(this.chartForm.frequencyValue, this.chartForm.frequencyType))
|
|
|
+ },
|
|
|
+ /** 选择时间类型之后得到时间搓 */
|
|
|
+ timeCalculation(value, type) {
|
|
|
+ if (type == 0) {
|
|
|
+ return value * 1000
|
|
|
+ } else if (type == 1) {
|
|
|
+ return value * 60 * 1000
|
|
|
+ } else if (type == 2) {
|
|
|
+ return value * 60 * 60 * 1000
|
|
|
+ } else if (type == 3) {
|
|
|
+ return value * 60 * 60 * 24 * 1000
|
|
|
+ }
|
|
|
},
|
|
|
/** 更新统计图数据 */
|
|
|
updateChartData() {
|
|
@@ -405,7 +507,7 @@ export default {
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
.lineChartContant {
|
|
|
width: 180vh;
|
|
|
- height: 80vh;
|
|
|
+ height: 75vh;
|
|
|
|
|
|
.lineChart {
|
|
|
width: 100%;
|