1727 lines
60 KiB
Vue
1727 lines
60 KiB
Vue
// Variable overrides first
|
||
$primary: #900;
|
||
$enable-shadows: true;
|
||
$prefix: "mo-";
|
||
|
||
// Then import Bootstrap
|
||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||
import * as echarts from 'echarts';
|
||
|
||
|
||
|
||
<template>
|
||
<el-header class = 'containerHead'>
|
||
<HeaderPage :pageTitle = 'pageTitle'></HeaderPage>
|
||
<el-button class = 'btnReturnHomePage' @click="returnHome">
|
||
<el-tooltip content = '返回首页'>
|
||
<el-icon><ArrowLeft /></el-icon>
|
||
</el-tooltip>
|
||
</el-button>
|
||
</el-header>
|
||
<el-container>
|
||
<div class="container">
|
||
<div class="left-grid">
|
||
<el-card>
|
||
<el-switch
|
||
v-model="OpenSelected"
|
||
class="ml-2"
|
||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||
/>
|
||
<p6 v-show= OpenSelected>启用多元素/多性质比较</p6>
|
||
<p6 v-show= !OpenSelected>禁用多元素/多性质比较</p6>
|
||
<el-select v-model="Selectedcol" placeholder="Select" style="width: 240px" v-show="OpenSelected">
|
||
<el-option
|
||
v-for="(item,index) in mycolumns"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.prop"
|
||
/>
|
||
</el-select>
|
||
<div v-show = OpenSelected>
|
||
<div>
|
||
<div style="max-width: 600px; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;" v-for="(i, index) in SelectedName" :key="index">
|
||
<el-alert :title="`已选中：${i}`" type="success" :closable="false" style="margin-right: 10px;"></el-alert>
|
||
<el-button type="success" plain @click="deleteSelected(index)">删除</el-button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-input
|
||
v-model="SelectNowName"
|
||
style="width: 240px"
|
||
placeholder="输入需要选择的实体名称"
|
||
clearable
|
||
/>
|
||
<el-button type="primary" @click="AddSelectedName">确定</el-button>
|
||
</div>
|
||
</div>
|
||
<el-divider />
|
||
|
||
<el-row>
|
||
<el-form>
|
||
<div class="demo-select">
|
||
<div class="block">
|
||
<span class="demonstration">数据可视化</span>
|
||
<el-select v-model="selectedEntity" placeholder="选择生成的表格类型" style="width: 400px">
|
||
<el-option
|
||
v-for="entity in entityOptions"
|
||
:key="entity.value"
|
||
:label="entity.label"
|
||
:value="entity.value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<!-- 动态输入组件 -->
|
||
<component
|
||
:is="currentComponent"
|
||
ref="dynamicComponent"
|
||
@change="handlerow"
|
||
@update:selectedEntity="handleSelectedEntity"
|
||
@update:selectedrow="handleSelectedRow"
|
||
@update:selectedChartType="handleSelectedChartType"
|
||
@update:selectedrow2="handleSelectedRow2"
|
||
@update:selectedrow3="handleSelectedRow3"
|
||
@update:selectedcul1="handleUpdateSelectedCul"
|
||
@update:selectedcul2="handleUpdateSelectedCul"
|
||
@update:selectedcul3="handleUpdateSelectedCul"
|
||
:rowOptions="convertedColumns"
|
||
:rowOptions2="convertedColumns"
|
||
:Message1="SendOpenSelected"
|
||
:Message2="SendOpenSelected"
|
||
:Message3="SendOpenSelected"
|
||
:Message4="SendOpenSelected"
|
||
>
|
||
</component>
|
||
<!-- <el-card v-if="entity">
|
||
<el-row>
|
||
<el-table
|
||
:data="columnData"
|
||
:show-header="true"
|
||
:max-height="200"
|
||
@selection-change="handleSelectionChange"
|
||
stripe
|
||
>
|
||
<el-table-column type="selection" width="55" style="background-color: black;"/>
|
||
<el-table-column
|
||
prop="name"
|
||
label="对象"
|
||
header-style="background-color: black; color: white;"
|
||
style="text-align: center;">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</el-row>
|
||
</el-card> -->
|
||
<el-form-item>
|
||
<el-button type="primary" size="medium" @click="handleGenerateChart">
|
||
点击生成图表
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
<div class="right-grid" v-if="hasUpperContent">
|
||
|
||
<el-button type="danger" @click="clearchart">取消</el-button>
|
||
<div ref="chartContainer" class="chart-container"></div>
|
||
|
||
|
||
</div>
|
||
<div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
|
||
</div>
|
||
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { ref } from 'vue'
|
||
|
||
import { markRaw } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import * as echarts from 'echarts';
|
||
import Entity1Form from '@/components/graph/Entity1Form.vue';
|
||
import Entity2Form from '@/components/graph/Entity2Form.vue';
|
||
import Entity3Form from '@/components/graph/Entitu3Form.vue';
|
||
import Entity4Form from '@/components/graph/Entity4Form.vue';
|
||
// import Entity5Form from '@/components/graph//Entity5Form.vue';
|
||
import HeaderPage from "@/components/HeaderPage.vue";
|
||
import { avatarEmits } from 'element-plus';
|
||
import AddDialog from '@/components/components_cluespage/AddDialog.vue';
|
||
export default {
|
||
|
||
components: {
|
||
Entity1Form,
|
||
Entity2Form,
|
||
Entity3Form,
|
||
Entity4Form,
|
||
|
||
HeaderPage
|
||
},
|
||
props: ['columns','tabledata'],
|
||
data() {
|
||
|
||
return {
|
||
ISmul4:false,
|
||
selectedColumnData:Array,
|
||
xz:[],
|
||
yz:[],
|
||
pageTitle:'图形可视化',
|
||
mytable:[],
|
||
mycolumns:'',
|
||
item:[],
|
||
records:[],
|
||
inputStr:[],
|
||
Rdata: [], // 示例数据，可以替换为实际数据
|
||
interval: '', // 间隔x，可以根据需求调整
|
||
stype:'',
|
||
srow:'',
|
||
srow2:'',
|
||
srow3:'',
|
||
gap:'',
|
||
monthKey:'',
|
||
chartType: 'bar',
|
||
hasUpperContent: false,
|
||
chartInstance: null ,// 存储图表实例的引用
|
||
selectedEntity: '', // 默认选中的实体
|
||
entityOptions: [
|
||
{ value: 'entity1', label: '以单一日期存在为横坐标' },
|
||
{value:'entity2',label:'以两个日期之间存在为横坐标'},
|
||
{ value: 'entity3', label: '实数区间为横坐标' },
|
||
{ value: 'entity4', label: '字符串意义上的完全相同为横坐标' },
|
||
|
||
],
|
||
dates: [],
|
||
|
||
SelectedName: [],
|
||
SelectNowName: ref(''),
|
||
OpenSelected: ref(false),
|
||
Selectedcol:"",
|
||
|
||
//传送点
|
||
Selectedcul:[],
|
||
};
|
||
},
|
||
// watch: {
|
||
// mytable: {
|
||
// handler(newVal, oldVal) {
|
||
// console.log('mytable changed');
|
||
// console.log('New Value:', newVal);
|
||
// console.log('Old Value:', oldVal);
|
||
// // 在这里可以添加你希望在mytable变化时执行的逻辑
|
||
// },
|
||
// deep: true // 如果需要深度监听对象内部的变化，可以设置deep为true
|
||
// }
|
||
// },
|
||
computed: {
|
||
// entity()
|
||
// {
|
||
// if (this.selectedEntity=='entity5')
|
||
// return 1;
|
||
// else
|
||
// return 0;
|
||
// },
|
||
columnData() {
|
||
if (this.srow)
|
||
{
|
||
let name=this.srow
|
||
const uniqueSet = new Set(this.mytable.map(item => item[name]));
|
||
// 将 Set 转换为数组形式
|
||
const uniqueArray = Array.from(uniqueSet).map(name => ({ name: name }));
|
||
return uniqueArray;
|
||
}
|
||
else
|
||
return '';
|
||
},
|
||
convertedColumns() {
|
||
return this.mycolumns.map(item => {
|
||
return { value: item.prop, label: item.label };
|
||
})
|
||
},
|
||
SendOpenSelected(){
|
||
return this.OpenSelected;
|
||
},
|
||
currentComponent() {
|
||
switch (this.selectedEntity) {
|
||
case 'entity1':
|
||
return 'Entity1Form';
|
||
case 'entity2':
|
||
return 'Entity2Form';
|
||
case 'entity3':
|
||
return 'Entity3Form';
|
||
case 'entity4':
|
||
return 'Entity4Form';
|
||
// case 'entity5':
|
||
// return 'Entity5Form';
|
||
default:
|
||
return null;
|
||
}
|
||
},
|
||
},
|
||
created()
|
||
{
|
||
//console.log(this.$route.params.tabledata)
|
||
this.mytable=JSON.parse(this.$route.params.tabledata);
|
||
this.mycolumns = JSON.parse(this.$route.params.columns);
|
||
|
||
// console.log('Parsed columns:', this.mycolumns,this.table);
|
||
},
|
||
methods: {
|
||
isValidDate(year, month, day) {
|
||
if (isNaN(year) || isNaN(month) || isNaN(day) ||
|
||
!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
|
||
return false;
|
||
}
|
||
|
||
if (month < 1 || month > 12) {
|
||
return false;
|
||
}
|
||
|
||
const daysInMonth = [31, (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||
|
||
if (day < 1 || day > daysInMonth[month - 1]) {
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
handleUpdateSelectedCul(newValue) {
|
||
// 在这里处理接收到的数据
|
||
this.Selectedcul = newValue;
|
||
},
|
||
deleteSelected(index){
|
||
this.SelectedName.splice(index,1);
|
||
},
|
||
AddSelectedName(){
|
||
if(this.SelectNowName != "")
|
||
{
|
||
this.SelectedName.push(this.SelectNowName);
|
||
this.SelectNowName = '';
|
||
}
|
||
},
|
||
|
||
|
||
|
||
// handleSelectionChange(selection) {
|
||
// // 在这里处理选择变化，selection 是选中的行数据数组
|
||
// let obj=selection.map(item=>item.name)
|
||
// // console.log(obj)
|
||
// this.selectedColumnData =selection.map(item=>item.name)
|
||
|
||
// // console.log( this.selectedColumnData);
|
||
// // console.log('选择的行数据:', selection);
|
||
// },
|
||
returnHome(){
|
||
|
||
window.history.back();
|
||
},
|
||
// extractThreeColumns(tableData) {
|
||
// let extractedData = tableData.map(row => ({
|
||
// month: row[this.srow3],
|
||
// product: row[this.srow],
|
||
// amount: row[this.srow2]
|
||
// }));
|
||
|
||
// return extractedData;
|
||
// },
|
||
// count_sum_time()
|
||
// {
|
||
|
||
// this.hasUpperContent = true;
|
||
// let counts = {};
|
||
// let salesData=this.extractThreeColumns(this.mytable);
|
||
// // console.log(salesData)
|
||
// // 遍历销售记录数组，填充 counts 对象
|
||
// salesData.forEach(record => {
|
||
// let { month, product, amount } = record;
|
||
// let currentMonth=new Date(month)
|
||
// let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
|
||
// if (!counts[monthKey1]) {
|
||
// counts[monthKey1] = {};
|
||
// }
|
||
// if ( !counts[monthKey1][product])
|
||
// counts[monthKey1][product] = amount;
|
||
// else
|
||
// counts[monthKey1][product] += amount;
|
||
// });
|
||
|
||
// // 现在 counts 对象包含了每个月份每种产品的销售额信息
|
||
|
||
// const products = this.selectedColumnData;
|
||
// let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
|
||
|
||
// // Create the structure similar to 'source'
|
||
// let result = [['product', ...years]];
|
||
|
||
// products.forEach(product => {
|
||
// let rowData = [product];
|
||
// for (let i = 0; i < years.length; i++) {
|
||
// rowData.push(0);
|
||
// }
|
||
// result.push(rowData);
|
||
// });
|
||
// products.forEach(product=>
|
||
// {
|
||
// years.forEach(year => {
|
||
// if (counts[year][product])
|
||
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
|
||
// else
|
||
// result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
|
||
// });
|
||
// }
|
||
// )
|
||
// // console.log(result)
|
||
// return result;
|
||
// },
|
||
countsumbystring() {
|
||
// 创建一个对象来存储每个名字对应的实数总和
|
||
this.hasUpperContent = true;
|
||
const sumByName = {};
|
||
|
||
// 遍历数据数组，累加同名字的实数
|
||
this.item.forEach(item => {
|
||
const name = item[0];
|
||
const number = parseFloat(item[1]);
|
||
|
||
// 如果该名字还没有在 sumByName 对象中，则初始化为 0
|
||
if (!sumByName[name]) {
|
||
sumByName[name] = number;
|
||
}
|
||
|
||
// 累加实数
|
||
sumByName[name] += number;
|
||
})
|
||
|
||
// 返回结果对象
|
||
return sumByName;
|
||
},
|
||
do_entity4()
|
||
{let counts=[];
|
||
for (let i=0;i<this.srow2.length;i++)
|
||
{
|
||
this.handletwodata(this.srow,this.srow2[i]);
|
||
if (this.srow2[i]=='线索数量')
|
||
{
|
||
counts[i]=this.countStrings();
|
||
}
|
||
else
|
||
counts[i]=this.countsumbystring();
|
||
}
|
||
return counts;
|
||
},
|
||
convertname(cul)
|
||
{
|
||
const selectname=[];
|
||
|
||
for (let i=0;i<cul.length;i++)
|
||
{
|
||
if (cul[i]=='线索数量')
|
||
{
|
||
selectname.push('线索数量')
|
||
|
||
}
|
||
else
|
||
{
|
||
let foundLabel = null;
|
||
|
||
let num=cul[i].match(/\d+/)
|
||
foundLabel = this.mycolumns[num-1].label;
|
||
selectname.push(foundLabel)
|
||
|
||
|
||
|
||
}
|
||
}
|
||
|
||
|
||
console.log(selectname)
|
||
return selectname;
|
||
|
||
},
|
||
generateyAxis(counts)
|
||
{
|
||
let yAxis = [];
|
||
|
||
// Generate Evaporation and Precipitation yAxis
|
||
for (let i = 0; i < counts.length; i++) {
|
||
yAxis.push({
|
||
type: 'value',
|
||
|
||
position: 'left',
|
||
|
||
alignTicks: true,
|
||
|
||
});
|
||
}
|
||
return yAxis;
|
||
},
|
||
generateSeries2(counts)
|
||
{
|
||
let Series= [];
|
||
|
||
// Generate Evaporation and Precipitation yAxis
|
||
for (let i = 0; i < counts.length; i++) {
|
||
Series.push({
|
||
|
||
name: this.convertname(this.srow2)[i],
|
||
type: this.stype,
|
||
data: Object.values(counts[i]),
|
||
});
|
||
|
||
|
||
} return Series;
|
||
},
|
||
generateOptions(counts)
|
||
{
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
grid: {
|
||
right: '0%'
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
legend: {
|
||
data: this.convertname(this.srow2)
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
// prettier-ignore
|
||
data: Object.keys(counts[0]),
|
||
axisLabel:
|
||
{
|
||
frontSize:12,
|
||
interval:0,
|
||
rotate:30
|
||
}
|
||
}
|
||
],
|
||
yAxis: this.generateyAxis(counts),
|
||
series: this.generateSeries2(counts),
|
||
};return option;
|
||
},
|
||
handlerow()
|
||
{
|
||
this.srow='';
|
||
this.srow2='';
|
||
},
|
||
|
||
calculateMonthlyRecords() {
|
||
// 假设你有一个包含所有记录的表格，存储在一个数组中
|
||
this.hasUpperContent = true;
|
||
// 创建一个对象来存储每个月的记录条数
|
||
this.records.sort((a, b) => {
|
||
const startDateA = new Date(a[0]);
|
||
const startDateB = new Date(b[0]);
|
||
return startDateA - startDateB;
|
||
});
|
||
const monthlyRecords = {};
|
||
const cords=this.records;
|
||
cords.sort((a,b)=>{const endDateA=new Date(a[1]);
|
||
const endDateB=new Date(b[1]);
|
||
return endDateB-endDateA;
|
||
})
|
||
// 遍历每一条记录
|
||
const startDate1 = new Date(this.records[0][0]);
|
||
|
||
//初始化
|
||
const endDate1 = new Date(this.records[0][1]);
|
||
const currentDate = new Date(startDate1);
|
||
|
||
while (currentDate <= endDate1) {
|
||
if (this.gap === 'month') {
|
||
let monthKey = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}`;
|
||
monthlyRecords[monthKey] = 0;
|
||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||
} else if (this.gap === 'year') {
|
||
let yearKey = `${currentDate.getFullYear()}`;
|
||
monthlyRecords[yearKey] = 0;
|
||
currentDate.setFullYear(currentDate.getFullYear() + 1);
|
||
} else {
|
||
let dayKey = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()}`;
|
||
monthlyRecords[dayKey] = 0;
|
||
currentDate.setDate(currentDate.getDate()+1);
|
||
}
|
||
}
|
||
|
||
for (var i = 0; i < this.records.length; i++) {
|
||
const record = this.records[i];
|
||
var startDate = new Date(record[0]);
|
||
var endDate = new Date(record[1]);
|
||
|
||
// 遍历开始日期到结束日期之间的每个月
|
||
if (this.gap=="month"){
|
||
const currentMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
|
||
while (currentMonth <= endDate) {
|
||
const monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
|
||
|
||
// 如果该月份不存在于monthlyRecords对象中，则创建并初始化为0
|
||
if (!monthlyRecords[monthKey1]) {
|
||
monthlyRecords[monthKey1] = 1;
|
||
}
|
||
|
||
// 增加该月份的记录条数
|
||
monthlyRecords[monthKey1]++;
|
||
|
||
// 下一个月
|
||
currentMonth.setMonth(currentMonth.getMonth() + 1);
|
||
}
|
||
}else if (this.gap=='year'){
|
||
const currentyear = new Date(startDate.getFullYear(), 1, 1);
|
||
while (currentyear <= endDate) {
|
||
const monthKey1 = currentyear.getFullYear() ;
|
||
|
||
// 如果该月份不存在于monthlyRecords对象中，则创建并初始化为0
|
||
if (!monthlyRecords[monthKey1]) {
|
||
monthlyRecords[monthKey1] = 1;
|
||
}
|
||
|
||
// 增加该月份的记录条数
|
||
monthlyRecords[monthKey1]++;
|
||
|
||
// 下一个月
|
||
currentyear.setFullYear(currentyear.getFullYear()+1);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
const currentday=new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
|
||
while (currentday <= endDate) {
|
||
const monthKey1 = currentday.getFullYear() + '-' + (currentday.getMonth() + 1)+(currentday.getDate());
|
||
|
||
// 如果该月份不存在于monthlyRecords对象中，则创建并初始化为0
|
||
if (!monthlyRecords[monthKey1]) {
|
||
monthlyRecords[monthKey1] = 1;
|
||
}
|
||
|
||
// 增加该月份的记录条数
|
||
monthlyRecords[monthKey1]++;
|
||
|
||
// 下一个月
|
||
currentday.setDate(currentday.getDate() + 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 返回每个月的记录条数对象
|
||
return monthlyRecords;
|
||
},
|
||
|
||
countStrings() {
|
||
// Initialize the object to hold string counts
|
||
this.hasUpperContent = true;
|
||
const stringCounts = {};
|
||
|
||
// Split the input string by newlines, trim whitespace, and filter out empty strings
|
||
const strings = this.inputStr;
|
||
|
||
// Iterate over each string and count occurrences
|
||
strings.forEach(str => {
|
||
if (stringCounts[str]) {
|
||
stringCounts[str]++;
|
||
} else {
|
||
stringCounts[str] = 1;
|
||
}
|
||
});
|
||
|
||
// Update the component's data with the computed string counts
|
||
return stringCounts;
|
||
},
|
||
|
||
handleSelectedEntity(value) {
|
||
// console.log('Selected Entity:', value);
|
||
// 在这里处理接收到的 selectedEntity 值
|
||
this.interval=value;
|
||
this.gap=value;
|
||
},
|
||
|
||
handleSelectedRow(value) {
|
||
// console.log('Selected Row:', value);
|
||
// 在这里处理接收到的 selectedrow 值
|
||
this.srow=value
|
||
},
|
||
|
||
handleSelectedRow2(value) {
|
||
// console.log('Selected Row2:', value);
|
||
this.srow2=value
|
||
|
||
},
|
||
handleSelectedRow3(value) {
|
||
// console.log('Selected Row3:', value);
|
||
this.srow3=value
|
||
},
|
||
|
||
handleSelectedChartType(value) {
|
||
// console.log('Selected Chart Type:', value);
|
||
this.stype=value;
|
||
// 在这里处理接收到的 selectedChartType 值
|
||
},
|
||
|
||
countMonth(){
|
||
this.hasUpperContent = true;
|
||
this.dates.sort((a, b) => new Date(a) - new Date(b));
|
||
const monthCount = {};
|
||
const startDate = new Date(this.dates[0]);
|
||
|
||
//初始化
|
||
// 传送点
|
||
const endDate = new Date(this.dates[this.dates.length - 1]);
|
||
const currentDate = new Date(startDate);
|
||
|
||
while (currentDate <= endDate) {
|
||
if (this.gap === 'month') {
|
||
const monthKey = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}`;
|
||
monthCount[monthKey] = 0;
|
||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||
} else if (this.gap === 'year') {
|
||
const yearKey = `${currentDate.getFullYear()}`;
|
||
monthCount[yearKey] = 0;
|
||
currentDate.setFullYear(currentDate.getFullYear() + 1);
|
||
} else {
|
||
const dayKey = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()}`;
|
||
monthCount[dayKey] = 0;
|
||
currentDate.setDate(currentDate.getDate()+1);
|
||
}
|
||
}
|
||
|
||
for (const dateStr of this.dates) {
|
||
const date = new Date(dateStr);
|
||
|
||
if (this.gap=='month'){
|
||
|
||
this.monthKey = `${date.getFullYear()}-${date.getMonth() + 1}`;
|
||
}else if(this.gap=='year'){
|
||
this.monthKey = `${date.getFullYear()}`;
|
||
}else
|
||
{
|
||
this.monthKey = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||
}
|
||
if (monthCount[this.monthKey]) {
|
||
monthCount[this.monthKey]++;
|
||
} else {
|
||
monthCount[this.monthKey] = 1;
|
||
}
|
||
}
|
||
|
||
// Format data for ECharts
|
||
const xAxisData = [];
|
||
const seriesData = [];
|
||
for (const key in monthCount) {
|
||
if (Object.prototype.hasOwnProperty.call(monthCount, key)) {
|
||
xAxisData.push(key);
|
||
seriesData.push(monthCount[key]);
|
||
}
|
||
}
|
||
return monthCount;
|
||
},
|
||
|
||
countDataByInterval() {
|
||
this.hasUpperContent = true;
|
||
this.Rdata.sort((a, b) => a - b);
|
||
const counts = {};
|
||
const interval = this.interval;
|
||
this.Rdata.forEach((number) => {
|
||
const index = Math.floor(number / interval);
|
||
const key = `${index * interval}-${(index + 1) * interval}`;
|
||
if (counts[key]) {
|
||
counts[key]++;
|
||
} else {
|
||
counts[key] = 1;
|
||
}
|
||
});
|
||
return counts;
|
||
},
|
||
generateSeries(source) {
|
||
// 根据数据源的长度动态生成对应数量的 series
|
||
const series = [];
|
||
for (let i = 0; i < source.length - 1; i++) {
|
||
if (i < 3) {
|
||
series.push({ type: 'bar', seriesLayoutBy: 'row' }); // 第一个 grid 的 series
|
||
} else {
|
||
series.push({ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }); // 第二个 grid 的 series
|
||
}
|
||
}
|
||
return series;
|
||
},
|
||
drawChart(counts) {
|
||
// console.log(counts);
|
||
// console.log(this.mytable);
|
||
try
|
||
{
|
||
const chartContainer = this.$refs.chartContainer;
|
||
this.chartInstance =markRaw( echarts.init(chartContainer));
|
||
// console.log(chartContainer);
|
||
let option;
|
||
|
||
|
||
if (this.stype === 'bar' || this.stype == 'line') {
|
||
option = {
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
magicType: { show: true, type: ['line', 'bar', 'stack'] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: Object.keys(counts),
|
||
name: '区间',
|
||
axisLabel:
|
||
{
|
||
frontSize:12,
|
||
interval:0,
|
||
rotate:30
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [],
|
||
legend: {
|
||
data: []
|
||
},
|
||
};
|
||
// console.log(option);
|
||
if(this.selectedEntity == 'entity1'){
|
||
if(this.OpenSelected){
|
||
option.legend.data = this.SelectedName;
|
||
if(this.gap === 'year'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
for(let now_i of this.SelectedName)
|
||
{
|
||
// console.log(new Date(datas[0][this.srow]).getFullYear());
|
||
let xdata = [new Date(datas[0][this.srow]).getFullYear()];
|
||
let ydata = [0];
|
||
for(let c of datas){
|
||
while(new Date(c[this.srow]).getFullYear() != xdata[xdata.length-1]){
|
||
xdata.push(String(Number(xdata[xdata.length-1])+1));
|
||
ydata.push(Number(0))
|
||
}
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
let date = c[this.srow];
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
// console.log(option);
|
||
// console.log('aaa');
|
||
}
|
||
}
|
||
else if(this.gap === 'day'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
|
||
for(let now_i of this.SelectedName)
|
||
{
|
||
let D = new Date(datas[0][this.srow]);
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`];
|
||
let ydata = [0];
|
||
for(let c of datas){
|
||
let D = new Date(c[this.srow]);
|
||
|
||
let tim = 0;
|
||
let currentDateString = `${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`;
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth, lastDate] = lastXDataDateString.split('-').map(Number);
|
||
|
||
|
||
while(currentDateString != lastXDataDateString){
|
||
let F = new Date(xdata[xdata.length-1]);
|
||
console.log(F);
|
||
lastDate++;
|
||
// console.log('bbb');
|
||
// console.log(this.isValidDate(lastYear,lastMonth,lastDate));
|
||
// console.log('ccc');
|
||
if(!this.isValidDate(Number(lastYear),Number(lastMonth),Number(lastDate))){
|
||
lastDate = 1;
|
||
lastMonth++;
|
||
}
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
lastXDataDateString = `${lastYear}-${lastMonth}-${lastDate}`; //console.log('aaa');
|
||
xdata.push(lastXDataDateString);
|
||
ydata.push(0);
|
||
tim ++;
|
||
if(tim > 30)break;
|
||
}
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
let date = c[this.srow];
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
console.log(option);
|
||
}
|
||
}
|
||
else{
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
|
||
for(let now_i of this.SelectedName)
|
||
{
|
||
let D = new Date(datas[0][this.srow]);
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}`];
|
||
let ydata = [0];
|
||
for(let c of datas){
|
||
let D = new Date(c[this.srow]);
|
||
|
||
let tim = 0;
|
||
let currentDateString = `${D.getFullYear()}-${D.getMonth() + 1}`;
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth] = lastXDataDateString.split('-').map(Number);
|
||
|
||
|
||
while(currentDateString != lastXDataDateString){
|
||
let F = new Date(xdata[xdata.length-1]);
|
||
// console.log(F);
|
||
lastMonth++;
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
lastXDataDateString = `${lastYear}-${lastMonth}`;
|
||
xdata.push(lastXDataDateString);
|
||
ydata.push(0);
|
||
tim ++;
|
||
if(tim > 30)break;
|
||
}
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
let date = c[this.srow];
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
console.log(option);
|
||
}
|
||
}
|
||
|
||
}
|
||
else{
|
||
let legend=this.convertname(this.Selectedcul);
|
||
option.legend.data = legend;
|
||
|
||
if(this.gap === 'year'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
for(let now_i of this.Selectedcul)
|
||
{
|
||
// console.log(new Date(datas[0][this.srow]).getFullYear());
|
||
let xdata = [new Date(datas[0][this.srow]).getFullYear()];
|
||
let ydata = [Number(0)];
|
||
for(let c of datas){
|
||
while(new Date(c[this.srow]).getFullYear() != xdata[xdata.length-1]){
|
||
xdata.push(String(Number(xdata[xdata.length-1])+1));
|
||
ydata.push(Number(0));
|
||
}
|
||
let date = c[this.srow];
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
else if(this.gap === 'day'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
|
||
for(let now_i of this.Selectedcul)
|
||
{
|
||
let D = new Date(datas[0][this.srow]);
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`];
|
||
let ydata = [0];
|
||
for(let c of datas){
|
||
let D = new Date(c[this.srow]);
|
||
|
||
let currentDateString = `${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`;
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth, lastDate] = lastXDataDateString.split('-').map(Number);
|
||
|
||
|
||
while(currentDateString != lastXDataDateString){
|
||
lastDate++;
|
||
if(!this.isValidDate(Number(lastYear),Number(lastMonth),Number(lastDate))){
|
||
lastDate = 1;
|
||
lastMonth++;
|
||
}
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
lastXDataDateString = `${lastYear}-${lastMonth}-${lastDate}`; console.log('aaa');
|
||
xdata.push(lastXDataDateString);
|
||
ydata.push(0);
|
||
}
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
console.log(option);
|
||
}
|
||
}
|
||
else{
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
|
||
for(let now_i of this.Selectedcul)
|
||
{
|
||
let D = new Date(datas[0][this.srow]);
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}`];
|
||
let ydata = [0];
|
||
for(let c of datas){
|
||
let D = new Date(c[this.srow]);
|
||
|
||
let currentDateString = `${D.getFullYear()}-${D.getMonth() + 1}`;
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth] = lastXDataDateString.split('-').map(Number);
|
||
|
||
|
||
while(currentDateString != lastXDataDateString){
|
||
lastMonth++;
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
lastXDataDateString = `${lastYear}-${lastMonth}`;
|
||
xdata.push(lastXDataDateString);
|
||
ydata.push(0);
|
||
}
|
||
let date = c[this.srow];
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
console.log(option);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else if (this.selectedEntity == 'entity2'){
|
||
if(this.OpenSelected){
|
||
option.legend.data = this.SelectedName;
|
||
if(this.gap == 'year'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let end = datas[datas.length-1][this.srow2];
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
// console.log('aa');
|
||
for(let now_i of this.SelectedName){
|
||
let xdata = [new Date(datas[0][this.srow]).getFullYear()];
|
||
let ydata = [0];
|
||
// console.log(end);
|
||
// console.log(xdata[xdata.length-1]);
|
||
// console.log(new Date(end).getFullYear());
|
||
while(Number(xdata[xdata.length-1]) <= Number(new Date(end).getFullYear())){
|
||
// console.log('dd');
|
||
for(let c of datas){
|
||
// console.log('ee');
|
||
// console.log(new Date(c[this.srow]).getFullYear());
|
||
// console.log(new Date(c[this.srow2]).getFullYear());
|
||
// console.log(xdata[xdata.length-1]);
|
||
if(new Date(c[this.srow]).getFullYear() <= xdata[xdata.length-1] && new Date(c[this.srow2]).getFullYear() >= xdata[xdata.length-1]){
|
||
// console.log('ff');
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
}
|
||
if(xdata[xdata.length-1] == new Date(end).getFullYear()) break;
|
||
xdata.push(xdata[xdata.length-1]+1);
|
||
ydata.push(Number(0));
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
|
||
}
|
||
else if(this.gap == 'month'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let D = new Date(datas[datas.length-1][this.srow2]);
|
||
let EndYear = D.getFullYear();
|
||
let EndMon = D.getMonth()+1;
|
||
// console.log(EndYear);
|
||
// console.log(EndMon);
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
D = new Date(datas[0][this.srow2]);
|
||
for(let now_i of this.SelectedName){
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}`];
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth] = lastXDataDateString.split('-').map(Number);
|
||
let ydata = [Number(0)];
|
||
for(;;){
|
||
for(let c of datas){
|
||
[lastYear, lastMonth] = xdata[xdata.length-1].split('-').map(Number);
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
let lYear = new Date(c[this.srow]).getFullYear();
|
||
let lMonth = new Date(c[this.srow]).getMonth()+1;
|
||
let rYear = new Date(c[this.srow2]).getFullYear();
|
||
let rMonth = new Date(c[this.srow2]).getMonth()+1;
|
||
if(
|
||
(lYear < lastYear ||(lYear==lastYear && lMonth <= lastMonth)) &&
|
||
(rYear > lastYear ||(rYear==lastYear && rMonth >= lastMonth))
|
||
){
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
}
|
||
lastMonth++;
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
xdata.push(`${lastYear}-${lastMonth}`)
|
||
ydata.push(Number(0));
|
||
// console.log(lastYear);
|
||
// console.log(EndYear);
|
||
// console.log(lastMonth);
|
||
// console.log(EndMon);
|
||
if(
|
||
(lastYear == EndYear && lastMonth > EndMon) ||
|
||
(lastYear > EndYear)
|
||
)break;
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
else{
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let D = new Date(datas[datas.length-1][this.srow2]);
|
||
let EndYear = D.getFullYear();
|
||
let EndMon = D.getMonth()+1;
|
||
let EndDate = D.getDate();
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
D = new Date(datas[0][this.srow2]);
|
||
for(let now_i of this.SelectedName){
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`];
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth, lastDate] = lastXDataDateString.split('-').map(Number);
|
||
let ydata = [Number(0)];
|
||
for(;;){
|
||
for(let c of datas){
|
||
[lastYear, lastMonth, lastDate] = xdata[xdata.length-1].split('-').map(Number);
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i)))continue;
|
||
let lYear = new Date(c[this.srow]).getFullYear();
|
||
let lMonth = new Date(c[this.srow]).getMonth()+1;
|
||
let lDate = new Date(c[this.srow]).getDate();
|
||
let rYear = new Date(c[this.srow2]).getFullYear();
|
||
let rMonth = new Date(c[this.srow2]).getMonth()+1;
|
||
let rDate = new Date(c[this.srow2]).getDate();
|
||
if(
|
||
(lYear < lastYear ||(lYear==lastYear && lMonth < lastMonth) || (lYear==lastYear && lMonth==lastMonth && lDate <= lastDate)) &&
|
||
(rYear > lastYear ||(rYear==lastYear && rMonth > lastMonth) || (rYear==lastYear && rMonth==lastMonth && rDate >= lastDate))
|
||
){
|
||
if(this.Selectedcul == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[this.Selectedcul];
|
||
}
|
||
}
|
||
lastDate++;
|
||
if(!this.isValidDate(Number(lastYear),Number(lastMonth),Number(lastDate))){
|
||
lastMonth++;
|
||
lastDate = 1;
|
||
}
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
xdata.push(`${lastYear}-${lastMonth}-${lastDate}`)
|
||
ydata.push(Number(0));
|
||
if(
|
||
(lastYear == EndYear && lastMonth > EndMon) ||
|
||
(lastYear == EndYear && lastMonth == EndMon && lastDate > EndDate) ||
|
||
(lastYear > EndYear)
|
||
)break;
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
}
|
||
else{
|
||
let legend=this.convertname(this.Selectedcul);
|
||
option.legend.data = legend;
|
||
if(this.gap == 'year'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let end = datas[datas.length-1][this.srow2];
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
// console.log('aa');
|
||
for(let now_i of this.Selectedcul){
|
||
let xdata = [new Date(datas[0][this.srow]).getFullYear()];
|
||
let ydata = [0];
|
||
// console.log(end);
|
||
// console.log(xdata[xdata.length-1]);
|
||
// console.log(new Date(end).getFullYear());
|
||
while(Number(xdata[xdata.length-1]) <= Number(new Date(end).getFullYear())){
|
||
// console.log('dd');
|
||
for(let c of datas){
|
||
// console.log('ee');
|
||
// console.log(new Date(c[this.srow]).getFullYear());
|
||
// console.log(new Date(c[this.srow2]).getFullYear());
|
||
// console.log(xdata[xdata.length-1]);
|
||
if(new Date(c[this.srow]).getFullYear() <= xdata[xdata.length-1] && new Date(c[this.srow2]).getFullYear() >= xdata[xdata.length-1]){
|
||
// console.log('ff');
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
}
|
||
if(xdata[xdata.length-1] == new Date(end).getFullYear()) break;
|
||
xdata.push(xdata[xdata.length-1]+1);
|
||
ydata.push(Number(0));
|
||
}
|
||
option.series.push({
|
||
name: legend(this.Selectedcul.indexOf(now_i)),
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
|
||
}
|
||
else if(this.gap == 'month'){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let D = new Date(datas[datas.length-1][this.srow2]);
|
||
let EndYear = D.getFullYear();
|
||
let EndMon = D.getMonth()+1;
|
||
// console.log(EndYear);
|
||
// console.log(EndMon);
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
D = new Date(datas[0][this.srow2]);
|
||
for(let now_i of this.Selectedcul){
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}`];
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth] = lastXDataDateString.split('-').map(Number);
|
||
let ydata = [Number(0)];
|
||
for(;;){
|
||
for(let c of datas){
|
||
[lastYear, lastMonth] = xdata[xdata.length-1].split('-').map(Number);
|
||
let lYear = new Date(c[this.srow]).getFullYear();
|
||
let lMonth = new Date(c[this.srow]).getMonth()+1;
|
||
let rYear = new Date(c[this.srow2]).getFullYear();
|
||
let rMonth = new Date(c[this.srow2]).getMonth()+1;
|
||
if(
|
||
(lYear < lastYear ||(lYear==lastYear && lMonth <= lastMonth)) &&
|
||
(rYear > lastYear ||(rYear==lastYear && rMonth >= lastMonth))
|
||
){
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
}
|
||
lastMonth++;
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
xdata.push(`${lastYear}-${lastMonth}`)
|
||
ydata.push(Number(0));
|
||
if(
|
||
(lastYear == EndYear && lastMonth > EndMon) ||
|
||
(lastYear > EndYear)
|
||
)break;
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
else{
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => new Date(a[this.srow2]) - new Date(b[this.srow2]))
|
||
let D = new Date(datas[datas.length-1][this.srow2]);
|
||
let EndYear = D.getFullYear();
|
||
let EndMon = D.getMonth()+1;
|
||
let EndDate = D.getDate();
|
||
datas.sort((a,b) => new Date(a[this.srow]) - new Date(b[this.srow]))
|
||
D = new Date(datas[0][this.srow2]);
|
||
for(let now_i of this.Selectedcul){
|
||
let xdata = [`${D.getFullYear()}-${D.getMonth() + 1}-${D.getDate()}`];
|
||
let lastXDataDateString = xdata[xdata.length - 1];
|
||
let [lastYear, lastMonth, lastDate] = lastXDataDateString.split('-').map(Number);
|
||
let ydata = [Number(0)];
|
||
for(;;){
|
||
for(let c of datas){
|
||
[lastYear, lastMonth, lastDate] = xdata[xdata.length-1].split('-').map(Number);
|
||
let lYear = new Date(c[this.srow]).getFullYear();
|
||
let lMonth = new Date(c[this.srow]).getMonth()+1;
|
||
let lDate = new Date(c[this.srow]).getDate();
|
||
let rYear = new Date(c[this.srow2]).getFullYear();
|
||
let rMonth = new Date(c[this.srow2]).getMonth()+1;
|
||
let rDate = new Date(c[this.srow2]).getDate();
|
||
if(
|
||
(lYear < lastYear ||(lYear==lastYear && lMonth < lastMonth) || (lYear==lastYear && lMonth==lastMonth && lDate <= lastDate)) &&
|
||
(rYear > lastYear ||(rYear==lastYear && rMonth > lastMonth) || (rYear==lastYear && rMonth==lastMonth && rDate >= lastDate))
|
||
){
|
||
if(now_i == "线索数量")ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += c[now_i];
|
||
}
|
||
}
|
||
lastDate++;
|
||
if(!this.isValidDate(Number(lastYear),Number(lastMonth),Number(lastDate))){
|
||
lastMonth++;
|
||
lastDate = 1;
|
||
}
|
||
if (lastMonth > 12) {
|
||
lastMonth = 1;
|
||
lastYear++;
|
||
}
|
||
xdata.push(`${lastYear}-${lastMonth}-${lastDate}`)
|
||
ydata.push(Number(0));
|
||
if(
|
||
(lastYear == EndYear && lastMonth > EndMon) ||
|
||
(lastYear == EndYear && lastMonth == EndMon && lastDate > EndDate) ||
|
||
(lastYear > EndYear)
|
||
)break;
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else if (this.selectedEntity == 'entity3'){
|
||
if(this.OpenSelected){
|
||
// console.log('aaa');
|
||
// console.log(this.SelectedName);
|
||
option.legend.data = this.SelectedName;
|
||
for(let now_i of this.SelectedName){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => Number(a[this.srow]) - Number(b[this.srow]));
|
||
let sta = Number(datas[0][this.srow]);
|
||
let end = Number(datas[datas.length-1][this.srow]);
|
||
let k = Number(this.interval)
|
||
let le = sta;
|
||
let ri = le + k;
|
||
let xdata = [];
|
||
let ydata = [];
|
||
// console.log('ccc');
|
||
// console.log(end);
|
||
while(le <= end){
|
||
xdata.push(`[${le},${ri})`);
|
||
ydata.push(0);
|
||
for(let c of datas){
|
||
// console.log(Number(c[this.srow]));
|
||
// console.log(le);
|
||
// console.log(ri);
|
||
// console.log('bbb');
|
||
if(!String(c[this.Selectedcol]).includes(String(now_i))){
|
||
continue;
|
||
}
|
||
// console.log(('ccc'));
|
||
if(Number(c[this.srow]) >= le && Number(c[this.srow]) < ri){
|
||
// console.log('abc');
|
||
// console.log(ydata);
|
||
// console.log(this.Selectedcul);
|
||
if(this.Selectedcul == "线索数量") ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += Number(c[this.Selectedcul]);
|
||
// console.log(ydata);
|
||
}
|
||
}
|
||
le += k;
|
||
ri += k;
|
||
}
|
||
option.series.push({
|
||
name: now_i,
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
else{
|
||
let legend=this.convertname(this.Selectedcul);
|
||
option.legend.data = legend;
|
||
for(let now_i of this.Selectedcul){
|
||
let datas = this.mytable;
|
||
datas.sort((a,b) => Number(a[this.srow]) - Number(b[this.srow]));
|
||
let sta = Number(datas[0][this.srow]);
|
||
let end = Number(datas[datas.length-1][this.srow]);
|
||
let k = Number(this.interval)
|
||
let le = sta;
|
||
let ri = le + k;
|
||
let xdata = [];
|
||
let ydata = [];
|
||
while(le <= end){
|
||
xdata.push(`[${le},${ri})`);
|
||
ydata.push(0);
|
||
for(let c of datas){
|
||
if(Number(c[this.srow]) >= le && Number(c[this.srow]) < ri){
|
||
// console.log('abc');
|
||
// console.log(ydata);
|
||
// console.log(this.Selectedcul);
|
||
if(now_i == "线索数量") ydata[ydata.length-1]++;
|
||
else ydata[ydata.length-1] += Number(c[now_i]);
|
||
// console.log(ydata);
|
||
}
|
||
}
|
||
le += k;
|
||
ri += k;
|
||
}
|
||
option.series.push({
|
||
name: legend[this.Selectedcul.indexOf(now_i)],
|
||
type: this.stype,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: ydata
|
||
})
|
||
option.xAxis.data = xdata;
|
||
}
|
||
}
|
||
}
|
||
else if (this.selectedEntity=='entity4')
|
||
{
|
||
console.log(123)
|
||
option=this.generateOptions(counts);
|
||
console.log(option)
|
||
}
|
||
} else if (this.stype === 'pie') {
|
||
const data = Object.entries(counts).map(([name, value]) => ({ value, name }));
|
||
option = {
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
dataView: { show: true, readOnly: false },
|
||
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '60%',
|
||
data,
|
||
}],
|
||
xAxis: { show: false }, // 不显示区间横轴
|
||
};
|
||
}
|
||
|
||
|
||
|
||
this.chartInstance.setOption(option);
|
||
}catch(error)
|
||
{
|
||
console.log('错误')
|
||
}
|
||
},
|
||
|
||
clearchart() {
|
||
// 清空图表容器
|
||
if (this.hasUpperContent )
|
||
this.chartInstance.dispose();
|
||
this.hasUpperContent = false;
|
||
// 在这里可以清理之前的图表实例或其他操作
|
||
this.item=[],
|
||
this.records=[],
|
||
this.inputStr=[],
|
||
this.Rdata= [] // 示例数据，可以替换为实际数据
|
||
},
|
||
|
||
handledata(){
|
||
if (!this.mytable || this.mytable.length === 0) {
|
||
alert("没有数据");
|
||
} else {
|
||
// 检查是否有选定的列名
|
||
if (!this.srow) {
|
||
alert("请选择列名");
|
||
return null;
|
||
} else {
|
||
this.inputStr = this.mytable.map(row => {
|
||
// 检查 row 是否存在以及选定的列是否存在
|
||
if (row && row[this.srow] !== undefined) {
|
||
return row[this.srow];
|
||
} else {
|
||
// 如果选定的列不存在，返回一个默认值或者处理错误
|
||
return null; // 你可以根据需要更改此处的行为
|
||
}
|
||
});
|
||
this.dates=this.inputStr;
|
||
// 输出提取的列数据
|
||
this.Rdata=this.inputStr;
|
||
this.xz=this.inputStr;
|
||
|
||
}
|
||
if (!this.srow2) {
|
||
return null;
|
||
} else {
|
||
this.inputStr = this.mytable.map(row => {
|
||
// 检查 row 是否存在以及选定的列是否存在
|
||
if (row && row[this.srow] !== undefined) {
|
||
return row[this.srow];
|
||
} else {
|
||
// 如果选定的列不存在，返回一个默认值或者处理错误
|
||
return null; // 你可以根据需要更改此处的行为
|
||
}
|
||
});
|
||
this.yz=this.inputStr;
|
||
// 输出提取的列数据
|
||
|
||
|
||
}
|
||
}
|
||
},
|
||
|
||
handletwodata(srow,srow2) {
|
||
if (!this.mytable || this.mytable.length === 0) {
|
||
alert("没有数据");
|
||
} else {
|
||
if (!srow || !srow2) {
|
||
return null;
|
||
} else {
|
||
const combinedData = this.mytable.map(row => {
|
||
if (row && row[srow] !== undefined) {
|
||
return [row[srow], row[srow2]];
|
||
} else {
|
||
return [null, null]; // 如果选定的属性不存在，返回默认值或者处理错误
|
||
}
|
||
});
|
||
this.records = combinedData;
|
||
this.item = combinedData;
|
||
// console.log(combinedData);
|
||
}
|
||
}
|
||
},
|
||
|
||
handleGenerateChart() {
|
||
this.clearchart();
|
||
// console.log(this.columns)
|
||
try{
|
||
this.handledata();
|
||
this.handletwodata(this.srow,this.srow2[0]);
|
||
} catch(error) {
|
||
alert("请选择数据")
|
||
}
|
||
|
||
|
||
if (this.selectedEntity === 'entity1') {
|
||
// Count occurrences of each month-year combination
|
||
if (!this.gap || !this.srow || !this.stype) {
|
||
// console.log(this.gap,this.srow , this.stype);
|
||
alert("请选择实体、列名或者类型");
|
||
return;
|
||
}
|
||
const counts= this.countMonth()
|
||
setTimeout(()=>this.drawChart(counts),500);
|
||
} else if (this.selectedEntity=='entity2'){
|
||
const counts=this.calculateMonthlyRecords();
|
||
// console.log(counts);
|
||
setTimeout(()=>this.drawChart(counts),500);
|
||
} else if (this.selectedEntity=='entity3'){
|
||
const counts=this.countDataByInterval();
|
||
setTimeout(()=>this.drawChart(counts),500);
|
||
}else if(this.selectedEntity=='entity4'){
|
||
let counts=this.do_entity4();
|
||
setTimeout(()=>this.drawChart(counts),500);
|
||
}
|
||
|
||
else {
|
||
this.$message.warning('请选择实体');
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.container {
|
||
display: grid;
|
||
grid-template-columns: 35% 65%;
|
||
width: 100%;
|
||
height: 80vh;
|
||
}
|
||
|
||
.left-grid {
|
||
background-color: #f0f0f0;
|
||
border-radius: 2%;
|
||
padding: 20px;
|
||
height: 100%;
|
||
}
|
||
|
||
.right-grid {
|
||
background-color: #e9d7df;
|
||
border-radius: 2%;
|
||
padding: 20px;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
.chart-container {
|
||
width: 90%;
|
||
height: 90%;
|
||
text-align: center;
|
||
}
|
||
|
||
.el-row {
|
||
margin-top: 0px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.demo-select {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.demo-select .block {
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
border-right: solid 1px var(--el-border-color);
|
||
flex: 1;
|
||
}
|
||
|
||
.demo-select .block:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.demo-select .demonstration {
|
||
display: block;
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.containerHead{
|
||
padding:0;
|
||
height:8%;
|
||
padding :0;
|
||
width: 100%;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
background-color: white;
|
||
align-items: center;
|
||
}
|
||
.HeaderPage{
|
||
width: 90%;
|
||
}
|
||
.btnReturnHomePage{
|
||
font-size: large;
|
||
width: 3%;
|
||
font-weight: 25px;
|
||
}
|
||
</style>
|
||
|