Commit e33b04fa authored by huangjie's avatar huangjie

Merge branch 'dev20230707' of http://192.168.60.201/root/dsk-operate-sys into dev20230707

parents 65b24d03 97abc1f1
......@@ -54,7 +54,7 @@
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"sortablejs": "^1.15.0",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
......
......@@ -364,7 +364,10 @@ ul, li {
background: #DCEBFF;
}
.el-table__fixed{
bottom:0 !important;
//bottom:0 !important;
.el-table__body{
padding-bottom:16px;
}
tr:nth-child(2n){
background-color: #F8FBFF;
}
......@@ -394,7 +397,7 @@ ul, li {
}
}
}
}
.el-table__body tr.hover-row > td.el-table__cell{
background-color: #DCEBFF;
......
......@@ -422,7 +422,6 @@ export default {
cbxmzs:'193',
cbxmzje:'123',
},
],
gjjlData:[
{
......@@ -672,7 +671,6 @@ export default {
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.dcjzje),
......
......@@ -31,6 +31,7 @@
element-loading-text="Loading"
border
fit
height="640"
@sort-change="sortChange"
highlight-current-row
v-if="tableDataTotal > 0 && !isSkeleton"
......
......@@ -36,6 +36,7 @@
element-loading-text="Loading"
@sort-change="sortChange"
border
height="640"
highlight-current-row
v-if="tableDataTotal > 0 && !isSkeleton"
:default-sort = "{prop: 'gdp', order: 'descending'}"
......@@ -153,22 +154,12 @@
this.getYears()
},
mounted() {
// window.addEventListener("scroll",this.scrolling)
},
beforeDestroy() {
// window.removeEventListener("scroll", this.scrolling);
},
methods: {
scrolling() {
// let el = document.getElementsByClassName("el-table__fixed-header-wrapper")[0]
// let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
// if (scrollTop>138){
// let top = scrollTop-138
// el.style.top = top+'px'
// }else{
// el.style.top = 0
// }
},
getYears(){
getYears({}).then(res => {
this.yearOptions=res.data.reverse();
......
......@@ -5,7 +5,7 @@
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目供应方式</span>
<el-select v-model="years" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-select v-model="years" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
......@@ -40,7 +40,7 @@
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目土地用途</span>
<el-select v-model="years1" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-select v-model="years1" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
......@@ -75,16 +75,16 @@
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目地区Top10</span>
<el-select @change="handleSearch" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-select @change="handleYears(3)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
</el-select>
<el-select v-model="years2" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-select v-model="years2" @change="handleYears(3)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
<div class="content_box">
<div class="box-left">
<div class="box-left" style="width: 60%;">
<div id="echarts3" style="height: 300px"></div>
</div>
<div class="box-right">
......@@ -116,7 +116,7 @@
</div>
</div>
<div class="content_box">
<div class="box-left">
<div class="box-left" style="width: 60%;">
<div id="echarts4" style="height: 300px"></div>
</div>
<div class="box-right">
......@@ -158,14 +158,16 @@ export default {
myChart4:'',
addressList:[],
address:[],
years:['2023'],
years1:['2023'],
years2:['2022'],
years:[2023],
years1:[2023],
years2:[2023],
yearOptions:[],
gyfsList:[],
tdytList:[],
topList:[],
nftjList:[],
typeName:['住宅用地','工业用地','城镇住宅用地','其他商服用地','公共设施用地','公路用地','城镇村道路用地','公园与绿地',
'工矿仓储用地','零售商业用地','科研用地','街巷用地','机关团体用地','商服用地','商务金融用地']
}
},
created() {
......@@ -175,13 +177,9 @@ export default {
this.getCountLandMarketByTypeTd()
this.getCountLandMarketByProvince()
this.getCountLandMarketByYear()
window.addEventListener("resize", this.resizeEcharts);
},
beforeDestroy(){
window.removeEventListener("resize", this.resizeEcharts);
},
activated() {
this.resizeEcharts()
},
methods: {
getCountLandMarketByType(){
......@@ -202,7 +200,7 @@ export default {
countLandMarketByType({type:'土地用途',yearStr:this.years1.join(",")}).then(res => {
this.tdytList=res.data.provinceDate;
var list=[];
for(var i=0;i<res.data.provinceDate.length;i++){
for(var i=0;i<10;i++){
var obj={};
obj.name=res.data.provinceDate[i].type;
obj.value=res.data.provinceDate[i].count;
......@@ -221,26 +219,45 @@ export default {
}
countLandMarketByProvince(params).then(res => {
this.topList=res.data.provinceDate;
this.initChart3()
var list=[];
if(res.data.provinceDate){
for(var i=0;i<res.data.provinceDate.length;i++){
var obj={};
obj.province=res.data.provinceDate[i].province;
obj.value=res.data.provinceDate[i].count;
obj.rate=res.data.provinceDate[i].rate;
obj.typeList=res.data.provinceDate[i].typeList
list.push(obj)
}
this.$nextTick(() => {
this.initChart3(list)
})
}
})
},
getCountLandMarketByYear(){
countLandMarketByYear().then(res => {
this.nftjList=res.data.yearDate;
// var list=[];
// for(var i=0;i<res.data.provinceDate.length;i++){
// var obj={};
// obj.name=res.data.provinceDate[i].type;
// obj.value=res.data.provinceDate[i].count;
// obj.rate=res.data.provinceDate[i].rate;
// list.push(obj)
// }
// this.initChart2(list)
console.log(this.nftjList)
var list=[];
if(res.data.yearDate){
for(var i=0;i<res.data.yearDate.length;i++){
var obj={};
obj.type=res.data.yearDate[i].type;
obj.value=res.data.yearDate[i].count;
obj.rate=res.data.yearDate[i].rate;
obj.typeList=res.data.yearDate[i].typeList
list.push(obj)
}
this.$nextTick(() => {
this.initChart4(list)
})
}
})
},
initChart1(data) {
this.$nextTick(() => {
this.myChart1 = echarts.init(document.getElementById("echarts1"))
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
......@@ -280,12 +297,15 @@ export default {
}
]
}
this.myChart1.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart2(data) {
this.$nextTick(() => {
this.myChart2 = echarts.init(document.getElementById("echarts2"))
let myChart = echarts.init(document.getElementById("echarts2"))
let option ={
tooltip: {
trigger: 'item',
......@@ -325,20 +345,92 @@ export default {
}
]
}
this.myChart2.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart3() {
console.log(this.topList)
initChart3(data) {
this.$nextTick(() => {
this.myChart3 = echarts.init(document.getElementById("echarts3"))
// console.log(typeList)
let myChart = echarts.init(document.getElementById("echarts3"))
let seriesData=[]
let color=['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].typeList.length; j++){
item[typeNameList[j]] = [];
}
}
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].typeList.length; j++) {
if(data[i].typeList[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[10]){
item[typeNameList[10]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[11]){
item[typeNameList[11]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[12]){
item[typeNameList[12]].push(data[i].typeList[j].count)
}
}
}
for(var i=0; i<typeNameList.length; i++) {
seriesData.push({
name:typeNameList[i],
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
color: color[i], //图例颜色
borderWidth: 4,
borderColor: color[i],
lineStyle: { color: color[i], width: 2 }
}
},
data:item[typeNameList[i]],
});
}
let option ={
legend: {
x:'right',
padding:[3,120,0,0],
itemHeight:8,
itemWidth:16,
},
// legend: {
// left: "center",
// bottom: 0,
// itemHeight:8,
// itemWidth:16,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -351,67 +443,109 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jyfxData,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.province),
},
yAxis: {
type: 'value',
},
grid: {
top:40,
left:30,
right:10,
bottom:20,
top:30,
left:50,
right:20,
bottom:60,
},
series: [
{
data: this.topList.map(item => item.count),
name:this.topList.map(item => item.province),
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#81D4BC",
},
itemStyle:{
color: "#81D4BC",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(189, 249, 232, 1)'
}, {
offset: 1, color: 'rgba(189, 249, 232, 0)'
} ],
global: false
}
},
},
]
color:['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'],
series: seriesData
}
this.myChart3.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart4() {
initChart4(data) {
this.$nextTick(() => {
this.myChart4 = echarts.init(document.getElementById("echarts4"))
let myChart = echarts.init(document.getElementById("echarts4"))
let seriesData=[]
let color=['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].typeList.length; j++){
item[typeNameList[j]] = [];
}
}
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].typeList.length; j++) {
if(data[i].typeList[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[10]){
item[typeNameList[10]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[11]){
item[typeNameList[11]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[12]){
item[typeNameList[12]].push(data[i].typeList[j].count)
}
}
}
for(var i=0; i<typeNameList.length; i++) {
seriesData.push({
name:typeNameList[i],
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
color: color[i], //图例颜色
borderWidth: 4,
borderColor: color[i],
lineStyle: { color: color[i], width: 2 }
}
},
data:item[typeNameList[i]],
});
}
let option ={
legend: {
x:'right',
padding:[3,120,0,0],
itemHeight:8,
itemWidth:16,
},
// legend: {
// left: "center",
// bottom: 0,
// itemHeight:8,
// itemWidth:16,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -424,226 +558,28 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jyfxData,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.type),
},
yAxis: {
type: 'value',
},
grid: {
top:40,
left:30,
right:10,
bottom:20,
top:30,
left:50,
right:20,
bottom:60,
},
series: [
{
data: this.nftjList.map(item => item.type),
name:'待成交项目数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#81D4BC",
},
itemStyle:{
color: "#81D4BC",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(189, 249, 232, 1)'
}, {
offset: 1, color: 'rgba(189, 249, 232, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
},
itemStyle:{
color: "#9EE474",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(208, 250, 183, 1)'
}, {
offset: 1, color: 'rgba(208, 250, 183, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.cjxmje),
name:'成交项目金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#E1B3FF",
},
itemStyle:{
color: "#E1B3FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(233, 200, 255, 1)'
}, {
offset: 1, color: 'rgba(233, 200, 255, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.cjxmzs),
name:'成交项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#ADC0FF",
},
itemStyle:{
color: "#ADC0FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(173, 192, 255, 1)'
}, {
offset: 1, color: 'rgba(173, 192, 255, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.cbxmzs),
name:'储备项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#67B3FD",
},
itemStyle:{
color: "#67B3FD",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(192, 224, 255, 1)'
}, {
offset: 1, color: 'rgba(192, 224, 255, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.cbxmzje),
name:'储备项目总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#BEECFF",
},
itemStyle:{
color: "#BEECFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(165, 229, 255, 1)'
}, {
offset: 1, color: 'rgba(165, 229, 255, 0)'
} ],
global: false
}
},
},
]
color:['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'],
series: seriesData
}
this.myChart4.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
//地区
......@@ -664,6 +600,19 @@ export default {
}
this.addressList = str;
},
handleYears(key){
switch (key) {
case 1:
this.getCountLandMarketByType()
break;
case 2:
this.getCountLandMarketByTypeTd()
break;
case 3:
this.getCountLandMarketByProvince()
break;
}
},
handleSearch(){
// console.log(this.address)
},
......@@ -677,15 +626,6 @@ export default {
}
this.yearOptions=Years.reverse()
},
resizeEcharts (){
const self = this
setTimeout(function(){ //图表跟随页面大小变化宽度
self.myChart1.resize()
self.myChart2.resize()
// self.myChart3.resize()
// self.myChart4.resize()
}, 10)
},
formatStatus: function(row, column, cellValue) {
return cellValue? cellValue : '-'
},
......
......@@ -96,7 +96,7 @@
</div>
<div class="table-item">
<el-table
:data="tableData1"
:data="dataList"
border
height="430"
fit
......@@ -155,6 +155,7 @@ export default {
},
],
tableData1:[],
dataList:[],
dataSort:[
{
label:'',
......@@ -234,13 +235,15 @@ export default {
getDataByMonth(params){
countGroupByMonth(params).then(res => {
this.tableData1=res.data;
let companyValue1 = JSON.parse(JSON.stringify(this.tableData1))
let arr = this.tableData1.sort((a, b) => {
this.dataList=res.data;
let dataList=res.data
let dataArr = JSON.parse(JSON.stringify(dataList))
let arr = dataList.sort((a, b) => {
return b.count - a.count
})
this.tableData1 = JSON.parse(JSON.stringify(companyValue1))
this.dataSort=arr;
this.initChart1()
this.dataList = JSON.parse(JSON.stringify(dataArr))
})
},
initChart() {
......
......@@ -153,6 +153,7 @@
element-loading-text="Loading"
@sort-change="sortChange"
border
height="640"
fit
highlight-current-row
>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment