This commit is contained in:
庞东林
2022-01-04 19:41:51 +08:00
8 changed files with 220 additions and 73 deletions

Binary file not shown.

View File

@@ -5,28 +5,15 @@
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="开始年度">
<a-select v-model:value="queryParams.startYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="结束年度">
<a-select v-model:value="queryParams.endYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="年度:">
<a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="季度:">
<a-select v-model:value="queryParams.quarter" allowClear>
<a-select-option v-for="(item) in quarterOptions" :key="item.value">{{ item.label }}</a-select-option>
</a-select>
<a-select mode="multiple" v-model:value="queryParams.quarterList" @change="handleQuarterChange" :options="quarterOptions" placeholder="请选择季度:">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
@@ -55,6 +42,12 @@
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="功能区类别:">
<a-select v-model:value="queryParams.functionType" :options="functionTypeOptions" placeholder="功能区类别">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="横坐标:">
<a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标">
@@ -92,12 +85,13 @@
data() {
return {
queryParams: {
startYear: 2020,
endYear: 2021,
yearList: ["2021"],
areaList: ['南宁市'],
placeList: [],
placeList: [], // 测点名称
quarterList: [], // 季度
regionLevel: '市级', // 区域等级
xco: '年度' ,// 横坐标
functionType: '全部', // 功能区类别
timeSlot: '昼'
},
trendData: [],
@@ -106,6 +100,7 @@
placeOptions: [],
areaOptions: [],
yearOptions: [],
functionTypeOptions: [],
quarterOptions: [
{ label: "第一季度", value: 1 },
{ label: "第二季度", value: 2 },
@@ -159,6 +154,15 @@
};
});
});
getColumnOptions("function_type").then((res) => {
this.functionTypeOptions = res.data.data.map((item) => {
return {
label: item + '类',
value: item,
};
});
this.functionTypeOptions.unshift({label: '全部', value: '全部'})
});
this.getArea()
this.getPlace('市级')
},
@@ -211,8 +215,29 @@
this.getPlace(value)
}
},
handleQuarterChange(value) {
console.log(`selected ${value}`);
this.queryParams.xco = '季度'
},
// 趋势图
drawTrend() {
if (this.queryParams.quarterList.length > 0 && this.queryParams.xco === '年度') {
this.$message.warning('选择季度时, 横坐标不能年度')
return
}
if (this.queryParams.quarterList.length == 0 && this.queryParams.xco === '季度') {
this.$message.warning('横坐标为季度时, 季度至少选择一个')
return
}
if (this.queryParams.yearList.length == 0 && this.queryParams.xco === '年度') {
this.$message.warning('横坐标为年度时, 年度至少选择一个')
return
}
if (this.queryParams.yearList.length > 1 && this.queryParams.xco === '季度') {
this.$message.warning('横坐标为季度时, 不能选择多个年度')
return
}
getTrendChart(this.queryParams).then( res => {
console.log('res', res);
if (res.data.code == 0) {

View File

@@ -5,22 +5,10 @@
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
<a-row>
<a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="开始年度">
<a-select v-model:value="queryParams.startYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="结束年度">
<a-select v-model:value="queryParams.endYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="年度:">
<a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="区域等级:">
@@ -41,6 +29,13 @@
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="昼夜">
<a-select v-model:value="queryParams.timeSlot" allowClear>
<a-select-option v-for="(item) in timeSlotOptions" :key="item.value">{{ item.label }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="横坐标:">
<a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标">
@@ -78,15 +73,16 @@
data() {
return {
queryParams: {
startYear: 2020,
endYear: 2021,
yearList: ["2020", "2021"],
areaList: ['南宁市'],
placeList: [],
regionLevel: '市级', // 区域等级
timeSlot: '昼',
xco: '年度' // 横坐标
},
trendData: [],
regionLevelOptions: [],
timeSlotOptions: [],
placeOptions: [],
areaOptions: [],
yearOptions: [],
@@ -125,6 +121,14 @@
};
});
});
getColumnOptions("time_slot").then((res) => {
this.timeSlotOptions = res.data.data.map((item) => {
return {
label: item,
value: item,
};
});
});
this.getArea()
this.getPlace('市级')
},
@@ -149,7 +153,7 @@
value: item.dictDataName,
};
});
// this.areaOptions.unshift({ label: '所有县', value: '所有县'})
this.areaOptions.unshift({ label: '所有县', value: '所有县'})
})
},
// 测点名称下拉列表
@@ -162,7 +166,6 @@
value: item,
};
});
// this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
});
},
handleRegionLevelChange(value) {
@@ -219,6 +222,39 @@
yAxis: this.trendData.yAxis,
series: this.trendData.series
}
trendChart.on("legendselectchanged", obj => {
console.log('obj', obj);
let index
if (this.queryParams.xco === '年度') {
index = this.queryParams.areaList.indexOf(obj.name)
if (index > -1) {
this.queryParams.areaList.splice(index, 1)
} else {
index = this.queryParams.placeList.indexOf(obj.name)
index > -1 && this.queryParams.placeList.splice(index, 1)
}
} else {
index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
index > -1 && this.queryParams.yearList.splice(index, 1)
}
this.drawTrend()
});
//添加一个新的刻度线 实现折线在柱状图的中间显示
option.xAxis[1] = {
type: 'value',
max: option.xAxis[0].data.length,
show: false
}
let lineArray = option.series.filter(item => item.type === 'line')
lineArray.forEach((item,index) => {
item.xAxisIndex = 1
item.lineStyle = {
type: 'dashed',
}
item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
})
console.log('option', option);
trendChart.setOption(option)
}
}

View File

@@ -5,22 +5,10 @@
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="开始年度">
<a-select v-model:value="queryParams.startYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="结束年度">
<a-select v-model:value="queryParams.endYear" allowClear showSearch>
<a-select-option v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="年度:">
<a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:">
@@ -85,8 +73,7 @@
data() {
return {
queryParams: {
startYear: 2020,
endYear: 2021,
yearList: ["2020", "2021"],
areaList: ['南宁市'],
placeList: [],
regionLevel: '市级', // 区域等级
@@ -166,6 +153,7 @@
value: item.dictDataName,
};
});
this.areaOptions.unshift({ label: '所有县', value: '所有县'})
})
},
// 测点名称下拉列表

View File

@@ -76,6 +76,7 @@
<a-menu-item @click="download('县级(在用)地表水饮用水','xlsm')" > 县级在用地表水饮用水 </a-menu-item>
<a-menu-item @click="download('县级(备用、规划)地表水饮用水','xls')"> 县级备用规划地表水饮用水 </a-menu-item>
<a-menu-item @click="download('县级地下水饮用水','xlsx')" > 县级地下水饮用水 </a-menu-item>
<a-menu-item @click="download('各取水点取水量情况表','xlsx')" > 各取水点取水量取水量表 </a-menu-item>
</a-menu>
</template>
<a-button type="primary" style="left: 60px">

View File

@@ -190,8 +190,9 @@
>
</a-popconfirm>
<a-upload
:before-upload="importWaterWithdrawal"
:before-upload="file=>importWaterWithdrawal(file,record)"
:showUploadList="false"
accept=".xls,.xlsx,.csv"
>
<a-button
@@ -361,7 +362,7 @@ export default {
}
},
/*市级取水量导入 */
importWaterWithdrawal(file) {
importWaterWithdrawal(file,record) {
const hide = this.$message.loading("导入中..", 0);
let reader = new FileReader();
@@ -371,23 +372,29 @@ export default {
let workbook = XLSX.read(data, {
type: "array",
});
//0.昼间数据 1.夜间数据 2.其他信息
// let sheetNames = workbook.SheetNames;
let sheetNames = workbook.SheetNames;
// 解析成二维数组
let aoa1 = XLSX.utils.sheet_to_json(workbook.Sheets["Sheet1"], {
let aoa1 = XLSX.utils.sheet_to_json(
workbook.Sheets[sheetNames[0]], {
header: 1,
});
const drinkingWaterList = aoa1.filter((item) => {
return (
item[0] && !item[0].includes("取水点") && !item[0].includes("合计")
);
});
const id=record.drinkingWaterBillId;
// drinkingWaterList.drinkingWaterBillId=record.drinkingWaterBillId;
// 解析成对象数组
// const billName1 = file.name;
const billData1 = utils.importWaterWithdrawalData(drinkingWaterList);
console.log(billData1);
// console.log(drinkingWaterList.length);
// console.log(billData1.place);
if (!billData1 || billData1.length == 0) {
hide();
@@ -397,9 +404,11 @@ export default {
});
return;
}
if (billData1.length > 0) {
updateWaterWithdrawal({
// drinkingWaterBillId:record.drinkingWaterBillId,
drinkingWaterBillId:id,
drinkingWaterList: billData1,
})
.then((res) => {
@@ -412,7 +421,7 @@ export default {
Modal.error({
title: "导入失败",
content: "数据上传出错1",
});
}
})
@@ -425,7 +434,7 @@ export default {
.finally(() => {
hide();
});
}
// if (billData1.length > 0) {
// // 上传到服务器
@@ -667,4 +676,4 @@ export default {
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>
</style>

View File

@@ -50,7 +50,18 @@
<a-form-item label="点位名称" name="sectionName">
<a-input v-model:value="form.sectionName" placeholder="请输入点位名称" allow-clear />
</a-form-item>
<a-form-item label="经度" name="longitude">
<a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear />
</a-form-item>
<a-form-item label="纬度" name="latitude">
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
</a-form-item>
<a-form-item label="类别" name="type">
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
</a-form-item>
<a-form-item label="排序" name="sort">
<a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear />
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
@@ -136,6 +147,23 @@
title: "点位名称",
dataIndex: "sectionName",
sorter: true,
},
{
title: "点位经度",
dataIndex: "longitude",
},
{
title: "点位纬度",
dataIndex: "latitude",
},
{
title: "类别",
dataIndex: "type",
},
{
title: "排序",
dataIndex: "sort",
sorter: true,
},
{
title: "操作",
@@ -171,6 +199,22 @@
required: true,
message: '请输入点位名称'
}],
longitude: [{
required: true,
message: '请输入点位经度'
}],
latitude: [{
required: true,
message: '请输入点位纬度'
}],
type: [{
required: true,
message: '请输入类型'
}],
sort: [{
required: true,
message: '请输入排序'
}],
},
yearOptions: [],
showNYear: false,

View File

@@ -107,7 +107,18 @@
<a-form-item label="水期代码" name="waterCode">
<a-input v-model:value="form.waterCode" placeholder="请输入水期代码" allow-clear />
</a-form-item>
<a-form-item label="经度" name="longitude">
<a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear />
</a-form-item>
<a-form-item label="纬度" name="latitude">
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
</a-form-item>
<a-form-item label="类别" name="type">
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
</a-form-item>
<a-form-item label="排序" name="sort">
<a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear />
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
@@ -251,6 +262,23 @@ export default {
title: "水期代码",
dataIndex: "waterCode",
},
{
title: "点位经度",
dataIndex: "longitude",
},
{
title: "点位纬度",
dataIndex: "latitude",
},
{
title: "类别",
dataIndex: "type",
},
{
title: "排序",
dataIndex: "sort",
sorter: true,
},
{
title: "操作",
key: "action",
@@ -276,7 +304,23 @@ export default {
year: [{required: true, message: '请输入年份'}],
sectionName:[{
required:true,message: "请输入点位名称",
}]
}],
longitude: [{
required: true,
message: '请输入点位经度'
}],
latitude: [{
required: true,
message: '请输入点位纬度'
}],
type: [{
required: true,
message: '请输入类型'
}],
sort: [{
required: true,
message: '请输入排序'
}],
},
yearOptions: [],
showNYear:false,