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

View File

@@ -5,20 +5,8 @@
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical"> :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
<a-row> <a-row>
<a-col :lg="4" :md="8" :sm="24" :xs="24"> <a-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="开始年度"> <a-form-item label="年度:">
<a-select v-model:value="queryParams.startYear" allowClear showSearch> <a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
<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-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
@@ -41,6 +29,13 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </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-col :lg="4" :md="8" :sm="24" :xs="24">
<a-form-item label="横坐标:"> <a-form-item label="横坐标:">
<a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标"> <a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标">
@@ -78,15 +73,16 @@
data() { data() {
return { return {
queryParams: { queryParams: {
startYear: 2020, yearList: ["2020", "2021"],
endYear: 2021,
areaList: ['南宁市'], areaList: ['南宁市'],
placeList: [], placeList: [],
regionLevel: '市级', // 区域等级 regionLevel: '市级', // 区域等级
timeSlot: '昼',
xco: '年度' // 横坐标 xco: '年度' // 横坐标
}, },
trendData: [], trendData: [],
regionLevelOptions: [], regionLevelOptions: [],
timeSlotOptions: [],
placeOptions: [], placeOptions: [],
areaOptions: [], areaOptions: [],
yearOptions: [], 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.getArea()
this.getPlace('市级') this.getPlace('市级')
}, },
@@ -149,7 +153,7 @@
value: item.dictDataName, value: item.dictDataName,
}; };
}); });
// this.areaOptions.unshift({ label: '所有县', value: '所有县'}) this.areaOptions.unshift({ label: '所有县', value: '所有县'})
}) })
}, },
// 测点名称下拉列表 // 测点名称下拉列表
@@ -162,7 +166,6 @@
value: item, value: item,
}; };
}); });
// this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
}); });
}, },
handleRegionLevelChange(value) { handleRegionLevelChange(value) {
@@ -219,6 +222,39 @@
yAxis: this.trendData.yAxis, yAxis: this.trendData.yAxis,
series: this.trendData.series 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) trendChart.setOption(option)
} }
} }

View File

@@ -5,20 +5,8 @@
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical"> :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
<a-row> <a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="开始年度"> <a-form-item label="年度:">
<a-select v-model:value="queryParams.startYear" allowClear showSearch> <a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
<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-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
@@ -85,8 +73,7 @@
data() { data() {
return { return {
queryParams: { queryParams: {
startYear: 2020, yearList: ["2020", "2021"],
endYear: 2021,
areaList: ['南宁市'], areaList: ['南宁市'],
placeList: [], placeList: [],
regionLevel: '市级', // 区域等级 regionLevel: '市级', // 区域等级
@@ -166,6 +153,7 @@
value: item.dictDataName, 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('县级(在用)地表水饮用水','xlsm')" > 县级在用地表水饮用水 </a-menu-item>
<a-menu-item @click="download('县级(备用、规划)地表水饮用水','xls')"> 县级备用规划地表水饮用水 </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-item @click="download('各取水点取水量情况表','xlsx')" > 各取水点取水量取水量表 </a-menu-item>
</a-menu> </a-menu>
</template> </template>
<a-button type="primary" style="left: 60px"> <a-button type="primary" style="left: 60px">

View File

@@ -190,8 +190,9 @@
> >
</a-popconfirm> </a-popconfirm>
<a-upload <a-upload
:before-upload="importWaterWithdrawal" :before-upload="file=>importWaterWithdrawal(file,record)"
:showUploadList="false" :showUploadList="false"
accept=".xls,.xlsx,.csv" accept=".xls,.xlsx,.csv"
> >
<a-button <a-button
@@ -361,7 +362,7 @@ export default {
} }
}, },
/*市级取水量导入 */ /*市级取水量导入 */
importWaterWithdrawal(file) { importWaterWithdrawal(file,record) {
const hide = this.$message.loading("导入中..", 0); const hide = this.$message.loading("导入中..", 0);
let reader = new FileReader(); let reader = new FileReader();
@@ -371,23 +372,29 @@ export default {
let workbook = XLSX.read(data, { let workbook = XLSX.read(data, {
type: "array", 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, header: 1,
}); });
const drinkingWaterList = aoa1.filter((item) => { const drinkingWaterList = aoa1.filter((item) => {
return ( return (
item[0] && !item[0].includes("取水点") && !item[0].includes("合计") item[0] && !item[0].includes("取水点") && !item[0].includes("合计")
); );
}); });
const id=record.drinkingWaterBillId;
// drinkingWaterList.drinkingWaterBillId=record.drinkingWaterBillId;
// 解析成对象数组 // 解析成对象数组
// const billName1 = file.name; // const billName1 = file.name;
const billData1 = utils.importWaterWithdrawalData(drinkingWaterList); const billData1 = utils.importWaterWithdrawalData(drinkingWaterList);
console.log(billData1); // console.log(drinkingWaterList.length);
// console.log(billData1.place); // console.log(billData1.place);
if (!billData1 || billData1.length == 0) { if (!billData1 || billData1.length == 0) {
hide(); hide();
@@ -400,6 +407,8 @@ export default {
if (billData1.length > 0) { if (billData1.length > 0) {
updateWaterWithdrawal({ updateWaterWithdrawal({
// drinkingWaterBillId:record.drinkingWaterBillId,
drinkingWaterBillId:id,
drinkingWaterList: billData1, drinkingWaterList: billData1,
}) })
.then((res) => { .then((res) => {

View File

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

View File

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