|
|
@@ -0,0 +1,296 @@
|
|
|
+<template>
|
|
|
+ <div class="faultEchartLine">
|
|
|
+ <div class="box-search">
|
|
|
+ <a-date-picker v-model:value="historyParams.startTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
|
|
|
+ size="small" :showTime="true" style="position: absolute; z-index: 99; left: 0px; width: 170px; top: 2px" @change="changeStart" />
|
|
|
+ <a-date-picker v-model:value="historyParams.endTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"
|
|
|
+ size="small" :showTime="true" style="position: absolute; z-index: 99; left: 175px; width: 170px; top: 2px" @change="changeEnd" />
|
|
|
+ <a-select ref="select" v-model:value="historyParams.interval" placeholder="请选择间隔时间" size="small"
|
|
|
+ style="position: absolute; z-index: 99; top: 2px; left: 350px; width: 150px">
|
|
|
+ <a-select-option v-for="(item, index) in skipOption" :key="index" :value="item.value">{{ item.label
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ <div ref="echartline" class="echart-line"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import { listdays } from '../main.api'
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ Type: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ addData: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ legendName: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ echartColor:{
|
|
|
+ type:String
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+let skipOption = ref<any[]>([
|
|
|
+ { label: '1秒', value: '1' },
|
|
|
+ { label: '5秒', value: '2' },
|
|
|
+ { label: '10秒', value: '3' },
|
|
|
+ { label: '30秒', value: '4' },
|
|
|
+ { label: '1分钟', value: '5' },
|
|
|
+ { label: '10分钟', value: '6' },
|
|
|
+ { label: '30分钟', value: '7' },
|
|
|
+ { label: '1小时', value: '8' },
|
|
|
+ { label: '1天', value: '9' },
|
|
|
+])
|
|
|
+let historyParams = reactive({
|
|
|
+ skip: '8',
|
|
|
+ startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ interval: '1h',
|
|
|
+})
|
|
|
+let echartline = ref(null)
|
|
|
+let xData = ref<any[]>([])
|
|
|
+let yData = ref<any[]>([])
|
|
|
+
|
|
|
+function changeStart(val){
|
|
|
+ historyParams.startTime=val
|
|
|
+ getData()
|
|
|
+}
|
|
|
+function changeEnd(val){
|
|
|
+ historyParams.endTime=val
|
|
|
+ getData()
|
|
|
+}
|
|
|
+function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ let myChart = echarts.init(echartline.value);
|
|
|
+ let option = {
|
|
|
+ grid: {
|
|
|
+ top: '22%',
|
|
|
+ left: '5%',
|
|
|
+ bottom: '13%',
|
|
|
+ right: '5%',
|
|
|
+ // containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ align: 'left',
|
|
|
+ right: 'center',
|
|
|
+ top: '10',
|
|
|
+ type: 'plain',
|
|
|
+ textStyle: {
|
|
|
+ color: '#7ec7ff',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ // icon:'rect',
|
|
|
+ itemGap: 25,
|
|
|
+ itemWidth: 18,
|
|
|
+ icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: props.legendName,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ // formatter: '{value}',
|
|
|
+ fontSize: 14,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 98, 162,.4)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: xData.value,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ boundaryGap: false,
|
|
|
+ type: 'value',
|
|
|
+ // max: props.maxY,
|
|
|
+ // min: props.minY,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ },
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 98, 162,.4)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 98, 162,.4)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: props.legendName,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: props.echartColor,
|
|
|
+ borderColor: props.echartColor,
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: props.echartColor,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: yData.value,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function getData() {
|
|
|
+ let res = await listdays({ ttime_begin: historyParams.startTime, ttime_end: historyParams.endTime, strtype: props.deviceType, gdeviceid: props.deviceId, skip: historyParams.skip, pageSize: 100, pageNo: 1 })
|
|
|
+ let data = res.datalist.records
|
|
|
+ xData.value = res.xlist
|
|
|
+ if (props.Type == 'tempZw') {
|
|
|
+ yData.value = data.map(el => el.readData.tempzw)
|
|
|
+ } else if (props.Type == 'tempDj') {
|
|
|
+ yData.value = data.map(el => el.readData.tempDj)
|
|
|
+ } else if (props.Type == 'Dl') {
|
|
|
+ yData.value = data.map(el => el.readData.dl)
|
|
|
+ } else if (props.Type == 'Dy') {
|
|
|
+ yData.value = data.map(el => el.readData.dy)
|
|
|
+ } else if (props.Type == 'jxzd') {
|
|
|
+ yData.value = data.map(el => el.readData.jxzd)
|
|
|
+ } else if (props.Type == 'czzd') {
|
|
|
+ yData.value = data.map(el => el.readData.czzd)
|
|
|
+ }
|
|
|
+ getOption()
|
|
|
+}
|
|
|
+
|
|
|
+watch(() => props.addData, (newV, oldV) => {
|
|
|
+ if (yData.value.length) {
|
|
|
+ yData.value.push(newV)
|
|
|
+ yData.value.shift()
|
|
|
+ }
|
|
|
+ getOption()
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ getData()
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '/@/design/theme.less';
|
|
|
+
|
|
|
+.faultEchartLine {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.box-search {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.echart-line {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+}
|
|
|
+
|
|
|
+.@{ventSpace}-picker {
|
|
|
+ background: #00000017 !important;
|
|
|
+ border: 1px solid @vent-form-item-border !important;
|
|
|
+
|
|
|
+ input,
|
|
|
+ .@{ventSpace}-select-selection-item,
|
|
|
+ .@{ventSpace}-picker-suffix {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-select-selection-placeholder {
|
|
|
+ color: #b7b7b7 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.@{ventSpace}-picker-separator {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-select-dropdown) {
|
|
|
+ color: #000 !important;
|
|
|
+
|
|
|
+ .@{ventSpace}-select-item {
|
|
|
+ color: #000 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-picker-input > input) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-picker-suffix) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-select-selector) {
|
|
|
+ color: #fff !important;
|
|
|
+ background: #00000017 !important;
|
|
|
+ border: 1px solid @vent-form-item-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-select-arrow) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+</style>
|
