feat: 引入eslint
This commit is contained in:
chenjinsong
@@ -73,18 +73,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '../../libs/bus';
|
||||
import {Loading} from 'element-ui';
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import loading from "../common/loading";
|
||||
import timePicker from '../common/timePicker'
|
||||
|
||||
export default {
|
||||
name: 'chartSingleStat',
|
||||
components: {
|
||||
'loading': loading,
|
||||
'time-picker':timePicker
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
@@ -92,408 +84,408 @@ export default {
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId',
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex:{
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 0
|
||||
},
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData:false,
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
noData: false,
|
||||
unit: {},
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen:[],//全屏数据
|
||||
serieSingleStat:'',
|
||||
mapping:'',//满足valueMapping时 mapping的值
|
||||
seriesItemScreen: [], // 全屏数据
|
||||
serieSingleStat: '',
|
||||
mapping: '', // 满足valueMapping时 mapping的值
|
||||
images: '',
|
||||
loading:Object,
|
||||
loading: Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [], // series数据组
|
||||
theData: [] // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow:false,
|
||||
dragTitleShow:false,
|
||||
dropdownMenuShow:false,
|
||||
divFirstShow:false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
};
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
|
||||
oldSearchTime: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow(n) {
|
||||
this.$emit("dropmenu-change", n);
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
dragResize: function (e) {
|
||||
const diffWidth = 20 // 界面的宽度空白的地方的宽度
|
||||
const chartBoxPadding = 22
|
||||
const targetDiv = document.getElementById('chartSingleStatDiv' + this.chartIndex) // e.target.parentNode.parentNode;.children[0]
|
||||
const targetDivContainer = document.getElementById('listContainer') // e.target.parentNode.parentNode;.children[0]
|
||||
const maxWidth = targetDivContainer.offsetWidth - diffWidth
|
||||
const minWidth = maxWidth / 12
|
||||
const stepWidth = maxWidth / 12
|
||||
const stepHeight = 10
|
||||
|
||||
// 得到点击时该容器的宽高：
|
||||
const targetDivHeight = targetDiv.offsetHeight
|
||||
const targetDivWidth = targetDiv.offsetWidth
|
||||
const startY = e.clientY
|
||||
const startX = e.clientX
|
||||
const _this = this
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
e.preventDefault()
|
||||
// 得到鼠标拖动的宽高距离：取绝对值
|
||||
const distY = Math.abs(e.clientY - startY)
|
||||
const distX = Math.abs(e.clientX - startX)
|
||||
|
||||
// 往上方拖动：
|
||||
if (e.clientY < startY) {
|
||||
targetDiv.style.height = targetDivHeight - distY + 'px'
|
||||
// heightTmp = targetDivHeight-distY;
|
||||
}
|
||||
if (e.clientX < startX) {
|
||||
targetDiv.style.width = targetDivWidth - distX + 'px'
|
||||
// widthTmp = targetDivWidth-distX;
|
||||
}
|
||||
// 往下方拖动：
|
||||
if (e.clientY > startY) {
|
||||
targetDiv.style.height = (targetDivHeight + distY) + 'px'
|
||||
// heightTmp = targetDivHeight+distY;
|
||||
}
|
||||
if (e.clientX > startX) {
|
||||
targetDiv.style.width = (targetDivWidth + distX) + 'px'
|
||||
// widthTmp = targetDivWidth+distX;
|
||||
}
|
||||
|
||||
if (parseInt(targetDiv.style.height) <= _this.minHeight) {
|
||||
targetDiv.style.height = _this.minHeight + 'px'
|
||||
// heightTmp = _this.minHeight;
|
||||
}
|
||||
|
||||
if (parseInt(targetDiv.style.width) >= maxWidth) {
|
||||
targetDiv.style.width = maxWidth + 'px'
|
||||
// widthTmp = maxWidth;
|
||||
}
|
||||
if (parseInt(targetDiv.style.width) <= minWidth) {
|
||||
targetDiv.style.width = minWidth + 'px'
|
||||
// widthTmp = minWidth;
|
||||
}
|
||||
// 调整表格大小
|
||||
const containerHeight = parseInt(targetDiv.style.height)
|
||||
const containerWidth = parseInt(targetDiv.style.width)
|
||||
const chartBox = document.getElementsByClassName('chartBox')
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
|
||||
// chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
// 表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
|
||||
chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`// -75-32+25
|
||||
}
|
||||
|
||||
document.onmouseup = function () {
|
||||
const targetDivHeightNew = parseInt(targetDiv.style.height)
|
||||
// let targetDivHeightNew = heightTmp
|
||||
const targetDivWidthNew = parseInt(targetDiv.style.width)
|
||||
// let targetDivWidthNew = widthTmp;
|
||||
|
||||
const diffHeight = Math.abs(targetDivHeight - targetDivHeightNew)
|
||||
if (targetDivHeight > targetDivHeightNew) {
|
||||
const finalDiffHeight = Math.floor(diffHeight / stepHeight) * stepHeight
|
||||
// alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
|
||||
targetDiv.style.height = (targetDivHeight - finalDiffHeight) + 'px'
|
||||
}
|
||||
if (targetDivHeight < targetDivHeightNew) {
|
||||
const finalDiffHeight = Math.ceil(diffHeight / stepHeight) * stepHeight
|
||||
targetDiv.style.height = (targetDivHeight + finalDiffHeight) + 'px'
|
||||
}
|
||||
|
||||
let span = _this.data.span
|
||||
if (targetDivWidth > targetDivWidthNew) {
|
||||
span = Math.floor((targetDivWidthNew * 12) / maxWidth)
|
||||
const finalWidth = Math.floor((targetDivWidthNew * 12) / maxWidth) * stepWidth
|
||||
if ((finalWidth) < minWidth) {
|
||||
targetDiv.style.width = minWidth + 'px'
|
||||
span = 1
|
||||
} else {
|
||||
targetDiv.style.width = finalWidth + 'px'
|
||||
}
|
||||
}
|
||||
if (targetDivWidth < targetDivWidthNew) {
|
||||
span = Math.ceil((targetDivWidthNew * 12) / maxWidth)
|
||||
const spanUnit = Math.ceil((targetDivWidthNew * 12) / maxWidth)
|
||||
const finalWidth = spanUnit * stepWidth
|
||||
if (finalWidth > maxWidth || spanUnit === 12) {
|
||||
targetDiv.style.width = maxWidth + 'px'
|
||||
span = 12
|
||||
} else {
|
||||
targetDiv.style.width = finalWidth + 'px'
|
||||
}
|
||||
}
|
||||
// 调整表格大小
|
||||
const containerHeight = parseInt(targetDiv.style.height)
|
||||
const containerWidth = parseInt(targetDiv.style.width)
|
||||
|
||||
const chartBox = document.getElementsByClassName('chartBox')
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
|
||||
// chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
// 表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
|
||||
chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`
|
||||
|
||||
const modifyParams = {
|
||||
id: _this.data.id,
|
||||
span: span,
|
||||
height: (containerHeight + _this.chartSpaceHeight),
|
||||
prev: parseInt(_this.data.prev),
|
||||
next: parseInt(_this.data.next)
|
||||
}
|
||||
targetDiv.style.height = (Math.floor((containerHeight + _this.chartSpaceHeight) / 10) * 10 - _this.chartSpaceHeight) + 'px'// 图表实际渲染高度，采用个位数字四舍五入
|
||||
_this.$put('panel/' + _this.panelIdInner + '/charts/modify', modifyParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
// 更新当前图表数据
|
||||
_this.data.span = span
|
||||
_this.data.height = containerHeight + _this.chartSpaceHeight
|
||||
_this.$emit('on-drag-chart', _this.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
_this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
_this.$message.error(response.error)
|
||||
} else {
|
||||
_this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize(e) {
|
||||
let vm = this;
|
||||
this.$chartResizeTool.start(vm, this.data, e);
|
||||
},
|
||||
dragResize:function(e){
|
||||
var diffWidth =20; //界面的宽度空白的地方的宽度
|
||||
var chartBoxPadding = 22;
|
||||
var targetDiv= document.getElementById('chartSingleStatDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
|
||||
var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
|
||||
var maxWidth = targetDivContainer.offsetWidth-diffWidth;
|
||||
var minWidth = maxWidth/12;
|
||||
var stepWidth = maxWidth/12;
|
||||
var stepHeight = 10;
|
||||
|
||||
//得到点击时该容器的宽高：
|
||||
var targetDivHeight=targetDiv.offsetHeight;
|
||||
var targetDivWidth=targetDiv.offsetWidth;
|
||||
var startY=e.clientY;
|
||||
var startX=e.clientX;
|
||||
var _this=this;
|
||||
|
||||
document.onmousemove=function(e){
|
||||
e.preventDefault();
|
||||
//得到鼠标拖动的宽高距离：取绝对值
|
||||
var distY=Math.abs(e.clientY-startY);
|
||||
var distX=Math.abs(e.clientX-startX);
|
||||
|
||||
//往上方拖动：
|
||||
if( e.clientY < startY){
|
||||
targetDiv.style.height=targetDivHeight-distY+'px';
|
||||
//heightTmp = targetDivHeight-distY;
|
||||
}
|
||||
if( e.clientX < startX){
|
||||
targetDiv.style.width=targetDivWidth-distX+'px';
|
||||
//widthTmp = targetDivWidth-distX;
|
||||
}
|
||||
//往下方拖动：
|
||||
if (e.clientY > startY) {
|
||||
targetDiv.style.height=(targetDivHeight+distY)+'px';
|
||||
//heightTmp = targetDivHeight+distY;
|
||||
}
|
||||
if (e.clientX > startX) {
|
||||
targetDiv.style.width=(targetDivWidth+distX)+'px';
|
||||
//widthTmp = targetDivWidth+distX;
|
||||
}
|
||||
|
||||
if(parseInt(targetDiv.style.height)<=_this.minHeight){
|
||||
targetDiv.style.height=_this.minHeight+'px';
|
||||
//heightTmp = _this.minHeight;
|
||||
}
|
||||
|
||||
if(parseInt(targetDiv.style.width)>=maxWidth){
|
||||
targetDiv.style.width=maxWidth+'px';
|
||||
//widthTmp = maxWidth;
|
||||
}
|
||||
if(parseInt(targetDiv.style.width)<=minWidth){
|
||||
targetDiv.style.width=minWidth+'px';
|
||||
//widthTmp = minWidth;
|
||||
}
|
||||
//调整表格大小
|
||||
let containerHeight = parseInt(targetDiv.style.height);
|
||||
let containerWidth = parseInt(targetDiv.style.width);
|
||||
const chartBox = document.getElementsByClassName('chartBox');
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
|
||||
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
//表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer'+_this.chartIndex);
|
||||
chartSingleStatBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
|
||||
document.onmouseup=function(){
|
||||
let targetDivHeightNew = parseInt(targetDiv.style.height);
|
||||
//let targetDivHeightNew = heightTmp
|
||||
let targetDivWidthNew = parseInt(targetDiv.style.width);
|
||||
//let targetDivWidthNew = widthTmp;
|
||||
|
||||
let diffHeight = Math.abs(targetDivHeight-targetDivHeightNew);
|
||||
if(targetDivHeight>targetDivHeightNew){
|
||||
let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
|
||||
//alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
|
||||
targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
|
||||
}
|
||||
if(targetDivHeight<targetDivHeightNew){
|
||||
let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
|
||||
targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
|
||||
}
|
||||
|
||||
var span = _this.data.span;
|
||||
if(targetDivWidth>targetDivWidthNew){
|
||||
span = Math.floor((targetDivWidthNew*12)/maxWidth);
|
||||
let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
|
||||
if((finalWidth)<minWidth){
|
||||
targetDiv.style.width=minWidth+'px';
|
||||
span = 1;
|
||||
}else {
|
||||
targetDiv.style.width = finalWidth+'px';
|
||||
chartBox.style.height = `${height - this.chartSpaceHeight}px`
|
||||
const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
|
||||
singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
|
||||
})
|
||||
this.startLoading()
|
||||
this.divFirstShow = true
|
||||
},
|
||||
screenRefreshChart () {
|
||||
this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.startLoading()
|
||||
this.firstShow = false
|
||||
this.$emit('on-refresh-data', this.data.id)
|
||||
},
|
||||
// 编辑图表
|
||||
editChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-edit-chart-block', this.data.id)
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-remove-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏时间条件查询
|
||||
dateChange (time) {
|
||||
this.seriesItemScreen = []
|
||||
this.serieSingleStat = ''
|
||||
this.startLoading('screen')
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
if(targetDivWidth<targetDivWidthNew){
|
||||
span = Math.ceil((targetDivWidthNew*12)/maxWidth);
|
||||
let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
|
||||
let finalWidth = spanUnit*stepWidth;
|
||||
if(finalWidth>maxWidth || spanUnit===12){
|
||||
targetDiv.style.width=maxWidth+'px';
|
||||
span = 12;
|
||||
}else {
|
||||
targetDiv.style.width = finalWidth+'px';
|
||||
}
|
||||
}
|
||||
//调整表格大小
|
||||
let containerHeight = parseInt(targetDiv.style.height);
|
||||
let containerWidth = parseInt(targetDiv.style.width);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.searchTime = []
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||||
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
const chartBox = document.getElementsByClassName('chartBox');
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
|
||||
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
//表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer'+_this.chartIndex);
|
||||
chartSingleStatBox.style.height = `${containerHeight-_this.titleHeight}px`;
|
||||
this.seriesItemScreen = this.seriesItem
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .single-stat-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
|
||||
if (errorMsg && errorMsg !== '') {
|
||||
this.isError = true
|
||||
this.errorContent = errorMsg
|
||||
} else {
|
||||
this.isError = false
|
||||
this.errorContent = ''
|
||||
}
|
||||
if (seriesItem || (typeof seriesItem === 'number' && seriesItem == 0) || (typeof seriesItem === 'string' && seriesItem != '')) { // 0 为false
|
||||
this.noData = false
|
||||
} else {
|
||||
this.noData = true
|
||||
}
|
||||
|
||||
const modifyParams = {
|
||||
id:_this.data.id,
|
||||
span:span,
|
||||
height:(containerHeight+_this.chartSpaceHeight),
|
||||
prev:parseInt(_this.data.prev),
|
||||
next:parseInt(_this.data.next),
|
||||
}
|
||||
targetDiv.style.height = (Math.floor((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
|
||||
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
//更新当前图表数据
|
||||
_this.data.span= span;
|
||||
_this.data.height= containerHeight+_this.chartSpaceHeight;
|
||||
_this.$emit('on-drag-chart', _this.data);
|
||||
}else {
|
||||
if(response.msg){
|
||||
_this.$message.error(response.msg);
|
||||
}else if(response.error){
|
||||
_this.$message.error(response.error);
|
||||
}else {
|
||||
_this.$message.error(response);
|
||||
}
|
||||
if (area === 'showFullScreen') { // 全屏按时间查询
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
if (Number(seriesItem)) {
|
||||
const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
|
||||
const type = chartItem.param.valueMapping.type
|
||||
const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
|
||||
let mapping
|
||||
if (type == 'value') {
|
||||
mapping = mappings.find(item => { return item.value == singleStatTmp })
|
||||
} else {
|
||||
mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
|
||||
}
|
||||
});
|
||||
document.onmousemove=null;
|
||||
document.onmouseup = null;
|
||||
this.mapping = mapping
|
||||
if (this.mapping && !this.mapping.color) {
|
||||
this.mapping.color = { bac: '#fff', text: '#000' }
|
||||
}
|
||||
this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
} else {
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
}
|
||||
} else {
|
||||
this.serieSingleStat = seriesItem
|
||||
}
|
||||
},
|
||||
startLoading(area){
|
||||
if(area==='screen'){
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
|
||||
}else {
|
||||
//this.showLoading = true;
|
||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||||
}
|
||||
},
|
||||
endLoading(area){
|
||||
if(area==='screen'){
|
||||
//this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
|
||||
}else {
|
||||
//this.showLoading = false;
|
||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||||
}
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time
|
||||
this.endLoading('screen')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
|
||||
let height = Math.floor(chartItem.height/10)*10;//图表高度四舍五入
|
||||
if(height<this.minHeight){
|
||||
height = this.minHeight;
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
|
||||
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
|
||||
});
|
||||
this.startLoading();
|
||||
this.divFirstShow = true;
|
||||
},
|
||||
screenRefreshChart(){
|
||||
this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.startLoading();
|
||||
this.firstShow = false;
|
||||
this.$emit('on-refresh-data', this.data.id);
|
||||
},
|
||||
// 编辑图表
|
||||
editChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-edit-chart-block', this.data.id);
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-remove-chart-block', this.data.id);
|
||||
},
|
||||
//全屏时间条件查询
|
||||
dateChange(time) {
|
||||
this.seriesItemScreen = [];
|
||||
this.serieSingleStat = "";
|
||||
this.startLoading('screen');
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
clearChart(){
|
||||
this.data = {};
|
||||
},
|
||||
duplicate(){
|
||||
this.dropdownMenuShow=false;
|
||||
this.$confirm(this.$t("tip.confirmDuplicate"), {
|
||||
confirmButtonText: this.$t("tip.yes"),
|
||||
cancelButtonText: this.$t("tip.no"),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = {id:this.data.id};
|
||||
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t("tip.duplicateSuccess")
|
||||
});
|
||||
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
|
||||
}else {
|
||||
if(response.msg){
|
||||
this.$message.error(response.msg);
|
||||
}else if(response.error){
|
||||
this.$message.error(response.error);
|
||||
}else {
|
||||
this.$message.error(response);
|
||||
}
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
if (Number(seriesItem)) {
|
||||
const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
|
||||
const type = chartItem.param.valueMapping.type
|
||||
const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
|
||||
let mapping
|
||||
if (type == 'value') {
|
||||
mapping = mappings.find(item => { return item.value == singleStatTmp })
|
||||
} else {
|
||||
mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
},
|
||||
resize(chartItem) {
|
||||
document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .single-stat-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
if(errorMsg && errorMsg!==''){
|
||||
this.isError = true;
|
||||
this.errorContent = errorMsg;
|
||||
}else {
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
}
|
||||
if(seriesItem||(typeof seriesItem == 'number'&&seriesItem == 0) ||(typeof seriesItem=='string'&& seriesItem !='')){ //0 为false
|
||||
this.noData=false;
|
||||
}else{
|
||||
this.noData=true;
|
||||
}
|
||||
|
||||
if(area==='showFullScreen'){//全屏按时间查询
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
if(Number(seriesItem)){
|
||||
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
|
||||
let type=chartItem.param.valueMapping.type;
|
||||
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
|
||||
let mapping;
|
||||
if(type == 'value'){
|
||||
mapping=mappings.find(item=>{return item.value == singleStatTmp})
|
||||
}else{
|
||||
mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
|
||||
}
|
||||
this.mapping=mapping;
|
||||
if(this.mapping&&!this.mapping.color){
|
||||
this.mapping.color={bac:'#fff',text:'#000'}
|
||||
}
|
||||
this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
|
||||
}else{
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
|
||||
this.mapping = mapping
|
||||
if (this.mapping && !this.mapping.color) {
|
||||
this.mapping.color = { bac: '#fff', text: '#000' }
|
||||
}
|
||||
}else {
|
||||
this.serieSingleStat =seriesItem;
|
||||
this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
} else {
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
}
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
this.endLoading('screen');
|
||||
}else{
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.divFirstShow = true;
|
||||
|
||||
this.firstShow = true; // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId;
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
if(Number(seriesItem)){
|
||||
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
|
||||
let type=chartItem.param.valueMapping.type;
|
||||
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
|
||||
let mapping;
|
||||
if(type == 'value'){
|
||||
mapping=mappings.find(item=>{return item.value == singleStatTmp})
|
||||
}else{
|
||||
mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
|
||||
}
|
||||
this.mapping=mapping;
|
||||
if(this.mapping&&!this.mapping.color){
|
||||
this.mapping.color={bac:'#fff',text:'#000'}
|
||||
}
|
||||
this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
|
||||
}else{
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
|
||||
}
|
||||
}else {
|
||||
this.serieSingleStat =seriesItem;
|
||||
}
|
||||
if (filter) { // 保存数据,用于同步时间
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
this.oldSearchTime[0] = this.searchTime[0];
|
||||
this.oldSearchTime[1] = this.searchTime[1];
|
||||
}
|
||||
this.endLoading();
|
||||
} else {
|
||||
this.serieSingleStat = seriesItem
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.firstLoad = false;
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearChart();
|
||||
},
|
||||
};
|
||||
if (filter) { // 保存数据,用于同步时间
|
||||
this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time
|
||||
this.oldSearchTime[0] = this.searchTime[0]
|
||||
this.oldSearchTime[1] = this.searchTime[1]
|
||||
}
|
||||
this.endLoading()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user