- <template>
- <!-- 站点对比分析-选择 -->
- <div class="stationDialogPage">
- <div class="searchBox">
- <el-date-picker
- v-model="dateRange"
- value-format="YYYY-MM-DD"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- @change="constrastData"
- >
- </el-date-picker>
- <el-button type="warning" @click="exportData">
- <el-icon><Download /></el-icon> 导出
- </el-button>
- <el-button type="primary" @click="clearData">
- <el-icon><DeleteFilled /></el-icon> 清除全部
- </el-button>
- </div>
- <div class="stationDialog">
- <div class="stationLeft">
- <el-input v-model="filterText" class="searchInput" placeholder="请输入名称" clearable />
- <el-tree
- ref="treeRef"
- :data="stationList"
- show-checkbox
- node-key="id"
- default-expand-all
- :default-checked-keys="defaultCheckedKeys"
- :props="{ label: 'name', children: 'children' }"
- @check="checkNode"
- v-loading="treeLoading"
- :filter-node-method="filterNode"
- />
- </div>
- <div class="stationRight">
- <!-- 具体echarts分析 -->
- <div id="stationEchartDB" v-if="chartOptionYs.xAxis.data.length > 0" v-loading="echartLoading"></div>
- <!-- 暂无数据 -->
- <el-empty
- v-loading="echartLoading"
- :image-size="200"
- v-if="chartOptionYs.xAxis.data.length == 0"
- style="flex: 1; margin-top: 200px"
- />
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import { monitorPropertyList, monitorPropertyGraphicCompare } from '@/api/dataAnalysis/syntherticData';
- import chartOptionYs from './chartYs';
- import bus from '@/utils/mitt';
-
- const props = defineProps({
- stationDBInfo: Object,
- });
- const { proxy } = getCurrentInstance();
- const myChart = shallowRef(null);
- const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
- const stationList = ref([]);
- const defaultCheckedKeys = ref([]);
- const treeLoading = ref(true);
- const monitorCode = ref([]);
- const echartLoading = ref(false);
- const filterText = ref('');
-
- const propsColor = proxy.fixDict['propsColorYs']; // 根据因子的单位来匹配
-
- // 选择树节点
- function checkNode(data, checkedData) {
- monitorCode.value = [];
- monitorCode.value = checkedData.checkedNodes; //选择的id值
- constrastData();
- }
- // 对树节点进行筛选时执行的方法
- function filterNode(value, data, node) {
- let parentNode = node.parent; // 父级node
- let labels = [node.label]; // 当前node的名字
- let level = 1; // 层级
- while (level < node.level) {
- labels = [...labels, parentNode.label]; // 当前node名字,父级node的名字
- parentNode = parentNode.parent;
- level++;
- }
- return labels.some(d => d.indexOf(value) !== -1);
- }
- /** 根据名称筛选站点 */
- watch(filterText, val => {
- // console.log(val, proxy.$refs['treeRef'].filter(val));
- proxy.$refs['treeRef'].filter(val);
- });
- // 清除所有选中的
- function clearData() {
- monitorCode.value = [];
- proxy.$refs['treeRef'].setCheckedKeys([]);
- constrastData();
- }
-
- // echarts
- function intChart() {
- if (!!myChart.value) {
- myChart.value.dispose();
- }
- myChart.value = proxy.echarts.init(document.getElementById('stationEchartDB'));
- // 绘制图表
- myChart.value.clear();
- myChart.value.setOption(chartOptionYs);
- }
- // 获取监测项
- function getPropertyList() {
- treeLoading.value = true;
- monitorPropertyList().then(res => {
- stationList.value = res.data.filter(item => item.children.length > 0);
- defaultCheckedKeys.value.push(stationList.value[0].children[0].children[0].id); //默认选中第一个
- monitorCode.value.push(stationList.value[0].children[0].children[0]);
- constrastData();
- treeLoading.value = false;
- });
- }
-
- // 导出数据
- async function exportData() {
- let monitorArr = [];
- monitorCode.value.map(item => {
- monitorArr.push({
- monitorCode: item.code,
- stCode: item.assistField1,
- });
- });
- let params = {
- startTime: dateRange.value ? dateRange.value[0] + ' 00:00:00' : '',
- endTime: dateRange.value ? dateRange.value[1] + ' 23:59:59' : '',
- itemListString: JSON.stringify(monitorArr),
- };
- proxy.download(
- 'business/siteHistoryMonitor/monitorPropertyGraphicCompareExport',
- {
- ...params,
- },
- `对比分析_${new Date().getTime()}.xlsx`
- );
- }
-
- // 对比分析搜索
- function constrastData() {
- chartOptionYs.series = [];
- chartOptionYs.legend.data = [];
- chartOptionYs.xAxis.data = [];
- chartOptionYs.yAxis = [];
- chartOptionYs.color = [];
- echartLoading.value = true;
- let monitorArr = [];
- monitorCode.value.map(item => {
- monitorArr.push({
- monitorCode: item.code,
- stCode: item.assistField1,
- });
- });
- let params = {
- startTime: dateRange.value ? dateRange.value[0] + ' 00:00:00' : '',
- endTime: dateRange.value ? dateRange.value[1] + ' 23:59:59' : '',
- itemList: monitorArr,
- };
- monitorPropertyGraphicCompare(params).then(res => {
- let datas = res.data;
- if (JSON.stringify(datas) == '{}' || datas.propertyMonitorXList.length == 0) {
- chartOptionYs.xAxis.data = [];
- echartLoading.value = false;
- return false;
- } else {
- chartOptionYs.xAxis.data = datas.propertyMonitorXList;
- datas.propertyMonitorList.map(item => {
- setEchartY(item); //设置多y轴
- // console.log(chartOptionYs.yAxis, '--', chartOptionYs.color);
- chartOptionYs.series.push({
- name: item.stName + '--' + item.monitorPropertyName + item.propertyUnit,
- type: 'line',
- lineStyle: { color: chartOptionYs.color[chartOptionYs.yAxis.length - 1] },
- smooth: true,
- data: item.ylist,
- yAxisIndex: chartOptionYs.yAxis.length - 1,
- });
- chartOptionYs.legend.data.push(item.stName + '--' + item.monitorPropertyName + item.propertyUnit);
- });
- chartOptionYs.grid.left = 50 * (chartOptionYs.yAxis.length - 1); //left值设置
- setTimeout(() => {
- intChart();
- });
- echartLoading.value = false;
- }
- });
- }
- // 设置多y轴
- function setEchartY(row) {
- propsColor.map((item, index) => {
- if (row.propertyUnit == item.label) {
- chartOptionYs.color.push(item.color);
- chartOptionYs.yAxis.push({
- name: item.value, //value是英文单位,label是中文单位
- position: 'left',
- offset: 50 * chartOptionYs.yAxis.length,
- axisLine: { show: true, lineStyle: { color: item.color } },
- axisTick: { show: true },
- splitLine: {
- show: true, // 显示网格线
- lineStyle: { type: 'dashed' },
- },
- });
- }
- });
- chartOptionYs.color = [...new Set(chartOptionYs.color)]; //颜色和值对应
- chartOptionYs.yAxis = unique(chartOptionYs.yAxis); //去重
- }
- // 数组内对象去重
- function unique(arr) {
- let allArr = [];
- for (let i = 0; i < arr.length; i++) {
- let flag = true;
- for (let j = 0; j < allArr.length; j++) {
- if (arr[i].name == allArr[j].name) {
- flag = false;
- }
- }
- if (flag) {
- allArr.push(arr[i]);
- }
- }
- return allArr;
- }
-
- //自适应
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
-
- // 初始化
- onMounted(() => {
- getPropertyList(); //获取监测项
- window.addEventListener('resize', resizeTheChart);
- bus.on('toggleSideBarClick', e => {
- // console.log(e, document.querySelector('.stationRight').clientWidth);
- // myChart.value.resize({ width: width });
- });
- });
- onUnmounted(() => {
- window.removeEventListener('resize', resizeTheChart);
- bus.off('toggleSideBarClick');
- });
- </script>
- <style lang="scss">
- .stationDialogPage {
- padding-bottom: 10px;
- .searchBox {
- margin-bottom: 10px;
- .el-button {
- margin-left: 10px;
- margin-top: -5px;
- }
- }
- .stationDialog {
- width: 100%;
- margin-bottom: 30px;
- display: flex;
- .stationLeft {
- width: 400px;
- height: 600px;
- padding: 15px;
- .searchInput {
- margin-bottom: 10px;
- }
- .el-tree {
- height: calc(100vh - 200px) !important;
- overflow: auto;
- }
- .el-tree-node__expand-icon.is-leaf {
- visibility: hidden;
- }
- }
- .stationRight {
- width: 100%;
- flex: 1;
- margin-left: 10px;
- #stationEchartDB {
- height: 600px;
- width: 100%;
- }
- }
- }
- }
- </style>