Skip to content

G
gavel-erp-vue
Commit 95534740 authored by 李苏's avatar 李苏 💬
Browse files
Options

iot适用页面 临时等待后端完善移植到公共

parent 3f7e0fda
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2160 additions and 1 deletion
src/permission.js
View file @ 95534740
......@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => {
console.log(to,'route')
// console.log(store.state.user.token)
// NProgress.start()
if (getToken()) {
......
src/views/iot/RealChartConfigure/index.vue
View file @ 95534740
......@@ -24,7 +24,7 @@
</template>
<script>
const id = '2C9577B7912B11DD0191C190E23F64DF'
let id = '2C9577B7912B11DD0191C190E23F64DF'
export default {
name: 'RealChartConfigure',
......
src/views/iot/zttzs/index.vue 0 → 100644
View file @ 95534740
<template>
<div>
zttzs/test
</div>
</template>
<script>
</script>
<style>
</style>
src/views/realchart/configureinst/api.js 0 → 100644
View file @ 95534740
import request from './request'
export function importTemp(query,url) {
return request({
'Content-type' : 'multipart/form-data',
url: url,
method: 'post',
data: query||{}
})
}
export function realchartDown(id) {
return request({
'accept' : '*/*',
url: `/realchart/configureinst/${id}/download`,
method: 'post',
})
}
export function apiLast(query,id,time) {
return request({
'accept' : '*/*',
url: `realchart/configureinst/${id}/last?_st=${time}`,
method: 'post',
data: query||{}
})
}
src/views/realchart/configureinst/demo.html 0 → 100644
View file @ 95534740
This diff is collapsed.
src/views/realchart/configureinst/hf.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="">
<el-form slot="form" ref="form" :model="form" label-width="100px" :rules="rules">
<el-row :gutter="20" :app="this" class="editRow">
<EditColItem :required="item.required||false" :readonly="item.readonly?true:false "
v-for="(item,index) in editColItemList " :value="item.value" :span="item.span" :label="item.label"
v-if="(item.show==false)?false:true" :prop='item.prop' :key="item.prop" :type="item.type"
:typeConfig='item.typeConfig' :rule="item.rule" />
<!-- 额外数据 -->
</el-row>
</el-form>
</div>
<div slot="reFooter" class="refooter">
<span slot="footer" class="dialog-footer">
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">确 定</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
import {
editMixin,
editMixin_expand
} from 'common'
export default {
mixins: [editMixin, editMixin_expand],
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
/* 初始化数据 ,赋值主表数据*/
this.$nextTick(() => {
// this.form.id = this.app.singleItem.id
})
},
data() {
return {
readonly: false,
editColItemList: [{
label: '开始时间',
prop: 'start',
span: 24,
type: 'datetime',
value: new Date().getTime() - 5 * 60 * 1000,
required: true,
},
{
label: '结束时间',
prop: 'end',
span: 24,
type: 'datetime',
value: new Date().getTime(),
required: true,
},
{
label: '倍数',
prop: 'rate',
span: 24,
type: 'RelSelect',
value: '1',
required: true,
typeConfig: {
"optionsData": [{
id: '1',
name: '1倍'
},
{
id: '2',
name: '2倍'
},
{
id: '4',
name: '4倍'
},
{
id: '8',
name: '8倍'
},
{
id: '16',
name: '16倍'
},
],
"match": {
"value": "id",
"label": "name"
}
}
},
]
}
},
methods: {
save() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.app.showDialog=false
this.$emit('bfsz',this.form)
}
})
}
}
}
</script>
<style scoped>
</style>
src/views/realchart/configureinst/index.vue 0 → 100644
View file @ 95534740
<template>
<div class="min_full">
<ShowEcharts :app='this' v-if="showDialog==true&&DialogTitle!='播放控制'&&DialogTitle!='回放'" />
<Hf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='播放控制'" />
<ShowHf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='回放'" />
<div class="tool-bar search">
<!-- svg 工具栏-->
<el-button icon="el-icon-video-play" @click='hf' size='mini' type="primary">回放</el-button>
<span style="margin-left: 20px;">{{time}}</span>
</div>
<div ref="svg" v-html="nowHtml" class="svgBody">
</div>
</div>
</template>
<script>
import {
realchartDown,apiLast
} from './api.js'
import ShowEcharts from './showEcharts.vue'
import Hf from './hf.vue'
import ShowHf from './showHf.vue'
export default {
components:{
ShowEcharts,
Hf,
ShowHf
},
mounted() {
this.timer01 = setInterval(() => {
this.time = new Date().Format("yyyy-MM-dd hh:mm:ss")
}, 1000)
this.timer02 = setInterval(() => {
if(this.metrics.length>0){
this.apiLast()
}else{
console.log('dom未读取到数据')
}
}, 1000)
this.$nextTick(() => {
const url = this.$route.meta.url
this.baseUrl = this.id = this.matchString(url)[0]
this.getSvg()
})
},
beforeDestroy() {
clearInterval(this.timer01)
},
data() {
return {
/* 弹框相关*/
DialogTitle:'',
DialogWidth:'50vw',
showDialog:false,
id: '',
baseUrl: '',
time: '',
timer01: null,
timer02: null,
nowHtml: '',
metrics: [],
metricName: {},
/* 确定时获取最新的播放设置参数*/
bfszParams:{}
}
},
methods: {
bfsz(bfsz){
this.bfszParams=bfsz
/* 获取后进行showHf的弹框*/
this.DialogWidth='60vw'
this.DialogTitle='回放'
setTimeout(()=>{
this.showDialog=true
})
},
matchString(str) {
const regex = /\/([^/]+)\/index/g;
const matches = [];
let match;
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]);
}
return matches;
},
getSvg() {
/* 清空订阅主题*/
this.metrics = []
realchartDown(this.id).then(res => {
this.nowHtml = res
this.$nextTick(() => {
$(this.$refs.svg).find('text[tagid]').each((i, item) => {
var a = {
id: $(item).attr("tagid"),
}
this.metrics.push(a);
});
/* 请求 似乎没有任何作用*/
// this.$post(`realchart/configureinst/${this.id}/query/metrics`,{
// metrics:this.metrics
// }).then(res=>{
// if(res.success&&res.data.records){
// res.data.records.forEach(item=>{
// })
// }
// })
/* jq*/
$(this.$refs.svg).find('text[tagid]').each((i, item)=>{
var sTitle = "";
$(item).css("cursor", "pointer");
if ($(item).find("title").length > 0) {
if ($(item).find("title").text() == '') {
if (this.metricName && this.metricName[$(item).attr("tagid")]) {
$(item).find("title").text(this.metricName[$(item).attr("tagid")])
}
}
var title = $(item).find("title").text();
sTitle = title;
$(item).find("title").text("点击查看" + title + "趋势图");
} else {
var a = '';
if (this.metricName && this.metricName[$(item).attr("tagid")]) {
a = this.metricName[$(item).attr("tagid")]
}
$(item).append("<title>点击查看" + a + "趋势图</title>");
}
$(item).unbind().bind("click", (event) => {
event.preventDefault();
// sconsole.log(sTitle)
this.showEchart($(item).attr("tagid"),sTitle)
// divElemen.show();
// showChart(divElemen,'openlist',$(item).attr("tagid"),sTitle,$(item).attr("exp"));
// this.apiLast()
})
});
})
})
},
apiLast(){
apiLast({
metrics:this.metrics
}, this.id,new Date().getTime()).then(res=>{
res.forEach(item=>{
$(this.$refs.svg).find(`text[tagid=${item.metric}]`).text(item.value)
})
})
},
hf() {
this.DialogWidth='30vw'
this.DialogTitle='播放控制'
this.showDialog=true
},
showEchart(tagid,title){
this.now_tagid=tagid
this.DialogWidth='70vw'
this.DialogTitle=title
this.showDialog=true
}
}
}
</script>
<style lang="scss" scoped>
.svgBody {
height: calc(100% - 50px);
width: 100%;
overflow: auto;
}
</style>
<style>
#LOADING{
display: none!important;
}
</style>
src/views/realchart/configureinst/request.js 0 → 100644
View file @ 95534740
import axios from 'axios'
import xtwzc from 'common/src/assets/image/xtwzc.png'
import {showLoading,hideLoading,timerOutLoading} from 'common/src/utils/apiLoading.js'
import {
Notification,
MessageBox,
Message,
Loading
} from 'element-ui'
import store from '@/store'
// import {
// getToken
// } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import {
tansParams,
blobValidate
} from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import {
saveAs
} from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = {
show: false
};
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 6000000
})
// request拦截器
service.interceptors.request.use(
config => {
/* loading */
showLoading()
timerOutLoading(3000)
/* 整体加载展示 */
config.headers.Gtoken = localStorage.getItem('Gtoken') || sessionStorage.getItem('Gtoken') || store.state
.user.token || ''
if (config.headers.Gtoken == undefined) {
config.headers.Gtoken = ''
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(res => {
hideLoading()
return res.data
},
error => {
if (error && error.response.status == 403) {
MessageBox.confirm(
'您无权处理该资源或者登录超时，您可以联系相关管理员。如因其他原因导致登录超时，需要继续保存当前数据请勿关闭本页面，并点击取消操作，然后在同一个浏览器另外开启页签重新登录系统后再在本页面进行保存操作！',
'系统提示403', {
confirmButtonText: '取消操作',
cancelButtonText: '重新登录',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
}).catch(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/index';
})
})
return
}
if (error && error.response.status == 900) {
return
}
let {
message
} = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
if (message.includes('404')) {
throw Error(message)
} else {
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename) {
downloadLoadingInstance = Loading.service({
text: "正在下载数据，请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
return service.post(url, params, {
transformRequest: [(params) => {
return tansParams(params)
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
/* 传递fileName 优先filename*/
saveAs(blob, filename || data.filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close();
})
}
/* dowload Json */
export function downloadJson(url, params, filename) {
downloadLoadingInstance = Loading.service({
text: "正在下载数据，请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
return service.post(url, params, {
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename|| data.filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close();
})
}
export default service
src/views/realchart/configureinst/showEcharts.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="display: flex;height: 60vh;flex-direction: column;">
<!-- 搜索条件-->
<div class="search" style="border-bottom: 0px;">
<el-button @click="search" class="search-button" size="mini" style="position: absolute;right: 10px;top: 9px;"
type="primary" icon="el-icon-search">查询</el-button>
<!-- rangev2-->
<el-row :gutter="20" class="search-row-1">
<el-col :span="12" class="search-col">
<div class="search-item">
<span class="search-span">时间范围:</span>
<RelDatetimerangeV2 :form='queryParams' start='start' end='end' />
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">频率:</span>
<RelSelect :optionsData='optionsData' :match="{value:'id',label:'name'}" v-model='queryParams.interval'>
</RelSelect>
</div>
</el-col>
</el-row>
</div>
<!-- echarts 区域-->
<div ref="echarts" class="ecs">
</div>
</div>
<div slot="reFooter" class="refooter">
<span slot="footer" class="dialog-footer">
<el-button @click="app.showDialog=false">关 闭</el-button>
<!-- <el-button type="primary" @click="save()">保 存</el-button> -->
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(()=>{
this.myChart= this.$echarts.init(this.$refs.echarts);
this.setOptions()
this.search()
})
},
data() {
return {
myChart:null,
queryParams: {
start: new Date().getTime() - 24 * 60 * 60 * 1000,
end: new Date().getTime(),
interval: 60
},
optionsData: [{
name: '1秒',
id: 1
},
{
name: '5秒',
id: 5
},
{
name: '10秒',
id: 10
},
{
name: '30秒',
id: 30
},
{
name: '1分钟',
id: 60
},
{
name: '5分钟',
id: 300
},
{
name: '15分钟',
id: 900
},
{
name: '30分钟',
id: 1800
},
{
name: '1小时',
id: 3600
},
{
name: '2小时',
id: 7200
}
]
}
},
methods: {
search(){
this.myChart.showLoading({
text: '数据正在努力加载...',
textStyle: { fontSize :12 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
});
let url=`realchart/configureinst/${this.app.id}/metric/values?_st=${new Date().getTime()}`
let params={
metric:this.app.now_tagid,
...this.queryParams
}
this.$post(url,params).then(res=>{
if(res["success"]){
var datas=res["data"]["records"];
var data=[];
if ( !!datas && datas.length >=0 ){
$.each(datas, function (i, item) {
var value=item.value;
if(item.value&&!(typeof item.value =='number'||typeof item.value=='string')){
value=0;
}
data.push([item.millisecond,parseFloat(value).toFixed(2)]);
});
var option = this.myChart.getOption();
option.series[0].data = data;
this.myChart.setOption(option);
}
}
this.myChart.hideLoading();
})
},
setOptions(){
let option = {
title: {
text:'' ,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px',
formatter: function (params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function (i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
show:false,
scale:true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000&& value <100000000) {
value = value / 10000000 + "千万";
}else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
},
series: [{
name: '实时数据',
type: 'line',
showSymbol: false,
symbolSize:6,
hoverAnimation: false,
data:[]
}]
}
this.myChart.setOption(option)
}
}
}
</script>
<style scoped>
.ecs{
width: 100%;
height: calc(100% - 50px);
}
</style>
src/views/realchart/configureinst/showHf.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" v-html="app.nowHtml" style="max-height: 70vh;overflow: auto;" >
</div>
<div slot="reFooter" class="refooter" >
<span slot="footer" class="dialog-footer" >
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">保 存</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: ()=>{
return {}
}
}
},
async mounted() {
this.$nextTick(()=>{
/* 开始回放请求*/
let params={
metrics:this.app.metrics,
...this.app.bfszParams
}
this.$post(`realchart/configureinst/${this.app.id}/playback`,params).then(res=>{
})
})
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/realchart/qsztfx/dialog.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
</div>
<div slot="reFooter" class="refooter" >
<span slot="footer" class="dialog-footer" >
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">保 存</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: ()=>{
return {}
}
}
},
async mounted() {
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/realchart/qsztfx/edit.vue 0 → 100644
View file @ 95534740
<!--
* @Description:生成基础baseEdit组件，屏蔽不必要细节
* @Author: lisu lisu@gavelinfo.com
* @Date: 2024-09-19 10:47:46
* @LastEditors: lisu lisu@gavelinfo.com
* @LastEditTime: 2024-09-19 14:24:01
* @FilePath: /easyWork/static/baseEdit.vue
-->
<template>
<!-- prop 穿透赋值 -->
<BaseEdit v-bind="$attrs" :config='editConfig'>
<template #dialog="ctx">
<!-- 嵌入默认页面额外弹框的插槽 ctx.editPage来操作默认页面 -->
</template>
<template #toolbar="ctx">
<!-- 嵌入默认页面从表上方插槽 ctx.editPage来操作默认页面 -->
<!-- <el-button @click="demo(ctx.editPage)" size='mini' type="primary">示例按钮</el-button> -->
<!-- <AuxButton :dynamic='true' :queryParams="{
sbxxTreeId:that.form.sbxxTreeId,
zt:'N'
}" :component='Qxsj' rename='选择缺陷数据' code='dynamic' @save="saveQxsj" /> -->
</template>
</BaseEdit>
</template>
<script>
export default {
data() {
return {
editConfig: {
/* 生成form表单 */
editColItemList: [{
label: '编码',
prop: 'code',
span: 12,
type: 'input',
required: true,
},
{
label: '名称',
prop: 'name',
span: 12,
type: 'input',
required: true,
},
{
label: '备注',
prop: 'bz',
span: 24,
type: 'input'
},
],
/* 生成主从表,为空数组默认不展示 */
editTableTitle: [
// {
// title: "序号",
// field: "xh",
// width: 50,
// align: "center"
// },
// {
// title: "点检部位",
// field: "bw",
// width: 180,
// },
// {
// title: "点检项目",
// field: "project",
// width: 160
// },
// {
// title: "点检标准",
// field: "standard",
// width: 140
// },
],
/* 子表名，可选 同editTableTitle一起用*/
detailTable: ''
}
}
},
methods: {
/**
* @description:示例按钮
* @param {*} ctx操作edit实例内容
* @return {*}
* @author: lisu
*/
// demo(ctx){}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/views/realchart/qsztfx/index.vue 0 → 100644
View file @ 95534740
<template>
<div style=" height: calc(100vh - 84px);width: 100%;">
<!-- 上半部分，占整个高度的一半 -->
<div v-echartResize="()=>{
iotChart.resize();
}" ref="iotChart" style=" background-color: #f0f2f5;height: 50%;width: 100%;">
<!-- 上半部分内容 -->
</div>
<!-- 下半部分，占整个高度的一半 -->
<div style="height: 50%;width: 100%;display: flex;">
<!-- 左半部分，占下半部分宽度的70% -->
<div style=" background-color: #e6ebf1;width: 100%;height: 100%;">
<TablePager :operateButtons='false' :fePage='true' v-if="tp1Loading" ref="tp1" :app='this'>
</TablePager>
</div>
<!-- 右半部分，占下半部分宽度的30% -->
<!-- <div style="width: 30%;height: 100%; background-color: #f0f2f5;">
</div> -->
</div>
</div>
</template>
<script>
let id = '2C9577B7912B11DD0191C190E23F64DF'
export default {
name: 'RealChartConfigure',
mounted() {
// 初始化echarts
this.$nextTick(() => {
this.iotChart = this.$echarts.init(this.$refs.iotChart, 'dark')
const url = this.$route.meta.url
this.baseUrl = this.id = this.matchString(url)[0]
this.apiGetConfig()
this.timer = setInterval(() => {
this.apiGetConfig()
}, 5000)
})
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
},
data() {
return {
timer: null,
iotChart: null,
id: '',
tp1Loading: false,
tableTitle: [],
// 特殊补充
powerObj: {},
queryParams: {},
rowKey: 'timeStamp',
baseUrl: id
}
},
methods: {
matchString(str) {
const regex = /\/([^/]+)\/index/g;
const matches = [];
let match;
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]);
}
return matches;
},
apiGetConfig() {
this.$post(`realchart/qsztfx/config/${this.id}`).then(result => {
if (result["success"]) {
var config = result["data"]["config"];
var option = {
title: {
text: config.name,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
className: 'echarts-tooltip',
appendToBody: true,
formatter: function(params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function(i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
},
series: []
};
this.iotChart.setOption(option);
/* 渲染图*/
this.apiGetSearchdata()
}
})
},
apiGetSearchdata() {
this.$post(`/realchart/qsztfx/searchdata/${this.id}`).then(res => {
/* 渲染echarts*/
var records = res['data']['trenddata'];
var datas = records['datas'];
var legend = [];
var series = [];
var list = [];
var timeGroup = {};
$.each(datas, function(i, data) {
legend.push(data["name"]);
var points = [];
$.each(data["points"], function(key, value) {
points.push([Number(key), parseFloat(value || 0).toFixed(1)])
})
series.push({
name: data["name"],
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: points
});
var last = '';
for (var i in data["points"]) {
last = i;
}
list.push({
name: data["name"],
value: data["points"][last]
});
var metric = data["metric"];
$.each(data["points"], function(key, value) {
var obj = timeGroup[key] || {};
obj["time"] = new Date(Number(key)).Format("yyyy-MM-dd hh:mm:ss");
obj[metric] = value;
timeGroup[key] = obj;
});
});
var option = this.iotChart.getOption();
option.legend = {
orient: "vertical",
x: "right",
padding: 10,
show: true,
data: legend
};
option.series = series;
this.iotChart.setOption(option);
/* */
const trenddata = res.data.trenddata
const list02 = trenddata.datas
const title = [{
label: '时间',
prop: 'timeStamp',
width: 180,
// formatter:function(a,b,c) {
// let show =
// return show
// }
}]
list02.forEach(item => {
/* 首先构建title*/
title.push({
label: item.name,
prop: item.name,
width: 180,
})
})
this.tableTitle = title
/* 开始构建表格数据*/
const timeStampObj = {}
list02.forEach(item => {
const points = item.points
let name = item.name
Object.keys(points).forEach(key => {
if (timeStampObj[key]) {
timeStampObj[key][name] = points[key]
} else {
timeStampObj[key] = {}
timeStampObj[key][name] = points[key]
}
})
})
const data = Object.keys(timeStampObj).map(key => {
timeStampObj[key]['timeStamp'] = $moment(parseInt(key)).format('YYYY-MM-DD HH:mm:ss')
return timeStampObj[key]
})
data.reverse()
this.tp1Loading = true
this.$nextTick(() => {
this.$refs.tp1.total = data.length
this.$refs.tp1.fePageData = data
this.$refs.tp1.tableData = this.$refs.tp1.fePageDateShow()
// 禁用刷新
this.$refs.tp1.refresh = () => {
return false
}
})
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .echarts-tooltip {
z-index: 999999999 !important;
}
/* 可以在这里添加样式 */
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment