|
|
|
|
@ -0,0 +1,577 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<!--左侧部门数据-->
|
|
|
|
|
<el-col :span="6" :xs="24">
|
|
|
|
|
<div class="head-container">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="deptName"
|
|
|
|
|
placeholder="请输入计量设备名称"
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
style="margin-bottom: 20px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="head-container tree">
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="deptOptions"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
:expand-on-click-node="false"
|
|
|
|
|
:filter-node-method="filterNode"
|
|
|
|
|
ref="tree"
|
|
|
|
|
node-key="id"
|
|
|
|
|
:default-expanded-keys="[deptOptions[0].id]"
|
|
|
|
|
highlight-current
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!--右侧用户数据-->
|
|
|
|
|
<el-col :span="18" :xs="24">
|
|
|
|
|
<!--头部搜索条件输入框 -->
|
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
|
<el-form-item label="采集时间">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateRangeone"
|
|
|
|
|
style="width: 240px"
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="选择日期时间"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item><div>-</div></el-form-item>
|
|
|
|
|
<el-form-item><el-date-picker
|
|
|
|
|
v-model="dateRangetwo"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
style="width: 240px"
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="选择日期时间"
|
|
|
|
|
></el-date-picker></el-form-item>
|
|
|
|
|
<!-- <el-form-item label="记录时间">-->
|
|
|
|
|
<!-- <el-date-picker-->
|
|
|
|
|
<!-- v-model="daterangeRecordTime"-->
|
|
|
|
|
<!-- style="width: 340px"-->
|
|
|
|
|
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
|
|
|
|
|
<!-- type="datetimerange"-->
|
|
|
|
|
<!-- range-separator="-"-->
|
|
|
|
|
<!-- start-placeholder="开始时间"-->
|
|
|
|
|
<!-- end-placeholder="结束时间"-->
|
|
|
|
|
<!-- ></el-date-picker>-->
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
<!-- 搜索、重置按钮 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 新增等功能按钮 -->
|
|
|
|
|
<!-- 用户表格 -->
|
|
|
|
|
|
|
|
|
|
<Chart ref="Chart1" class="chart1"/>
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { listLine,listUser, treeDat,delDnbRemoveInstant,deptTreeSelect } from "@/api/ems/powerUse/HistoryElectricity";
|
|
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
|
import Chart from '@/components/Charts/Chart'
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import {iotInstantList} from "@/api/ems/record/recordIOTInstant";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "User",
|
|
|
|
|
dicts: ['sys_normal_disable', 'sys_user_sex'],
|
|
|
|
|
components: { Chart,Treeselect },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 遮罩层
|
|
|
|
|
loading: true,
|
|
|
|
|
// 选中数组
|
|
|
|
|
ids: [],
|
|
|
|
|
// 非单个禁用
|
|
|
|
|
single: true,
|
|
|
|
|
// 非多个禁用
|
|
|
|
|
multiple: true,
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
showSearch: true,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 用户表格数据
|
|
|
|
|
userList: null,
|
|
|
|
|
// 弹出层标题
|
|
|
|
|
title: "",
|
|
|
|
|
// 部门树选项
|
|
|
|
|
deptOptions: [{id: 2}],
|
|
|
|
|
// 是否显示弹出层
|
|
|
|
|
open: false,
|
|
|
|
|
// 部门名称
|
|
|
|
|
deptName: undefined,
|
|
|
|
|
// 默认密码
|
|
|
|
|
initPassword: undefined,
|
|
|
|
|
// 日期范围
|
|
|
|
|
dateRange: [],
|
|
|
|
|
dateRangeone:'',
|
|
|
|
|
dateRangetwo:'',
|
|
|
|
|
// 岗位选项
|
|
|
|
|
postOptions: [],
|
|
|
|
|
// 角色选项
|
|
|
|
|
roleOptions: [],
|
|
|
|
|
// 表单参数
|
|
|
|
|
form: {},
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: "children",
|
|
|
|
|
label: "lable"
|
|
|
|
|
},
|
|
|
|
|
// 用户导入参数
|
|
|
|
|
upload: {
|
|
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
|
|
open: false,
|
|
|
|
|
// 弹出层标题（用户导入）
|
|
|
|
|
title: "",
|
|
|
|
|
// 是否禁用上传
|
|
|
|
|
isUploading: false,
|
|
|
|
|
// 是否更新已经存在的用户数据
|
|
|
|
|
updateSupport: 0,
|
|
|
|
|
// 设置上传的请求头部
|
|
|
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
|
|
|
// 上传的地址
|
|
|
|
|
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
|
|
|
|
|
},
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
orderByColumn: 'collectTime',
|
|
|
|
|
isAsc: 'desc',
|
|
|
|
|
collectType: '',
|
|
|
|
|
monitorSubset:'',
|
|
|
|
|
params:{
|
|
|
|
|
beginCollectTime:'',
|
|
|
|
|
endCollectTime:''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
daterangeRecordTime: [],
|
|
|
|
|
// 列信息
|
|
|
|
|
columns: [
|
|
|
|
|
{ key: 0, label: `计量设备编号`, visible: true },
|
|
|
|
|
{ key: 1, label: `计量设备名称`, visible: true },
|
|
|
|
|
{ key: 2, label: `采集时间`, visible: true },
|
|
|
|
|
{ key: 3, label: `A项电压(V)`, visible: true },
|
|
|
|
|
{ key: 4, label: `B项电压(V)`, visible: true },
|
|
|
|
|
{ key: 5, label: `C项电压(V)`, visible: true },
|
|
|
|
|
{ key: 6, label: `A项电流(A)`, visible: true },
|
|
|
|
|
{ key: 7, label: `B项电流(A)`, visible: true },
|
|
|
|
|
{ key: 8, label: `C项电流(A)`, visible: true },
|
|
|
|
|
{ key: 9, label: `功率因数`, visible: true },
|
|
|
|
|
{ key: 10, label: `仪表值(kW·h)`, visible: true },
|
|
|
|
|
{ key: 11, label: `采集方式`, visible: true },
|
|
|
|
|
{ key: 12, label: `记录时间`, visible: true }
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
// 表单校验
|
|
|
|
|
rules: {
|
|
|
|
|
userName: [
|
|
|
|
|
{ required: true, message: "用户名称不能为空", trigger: "blur" },
|
|
|
|
|
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
nickName: [
|
|
|
|
|
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
|
|
|
|
],
|
|
|
|
|
password: [
|
|
|
|
|
{ required: true, message: "用户密码不能为空", trigger: "blur" },
|
|
|
|
|
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
email: [
|
|
|
|
|
{
|
|
|
|
|
type: "email",
|
|
|
|
|
message: "请输入正确的邮箱地址",
|
|
|
|
|
trigger: ["blur", "change"]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
phonenumber: [
|
|
|
|
|
{
|
|
|
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
|
|
|
message: "请输入正确的手机号码",
|
|
|
|
|
trigger: "blur"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
//采集方式
|
|
|
|
|
dict:[
|
|
|
|
|
{label:'手动',value:'0'},
|
|
|
|
|
{label:'自动',value:'1'},
|
|
|
|
|
{label:'抄表',value:'2'},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
// 根据名称筛选部门树
|
|
|
|
|
deptName(val) {
|
|
|
|
|
this.$refs.tree.filter(val);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.dateRangeone=new Date(new Date().setHours(0, 0, 0, 0));
|
|
|
|
|
var d = new Date(this.dateRangeone);
|
|
|
|
|
let m = ('0'+(d.getMonth()+1)).slice(-2);;
|
|
|
|
|
let tian = ('0'+d.getDate()).slice(-2);
|
|
|
|
|
let h = ('0'+d.getHours()).slice(-2);
|
|
|
|
|
let M = ('0'+d.getMinutes()).slice(-2);
|
|
|
|
|
let s = ('0'+d.getSeconds()).slice(-2);
|
|
|
|
|
|
|
|
|
|
console.log('d',d)
|
|
|
|
|
this.dateRangeone = d.getFullYear()+ '-'+m+ '-'+tian+ ' '+ h+ ':'+M+':'+s;
|
|
|
|
|
this.dateRangetwo=new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
|
|
|
|
|
var d1 = new Date(this.dateRangetwo);
|
|
|
|
|
let m1 = ('0'+(d1.getMonth()+1)).slice(-2);
|
|
|
|
|
let tian1 = ('0'+d1.getDate()).slice(-2);
|
|
|
|
|
let h1 = ('0'+d1.getHours()).slice(-2);
|
|
|
|
|
let M1 = ('0'+d1.getMinutes()).slice(-2);
|
|
|
|
|
let s1 = ('0'+d1.getSeconds()).slice(-2);
|
|
|
|
|
console.log('tian1.length',tian1)
|
|
|
|
|
this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;
|
|
|
|
|
//this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.getDeptTree();
|
|
|
|
|
this.getList();
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.queryParams.params = {};
|
|
|
|
|
this.queryParams.params.beginCollectTime = this.dateRangeone;
|
|
|
|
|
this.queryParams.params.endCollectTime = this.dateRangetwo;
|
|
|
|
|
if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
|
|
|
|
|
this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
|
|
|
|
|
this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
|
|
|
|
|
}
|
|
|
|
|
console.log('this.datatimeone',this.queryParams)
|
|
|
|
|
listLine(this.queryParams).then(response => {
|
|
|
|
|
this.userList = response;
|
|
|
|
|
this.total = response.total;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.getChart()
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
//数组转树形结构
|
|
|
|
|
tranListToTreeData(list) {
|
|
|
|
|
// 最终要产出的树状数据的数组
|
|
|
|
|
const treeList = []
|
|
|
|
|
// 所有项都使用对象存储起来
|
|
|
|
|
const map = {}
|
|
|
|
|
|
|
|
|
|
// 建立一个映射关系：通过id快速找到对应的元素
|
|
|
|
|
list.forEach(item => {
|
|
|
|
|
if (!item.children) {
|
|
|
|
|
item.children = []
|
|
|
|
|
}
|
|
|
|
|
map[item.id] = item
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
list.forEach(item => {
|
|
|
|
|
// 对于每一个元素来说，先找它的上级
|
|
|
|
|
// 如果能找到，说明它有上级，则要把它添加到上级的children中去
|
|
|
|
|
// 如果找不到，说明它没有上级，直接添加到 treeList
|
|
|
|
|
const parent = map[item.pId]
|
|
|
|
|
// 如果存在则表示item不是最顶层的数据
|
|
|
|
|
if (parent) {
|
|
|
|
|
parent.children.push(item)
|
|
|
|
|
} else {
|
|
|
|
|
// 如果不存在 则是顶层数据
|
|
|
|
|
treeList.push(item)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 返回出去
|
|
|
|
|
return treeList
|
|
|
|
|
},
|
|
|
|
|
/** 真查询部门下拉树结构 */
|
|
|
|
|
getDeptTree() {
|
|
|
|
|
treeDat().then(response => {
|
|
|
|
|
response.map((item,index)=>{
|
|
|
|
|
item,
|
|
|
|
|
item.oid=item.id,
|
|
|
|
|
item.lable = item.name
|
|
|
|
|
})
|
|
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 筛选节点
|
|
|
|
|
filterNode(value, data) {
|
|
|
|
|
if (!value) return true;
|
|
|
|
|
return data.lable.indexOf(value) !== -1;
|
|
|
|
|
},
|
|
|
|
|
// 节点单击事件
|
|
|
|
|
handleNodeClick(data) {
|
|
|
|
|
this.queryParams.monitorSubset = data.monitorId;
|
|
|
|
|
console.log(data.monitorId)
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 取消按钮
|
|
|
|
|
cancel() {
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.reset();
|
|
|
|
|
},
|
|
|
|
|
/** 删除按钮操作 */
|
|
|
|
|
handleDelete(row) {
|
|
|
|
|
const objids = row.objid || this.ids;
|
|
|
|
|
this.$modal.confirm('是否确认删除电实时数据编号为"' + objids + '"的数据项？').then(function() {
|
|
|
|
|
return delDnbRemoveInstant(objids)
|
|
|
|
|
}) .then(() => {
|
|
|
|
|
this.getList()
|
|
|
|
|
this.$modal.msgSuccess('删除成功')
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 表单重置
|
|
|
|
|
reset() {
|
|
|
|
|
this.form = {
|
|
|
|
|
userId: undefined,
|
|
|
|
|
deptId: undefined,
|
|
|
|
|
userName: undefined,
|
|
|
|
|
nickName: undefined,
|
|
|
|
|
password: undefined,
|
|
|
|
|
phonenumber: undefined,
|
|
|
|
|
email: undefined,
|
|
|
|
|
sex: undefined,
|
|
|
|
|
status: "0",
|
|
|
|
|
remark: undefined,
|
|
|
|
|
postIds: [],
|
|
|
|
|
roleIds: []
|
|
|
|
|
};
|
|
|
|
|
this.resetForm("form");
|
|
|
|
|
},
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.queryParams.pageNum = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
resetQuery() {
|
|
|
|
|
//this.dateRange = [];
|
|
|
|
|
this.queryParams.collectType = '';
|
|
|
|
|
this.dateRangeone = '';
|
|
|
|
|
this.dateRangetwo = '';
|
|
|
|
|
this.resetForm("queryForm");
|
|
|
|
|
//this.queryParams.deptId = undefined;
|
|
|
|
|
//this.$refs.tree.setCurrentKey(null);
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
// 多选框选中数据
|
|
|
|
|
handleSelectionChange(selection) {
|
|
|
|
|
this.ids = selection.map(item => item.objid)
|
|
|
|
|
this.single = selection.length!==1
|
|
|
|
|
this.multiple = !selection.length
|
|
|
|
|
},
|
|
|
|
|
// 更多操作触发
|
|
|
|
|
handleCommand(command, row) {
|
|
|
|
|
switch (command) {
|
|
|
|
|
case "handleResetPwd":
|
|
|
|
|
this.handleResetPwd(row);
|
|
|
|
|
break;
|
|
|
|
|
case "handleAuthRole":
|
|
|
|
|
this.handleAuthRole(row);
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
|
|
handleExport() {
|
|
|
|
|
let paramsexport = JSON.parse(JSON.stringify(this.queryParams));
|
|
|
|
|
delete paramsexport.pageSize;
|
|
|
|
|
delete paramsexport.pageNum;
|
|
|
|
|
this.download('/energy/record/dnbInstant/export', {
|
|
|
|
|
...paramsexport
|
|
|
|
|
}, `user_${new Date().getTime()}.xlsx`)
|
|
|
|
|
},
|
|
|
|
|
async getChart() {
|
|
|
|
|
console.log(this.userList.map(e => e.collectTime))
|
|
|
|
|
console.log(this.userList.map(e => e.ia))
|
|
|
|
|
console.log(this.userList.map(e => e.ib))
|
|
|
|
|
console.log(this.userList.map(e => e.ic))
|
|
|
|
|
// let query = JSON.parse(JSON.stringify(this.queryParams))
|
|
|
|
|
// const {data} = await iotInstantList(query)
|
|
|
|
|
let option1 = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '电流曲线',
|
|
|
|
|
// this.selectMonitorName
|
|
|
|
|
x: 'center'
|
|
|
|
|
},
|
|
|
|
|
legend:{
|
|
|
|
|
right:0
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: '15%',
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '3%'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// type: 'shadow',
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [{
|
|
|
|
|
type: 'slider'
|
|
|
|
|
}],
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: this.userList.map(e => e.collectTime),
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true, //隐藏X轴轴线
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// show: true //隐藏X轴刻度
|
|
|
|
|
// },
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#000' //X轴文字颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '数值',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#000'
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#000'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: 'ia',
|
|
|
|
|
type: "line",
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
|
|
symbolSize: 2, //标记的大小
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// //折线拐点标志的样式
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: this.userList.map(e => e.ia)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: 'ib',
|
|
|
|
|
type: "line",
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
|
|
symbolSize: 2, //标记的大小
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// //折线拐点标志的样式
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: this.userList.map(e => e.ib)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: 'ic',
|
|
|
|
|
type: "line",
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
|
|
symbolSize: 2, //标记的大小
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// //折线拐点标志的样式
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: this.userList.map(e => e.ic)
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
console.log(option1)
|
|
|
|
|
this.$refs.Chart1.setData(option1)
|
|
|
|
|
|
|
|
|
|
// echarts.connect(this.$refs.Chart1.chart)
|
|
|
|
|
// , this.$refs.Chart2.chart
|
|
|
|
|
// this.$refs.Chart1.chart.on('datazoom', (e) => {
|
|
|
|
|
// option1.dataZoom[0].start = e.start
|
|
|
|
|
// option1.dataZoom[0].end = e.end
|
|
|
|
|
// this.$refs.Chart1.setData(option1)
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.tree {
|
|
|
|
|
width:220px;
|
|
|
|
|
::v-deep .el-tree-node {
|
|
|
|
|
white-space: normal;//关键代码!!!!!!!!!
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
height: 100%;
|
|
|
|
|
align-items: start;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chart1 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 75vh;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
maxw@mesnac.com
2 months ago