@@ -51,7 +51,7 @@ export const extUploader = function () { | |||||
// 内部方式上传 | // 内部方式上传 | ||||
this._Upload_inner = (url, data) => { | this._Upload_inner = (url, data) => { | ||||
console.log('使用内部上传: ' + process.env.VUE_APP_BASE_API + url); | |||||
//console.log('使用内部上传: ' + process.env.VUE_APP_BASE_API + url); | |||||
return request({ | return request({ | ||||
url: url, | url: url, | ||||
method: 'post', | method: 'post', | ||||
@@ -66,7 +66,7 @@ export const extUploader = function () { | |||||
data.append('token', this._token); | data.append('token', this._token); | ||||
else | else | ||||
data.token = this._token; | data.token = this._token; | ||||
console.log('使用外部上传: ' + this._remoteHost + url); | |||||
//console.log('使用外部上传: ' + this._remoteHost + url); | |||||
return request({ | return request({ | ||||
url: url, | url: url, | ||||
method: 'post', | method: 'post', | ||||
@@ -86,13 +86,13 @@ export const extUploader = function () { | |||||
this._token = resp.data; | this._token = resp.data; | ||||
this._remoteHost = resp.fileServerAddress; | this._remoteHost = resp.fileServerAddress; | ||||
this._usingExternal = true; | this._usingExternal = true; | ||||
console.log('使用外部上传: ' + this._remoteHost); | |||||
//console.log('使用外部上传: ' + this._remoteHost); | |||||
} | } | ||||
else { | else { | ||||
this._token = null; | this._token = null; | ||||
this._remoteHost = null; | this._remoteHost = null; | ||||
this._usingExternal = false; | this._usingExternal = false; | ||||
console.log('使用内部上传'); | |||||
//console.log('使用内部上传'); | |||||
} | } | ||||
this._supportExternal = true; | this._supportExternal = true; | ||||
}).catch(() => { | }).catch(() => { | ||||
@@ -100,7 +100,7 @@ export const extUploader = function () { | |||||
this._remoteHost = null; | this._remoteHost = null; | ||||
this._usingExternal = false; | this._usingExternal = false; | ||||
this._supportExternal = false; | this._supportExternal = false; | ||||
console.log('未配置文件外部服务, 将使用内部上传'); | |||||
//console.log('未配置文件外部服务, 将使用内部上传'); | |||||
}); | }); | ||||
}; | }; | ||||
@@ -151,7 +151,7 @@ export const extUploader = function () { | |||||
throw '请先调用Init进行初始化'; | throw '请先调用Init进行初始化'; | ||||
if (this._UsingExternal()) { | if (this._UsingExternal()) { | ||||
return this._Upload_external(extUrl, data).catch(() => { | return this._Upload_external(extUrl, data).catch(() => { | ||||
console.log('外部上传失败! 尝试转为内部上传'); | |||||
//console.log('外部上传失败! 尝试转为内部上传'); | |||||
this.ForceDisableExternal(); | this.ForceDisableExternal(); | ||||
return this._Upload_inner(innerUrl, data); | return this._Upload_inner(innerUrl, data); | ||||
}); | }); | ||||
@@ -1 +1,9 @@ | |||||
import request from '@/utils/request'; | import request from '@/utils/request'; | ||||
export function getStatistic (query) { | |||||
return request({ | |||||
url: '/api/asset/three/statistic', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -37,4 +37,4 @@ export function logout () { | |||||
url: '/api/logout', | url: '/api/logout', | ||||
method: 'post' | method: 'post' | ||||
}) | }) | ||||
} | |||||
} |
@@ -0,0 +1 @@ | |||||
<div :id="id" class="chart"></div> |
@@ -0,0 +1,378 @@ | |||||
import * as echarts from 'echarts'; | |||||
import elementResizeDetectorMaker from 'element-resize-detector'; | |||||
import fa from "element-ui/src/locale/lang/fa"; | |||||
export default { | |||||
props: { | |||||
id: { | |||||
type: String, | |||||
default: 'bar' | |||||
}, | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [ | |||||
{ | |||||
name: '1月', | |||||
value: '10' | |||||
}, | |||||
{ | |||||
name: '2月', | |||||
value: '19' | |||||
} | |||||
]; | |||||
} | |||||
}, | |||||
unit: { | |||||
type: String, | |||||
default: '单位:万元' | |||||
}, | |||||
color: { | |||||
type: Array, | |||||
default: function () { | |||||
return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] | |||||
} | |||||
}, | |||||
barBorderRadius: { | |||||
type: Array, | |||||
default: function () { | |||||
return [0, 0, 0, 0] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
chart: null | |||||
}; | |||||
}, | |||||
mounted () { | |||||
this.initChart(); | |||||
}, | |||||
computed: { | |||||
}, | |||||
methods: { | |||||
// 设置监听器 页面尺寸变化重新绘制图表 | |||||
initResizeCallBack () { | |||||
const erd = elementResizeDetectorMaker(); | |||||
erd.listenTo(document.getElementById(this.id), () => { | |||||
this.$nextTick(() => { | |||||
this.chart.resize(); | |||||
}); | |||||
}); | |||||
}, | |||||
initChart () { | |||||
this.chart = echarts.init(document.getElementById(this.id)); | |||||
this.chartSetOption(); | |||||
}, | |||||
chartSetOption () { | |||||
let xAxisData = []; | |||||
let data = []; | |||||
this.data.forEach(item => { | |||||
xAxisData.push(item.name) | |||||
data.push(item.value) | |||||
}); | |||||
const CubeLeft = echarts.graphic.extendShape({ | |||||
shape: { | |||||
x: 0, | |||||
y: 0, | |||||
}, | |||||
buildPath: function (ctx, shape) { | |||||
const xAxisPoint = shape.xAxisPoint; | |||||
const c0 = [shape.x, shape.y]; | |||||
const c1 = [shape.x - 9, shape.y - 9]; | |||||
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]; | |||||
const c3 = [xAxisPoint[0], xAxisPoint[1]]; | |||||
ctx | |||||
.moveTo(c0[0], c0[1]) | |||||
.lineTo(c1[0], c1[1]) | |||||
.lineTo(c2[0], c2[1]) | |||||
.lineTo(c3[0], c3[1]) | |||||
.closePath(); | |||||
}, | |||||
}); | |||||
const CubeRight = echarts.graphic.extendShape({ | |||||
shape: { | |||||
x: 0, | |||||
y: 0, | |||||
}, | |||||
buildPath: function (ctx, shape) { | |||||
const xAxisPoint = shape.xAxisPoint; | |||||
const c1 = [shape.x, shape.y]; | |||||
const c2 = [xAxisPoint[0], xAxisPoint[1]]; | |||||
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]; | |||||
const c4 = [shape.x + 18, shape.y - 9]; | |||||
ctx | |||||
.moveTo(c1[0], c1[1]) | |||||
.lineTo(c2[0], c2[1]) | |||||
.lineTo(c3[0], c3[1]) | |||||
.lineTo(c4[0], c4[1]) | |||||
.closePath(); | |||||
}, | |||||
}); | |||||
const CubeTop = echarts.graphic.extendShape({ | |||||
shape: { | |||||
x: 0, | |||||
y: 0, | |||||
}, | |||||
buildPath: function (ctx, shape) { | |||||
const c1 = [shape.x, shape.y]; | |||||
const c2 = [shape.x + 18, shape.y - 9]; | |||||
const c3 = [shape.x + 9, shape.y - 18]; | |||||
const c4 = [shape.x - 9, shape.y - 9]; | |||||
ctx | |||||
.moveTo(c1[0], c1[1]) | |||||
.lineTo(c2[0], c2[1]) | |||||
.lineTo(c3[0], c3[1]) | |||||
.lineTo(c4[0], c4[1]) | |||||
.closePath(); | |||||
}, | |||||
}); | |||||
echarts.graphic.registerShape("CubeLeft", CubeLeft); | |||||
echarts.graphic.registerShape("CubeRight", CubeRight); | |||||
echarts.graphic.registerShape("CubeTop", CubeTop); | |||||
const MAX = [ | |||||
500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, | |||||
]; | |||||
const VALUE = [ | |||||
201, 123, 379, 234, 165, 123, 379, 234, 165, 379, 234, 165, | |||||
]; | |||||
const option = { | |||||
// backgroundColor: "#010d3a", | |||||
title: { | |||||
text: "", | |||||
top: 32, | |||||
left: 18, | |||||
textStyle: { | |||||
color: "#00F6FF", | |||||
fontSize: 24, | |||||
}, | |||||
}, | |||||
grid: { | |||||
left: "0%", | |||||
right: "0%", | |||||
bottom: "5%", | |||||
top: "15%", | |||||
containLabel: true, | |||||
z: 22, | |||||
}, | |||||
xAxis: { | |||||
splitArea: { | |||||
show: false, | |||||
areaStyle: { | |||||
color: ['RGBA(13, 31, 64, 1)'] | |||||
} | |||||
}, | |||||
splitLine: { | |||||
show: false, | |||||
lineStyle: { | |||||
color: ['rgba(18, 40, 83, 1)'], | |||||
width: 100 | |||||
} | |||||
}, | |||||
type: "category", | |||||
gridIndex: 0, | |||||
data: [ | |||||
"A镇", | |||||
"A镇", | |||||
"A镇", | |||||
"A镇", | |||||
"A镇", | |||||
"A镇", | |||||
"A镇" | |||||
], | |||||
axisTick: { | |||||
alignWithLabel: true, | |||||
}, | |||||
axisLine: { | |||||
lineStyle: { | |||||
color: "#0c3b71", | |||||
}, | |||||
}, | |||||
axisLabel: { | |||||
show: true, | |||||
color: 'rgba(185, 211, 235, 1)' | |||||
} | |||||
}, | |||||
yAxis: { | |||||
name: this.unit, | |||||
type: "value", | |||||
nameTextStyle: { | |||||
color: 'rgba(185, 211, 235, 1)' | |||||
}, | |||||
axisLabel: { | |||||
formatter: "{value}", | |||||
textStyle: { | |||||
color: "rgba(185, 211, 235, 1)", | |||||
}, | |||||
}, | |||||
axisLine: { | |||||
lineStyle: { | |||||
color: "#27b4c2", | |||||
}, | |||||
}, | |||||
axisTick: { | |||||
show: false, | |||||
}, | |||||
splitLine: { | |||||
show: true, | |||||
lineStyle: { | |||||
color: "#11366e", | |||||
}, | |||||
}, | |||||
}, | |||||
series: [ | |||||
{ | |||||
type: "custom", | |||||
renderItem: function (params, api) { | |||||
const location = api.coord([api.value(0), api.value(1)]); | |||||
return { | |||||
type: "group", | |||||
children: [ | |||||
{ | |||||
type: "CubeLeft", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: "rgba(7,29,97,.6)", | |||||
}, | |||||
}, | |||||
{ | |||||
type: "CubeRight", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: "rgba(10,35,108,.7)", | |||||
}, | |||||
}, | |||||
{ | |||||
type: "CubeTop", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: "rgba(11,42,106,.8)", | |||||
}, | |||||
}, | |||||
], | |||||
}; | |||||
}, | |||||
data: MAX, | |||||
}, | |||||
{ | |||||
type: "custom", | |||||
renderItem: (params, api) => { | |||||
const location = api.coord([api.value(0), api.value(1)]); | |||||
return { | |||||
type: "group", | |||||
children: [ | |||||
{ | |||||
type: "CubeLeft", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||||
{ | |||||
offset: 0, | |||||
color: "#10fafa", | |||||
}, | |||||
{ | |||||
offset: 1, | |||||
color: "#0a97a1", | |||||
}, | |||||
]), | |||||
}, | |||||
}, | |||||
{ | |||||
type: "CubeRight", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||||
{ | |||||
offset: 0, | |||||
color: "#0a97a2", | |||||
}, | |||||
{ | |||||
offset: 1, | |||||
color: "#10fafa", | |||||
}, | |||||
]), | |||||
}, | |||||
}, | |||||
{ | |||||
type: "CubeTop", | |||||
shape: { | |||||
api, | |||||
xValue: api.value(0), | |||||
yValue: api.value(1), | |||||
x: location[0], | |||||
y: location[1], | |||||
xAxisPoint: api.coord([api.value(0), 0]), | |||||
}, | |||||
style: { | |||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||||
{ | |||||
offset: 0, | |||||
color: "#10fcfc", | |||||
}, | |||||
{ | |||||
offset: 1, | |||||
color: "#10fcfc", | |||||
}, | |||||
]), | |||||
}, | |||||
}, | |||||
], | |||||
}; | |||||
}, | |||||
data: VALUE, | |||||
}, | |||||
{ | |||||
type: "bar", | |||||
label: { | |||||
normal: { | |||||
show: false, | |||||
}, | |||||
}, | |||||
itemStyle: { | |||||
color: "transparent", | |||||
}, | |||||
data: MAX, | |||||
}, | |||||
], | |||||
}; | |||||
this.chart.setOption(option); | |||||
this.initResizeCallBack(); | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,6 @@ | |||||
.chart { | |||||
overflow: visible; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 2; | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -30,6 +30,12 @@ export default { | |||||
default: function () { | default: function () { | ||||
return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] | return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] | ||||
} | } | ||||
}, | |||||
barBorderRadius: { | |||||
type: Array, | |||||
default: function () { | |||||
return [0, 0, 0, 0] | |||||
} | |||||
} | } | ||||
}, | }, | ||||
data () { | data () { | ||||
@@ -38,7 +44,9 @@ export default { | |||||
}; | }; | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
this.initChart(); | |||||
setTimeout(()=>{ | |||||
this.initChart(); | |||||
},1000) | |||||
}, | }, | ||||
computed: { | computed: { | ||||
}, | }, | ||||
@@ -59,10 +67,14 @@ export default { | |||||
chartSetOption () { | chartSetOption () { | ||||
let xAxisData = []; | let xAxisData = []; | ||||
let data = []; | let data = []; | ||||
let bgData = []; | |||||
this.data.forEach(item => { | this.data.forEach(item => { | ||||
xAxisData.push(item.name) | xAxisData.push(item.name) | ||||
data.push(item.value) | data.push(item.value) | ||||
bgData.push(100) | |||||
}); | }); | ||||
//console.log(data); | |||||
const option = { | const option = { | ||||
color: ["#3398DB"], | color: ["#3398DB"], | ||||
tooltip: { | tooltip: { | ||||
@@ -167,7 +179,7 @@ export default { | |||||
], | ], | ||||
series: [ | series: [ | ||||
{ | { | ||||
name: "合格率", | |||||
name: "面积", | |||||
type: "bar", | type: "bar", | ||||
barWidth: 15, | barWidth: 15, | ||||
xAxisIndex: 0, | xAxisIndex: 0, | ||||
@@ -179,6 +191,7 @@ export default { | |||||
}, | }, | ||||
itemStyle: { | itemStyle: { | ||||
normal: { | normal: { | ||||
barBorderRadius: this.barBorderRadius, | |||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||
{ | { | ||||
offset: 0, | offset: 0, | ||||
@@ -216,11 +229,10 @@ export default { | |||||
style: api.style() | style: api.style() | ||||
}; | }; | ||||
}, | }, | ||||
data: [100, 100, 100, 100, 100, 100, 100] | |||||
}, | |||||
], | |||||
};; | |||||
data: bgData | |||||
} | |||||
] | |||||
}; | |||||
this.chart.setOption(option); | this.chart.setOption(option); | ||||
this.initResizeCallBack(); | this.initResizeCallBack(); | ||||
@@ -6,6 +6,14 @@ export default { | |||||
type: String, | type: String, | ||||
default: 'pie' | default: 'pie' | ||||
}, | }, | ||||
titleNum: { | |||||
type: String, | |||||
default: "1000 万元" | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: "总债务" | |||||
}, | |||||
data: { | data: { | ||||
type: Array, | type: Array, | ||||
default: function () { | default: function () { | ||||
@@ -96,7 +104,7 @@ export default { | |||||
const option = { | const option = { | ||||
title: [ | title: [ | ||||
{ | { | ||||
text: "总债务", | |||||
text: this.title, | |||||
left: "center", | left: "center", | ||||
top: "40%", | top: "40%", | ||||
padding: [0, 0], | padding: [0, 0], | ||||
@@ -107,7 +115,7 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
text: "1000 万元", | |||||
text: this.titleNum, | |||||
left: "center", | left: "center", | ||||
top: "50%", | top: "50%", | ||||
padding: [0, 0], | padding: [0, 0], | ||||
@@ -0,0 +1 @@ | |||||
<div class="header"></div> |
@@ -0,0 +1,35 @@ | |||||
export default { | |||||
computed: { | |||||
}, | |||||
props: { | |||||
callBack: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: '我是标题' | |||||
}, | |||||
back: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
backName: { | |||||
type: String, | |||||
default: '返回' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
goback () { | |||||
this.$router.go(-1) | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,9 @@ | |||||
.header { | |||||
position: absolute; | |||||
bottom: 0; | |||||
background: url('footer_bk.png'); | |||||
background-size: 100% 100%; | |||||
width: 100%; | |||||
height: 20px; | |||||
z-index: 9; | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -0,0 +1,9 @@ | |||||
<div class="header"> | |||||
<div class="left"> | |||||
<slot name="left"></slot> | |||||
</div> | |||||
<p class="title">{{title}}</p> | |||||
<div class="right"> | |||||
<div v-if="callBack" @click="goback" class="back"></div> | |||||
</div> | |||||
</div> |
@@ -0,0 +1,35 @@ | |||||
export default { | |||||
computed: { | |||||
}, | |||||
props: { | |||||
callBack: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: '我是标题' | |||||
}, | |||||
back: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
backName: { | |||||
type: String, | |||||
default: '返回' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
goback () { | |||||
this.$router.go(-1) | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,47 @@ | |||||
.header { | |||||
position: relative; | |||||
background: url('./header_bk.png'); | |||||
background-size: 100% 100%; | |||||
width: 100%; | |||||
height: 90px; | |||||
z-index: 9; | |||||
.title { | |||||
overflow: visible; | |||||
padding: 0 20px; | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(calc(-50% + 7.5px), -50%); | |||||
font-size: 30px; | |||||
letter-spacing: 15px; | |||||
// font-style: italic; | |||||
font-weight: 600; | |||||
background: linear-gradient(180deg, #FFFFFF 38.330078125%, #9be6f4 100%); | |||||
-webkit-background-clip: text; | |||||
-webkit-text-fill-color: transparent; | |||||
color: transparent; | |||||
} | |||||
.left { | |||||
position: absolute; | |||||
left: 20px; | |||||
top: 20px; | |||||
} | |||||
.right { | |||||
position: absolute; | |||||
right: 20px; | |||||
bottom: 10px; | |||||
.back { | |||||
cursor: pointer; | |||||
background: url('./back.png'); | |||||
background-size: 100% 100%; | |||||
width: 42px; | |||||
height: 42px; | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -0,0 +1 @@ | |||||
<div class="header"></div> |
@@ -0,0 +1,35 @@ | |||||
export default { | |||||
computed: { | |||||
}, | |||||
props: { | |||||
callBack: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: '我是标题' | |||||
}, | |||||
back: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
backName: { | |||||
type: String, | |||||
default: '返回' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
goback () { | |||||
this.$router.go(-1) | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,9 @@ | |||||
.header { | |||||
position: absolute; | |||||
bottom: 0; | |||||
background: url('left_bk.png'); | |||||
background-size: 100% 100%; | |||||
width: 20px; | |||||
height: 100%; | |||||
z-index: 9; | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -0,0 +1,25 @@ | |||||
<div class="pannel" :style="style" :class="[bkClass]"> | |||||
<div class="header_box"> | |||||
<div class="header row align_item_center"> | |||||
<div v-if="title" class="title_bk"> | |||||
<!-- <i class="icon"></i>--> | |||||
<p>{{title}}</p> | |||||
</div> | |||||
<div class="more"> | |||||
<slot name="header"></slot> | |||||
<div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div> | |||||
</div> | |||||
</div> | |||||
<div class="light"></div> | |||||
</div> | |||||
<div class="body"> | |||||
<div> | |||||
<slot></slot> | |||||
</div> | |||||
<div class="bottom_line"> | |||||
<div class="left_sign"></div> | |||||
<div class="right_sign"></div> | |||||
</div> | |||||
</div> | |||||
</div> |
@@ -0,0 +1,54 @@ | |||||
export default { | |||||
props: { | |||||
// 定义标题 | |||||
title: { | |||||
type: String, | |||||
default: '我是标题' | |||||
}, | |||||
bkClass: { | |||||
type: String, | |||||
default: 'bk_normal' | |||||
}, | |||||
/** | |||||
* 是否可以伸缩 | |||||
*/ | |||||
flexIble: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
// 定义跳转页面url | |||||
uri: { | |||||
type: String, | |||||
default: '' | |||||
}, | |||||
// 定义组件高度 | |||||
height: { | |||||
type: String, | |||||
default: '300' | |||||
}, | |||||
// 定义组件高度 | |||||
width: { | |||||
type: String, | |||||
default: '430' | |||||
} | |||||
}, | |||||
computed: { | |||||
style: function () { | |||||
return { | |||||
height: this.height + 'px', | |||||
width: this.isOpen ? 1000 + 'px' : this.width + 'px' | |||||
}; | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
// 是否展开 | |||||
isOpen: false | |||||
}; | |||||
}, | |||||
methods: { | |||||
open () { | |||||
this.isOpen = !this.isOpen | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,153 @@ | |||||
.pannel { | |||||
box-sizing: border-box; | |||||
display: flex; | |||||
flex-direction: column; | |||||
// 頭部區域 | |||||
.header_box { | |||||
position: relative; | |||||
//height: 35px; | |||||
overflow: visible !important; | |||||
.top_line { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
background-color: rgba(22, 60, 114, 1); | |||||
width: 100%; | |||||
height: 2px; | |||||
.left_sign { | |||||
height: 2px; | |||||
width: 13px; | |||||
background-color: rgba(53, 143, 255, 1); | |||||
} | |||||
.right_sign { | |||||
height: 2px; | |||||
width: 13px; | |||||
background-color: rgba(53, 143, 255, 1); | |||||
} | |||||
} | |||||
.header { | |||||
margin-top: 2px; | |||||
height: 45px; | |||||
background: #01142c url("header_bg.png") no-repeat -8px center; | |||||
background-size: 102% auto; | |||||
justify-content: space-between; | |||||
.title_bk { | |||||
// font-style: italic; | |||||
font-weight: 600; | |||||
height: 50px; | |||||
margin-left: 20px; | |||||
line-height: 38px; | |||||
text-align: center; | |||||
.icon { | |||||
display: block; | |||||
background: url('./icon.png'); | |||||
background-size: 100% 100%; | |||||
width: 18px; | |||||
height: 18px; | |||||
} | |||||
p { | |||||
margin-left: 10px; | |||||
} | |||||
} | |||||
.more { | |||||
margin-right: 20px; | |||||
} | |||||
} | |||||
.light { | |||||
position: absolute; | |||||
bottom: -2px; | |||||
left: 30px; | |||||
background: url('./light.png'); | |||||
background-size: 100% 100%; | |||||
width: 280px; | |||||
height: 30px; | |||||
animation: lightmove 4s infinite; | |||||
} | |||||
} | |||||
// 内容区域 | |||||
.body { | |||||
//margin: 2px; | |||||
padding: 10px; | |||||
width: 100%; | |||||
position: relative; | |||||
flex: 1; | |||||
background-color: #01142c; | |||||
overflow: hidden; | |||||
.bottom_line { | |||||
position: absolute; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
background-color: rgba(22, 60, 114, 1); | |||||
width: 100%; | |||||
height: 2px; | |||||
.left_sign { | |||||
height: 2px; | |||||
width: 13px; | |||||
background-color: rgba(53, 143, 255, 1); | |||||
} | |||||
.right_sign { | |||||
height: 2px; | |||||
width: 13px; | |||||
background-color: rgba(53, 143, 255, 1); | |||||
} | |||||
} | |||||
div { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | |||||
} | |||||
.flexIble { | |||||
z-index: 4; | |||||
width: 16px; | |||||
height: 16px; | |||||
background: url('./close.png'); | |||||
background-size: 100% 100%; | |||||
} | |||||
.flexIble_open { | |||||
width: 16px; | |||||
height: 16px; | |||||
background: url('./open.png') !important; | |||||
background-size: 100% 100%; | |||||
} | |||||
@keyframes lightmove { | |||||
/* 动画关键帧 */ | |||||
0% { | |||||
opacity: 1; | |||||
transform: translateX(0px); | |||||
/* 样式 */ | |||||
} | |||||
50% { | |||||
opacity: 0.2; | |||||
transform: translateX(170px); | |||||
} | |||||
/* 。。。 */ | |||||
100% { | |||||
opacity: 1; | |||||
transform: translateX(0px); | |||||
/* 样式 */ | |||||
} | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -0,0 +1 @@ | |||||
<div class="header"></div> |
@@ -0,0 +1,35 @@ | |||||
export default { | |||||
computed: { | |||||
}, | |||||
props: { | |||||
callBack: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: '我是标题' | |||||
}, | |||||
back: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
backName: { | |||||
type: String, | |||||
default: '返回' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
goback () { | |||||
this.$router.go(-1) | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,10 @@ | |||||
.header { | |||||
position: absolute; | |||||
bottom: 0; | |||||
right: 0; | |||||
background: url('right_bk.png'); | |||||
background-size: 100% 100%; | |||||
width: 20px; | |||||
height: 100%; | |||||
z-index: 9; | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -2,7 +2,7 @@ | |||||
export default { | export default { | ||||
increase: { // 自增 | increase: { // 自增 | ||||
inserted: function (el) { | inserted: function (el) { | ||||
console.log('【inserted】 inserted'); | |||||
//console.log('【inserted】 inserted'); | |||||
const endText = el.innerText; | const endText = el.innerText; | ||||
// const endText = el.dataset.value; | // const endText = el.dataset.value; | ||||
const end = el.innerText * 1; | const end = el.innerText * 1; | ||||
@@ -36,6 +36,12 @@ const routes = [ | |||||
path: '/property', | path: '/property', | ||||
name: 'property', | name: 'property', | ||||
component: () => import('@/views/property/index.vue') | component: () => import('@/views/property/index.vue') | ||||
}, | |||||
// // 三清五治 | |||||
{ | |||||
path: '/sanqing', | |||||
name: 'sanqing', | |||||
component: () => import('@/views/sanqing/index.vue') | |||||
} | } | ||||
]; | ]; | ||||
@@ -223,7 +223,7 @@ const user = { | |||||
} | } | ||||
getConfig().then((num) => { | getConfig().then((num) => { | ||||
// console.log(res) | |||||
// //console.log(res) | |||||
if (num && num.code == 200) { | if (num && num.code == 200) { | ||||
let content = num.data; | let content = num.data; | ||||
commit('SET_DEPTLEVEL', content.deptLevel) | commit('SET_DEPTLEVEL', content.deptLevel) | ||||
@@ -124,4 +124,4 @@ body { | |||||
background-color: rgba(6, 24, 24, 0.585); | background-color: rgba(6, 24, 24, 0.585); | ||||
border-radius: 4px; | border-radius: 4px; | ||||
box-shadow: 0px 0px 13px 0px #48B7FF inset; | box-shadow: 0px 0px 13px 0px #48B7FF inset; | ||||
} | |||||
} |
@@ -43,7 +43,7 @@ service.interceptors.request.use(config => { | |||||
} | } | ||||
return config | return config | ||||
}, error => { | }, error => { | ||||
//console.log(error) | |||||
////console.log(error) | |||||
Promise.reject(error) | Promise.reject(error) | ||||
}) | }) | ||||
@@ -87,11 +87,11 @@ service.interceptors.response.use(res => { | |||||
} | } | ||||
} catch (e) { | } catch (e) { | ||||
console.log(e) | |||||
//console.log(e) | |||||
} | } | ||||
}, | }, | ||||
error => { | error => { | ||||
//console.log('err' + error) | |||||
////console.log('err' + error) | |||||
let { message } = error; | let { message } = error; | ||||
if (message == "Network Error") { | if (message == "Network Error") { | ||||
message = "后端接口连接异常"; | message = "后端接口连接异常"; | ||||
@@ -21,7 +21,7 @@ export default { | |||||
}, | }, | ||||
methods: { | methods: { | ||||
tabChange (info) { | tabChange (info) { | ||||
console.log(info); | |||||
//console.log(info); | |||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
} | } | ||||
} | } | ||||
@@ -143,7 +143,7 @@ export default { | |||||
} | } | ||||
}) | }) | ||||
.catch((error) => { | .catch((error) => { | ||||
console.log(error); | |||||
//console.log(error); | |||||
const errorString = error + ""; | const errorString = error + ""; | ||||
this.loading = false; | this.loading = false; | ||||
if (errorString.indexOf("证书无效") > -1) { | if (errorString.indexOf("证书无效") > -1) { | ||||
@@ -1,17 +1,26 @@ | |||||
export default [ | export default [ | ||||
{ | |||||
icon: require('./1.png'), | |||||
path: '/capital', | |||||
name: '资金一张图' | |||||
}, | |||||
{ | |||||
icon: require('./3.png'), | |||||
path: '/property', | |||||
name: '资产一张图' | |||||
}, | |||||
{ | |||||
icon: require('./2.png'), | |||||
path: '/resources', | |||||
name: '资源一张图' | |||||
} | |||||
] | |||||
[ | |||||
{ | |||||
icon: require('./1.png'), | |||||
path: '/capital', | |||||
name: '资金一张图' | |||||
}, | |||||
{ | |||||
icon: require('./3.png'), | |||||
path: '/property', | |||||
name: '资产一张图' | |||||
}, | |||||
{ | |||||
icon: require('./2.png'), | |||||
path: '/resources', | |||||
name: '资源一张图' | |||||
}, | |||||
], | |||||
[ | |||||
{ | |||||
icon: require('./2.png'), | |||||
path: '/sanqing', | |||||
name: '三清五治一张图' | |||||
} | |||||
] | |||||
] |
@@ -2,10 +2,17 @@ | |||||
<Header title="卧龙区集体资产监管一张图"> | <Header title="卧龙区集体资产监管一张图"> | ||||
</Header> | </Header> | ||||
<div class="main"> | <div class="main"> | ||||
<div v-for="item in data" class="item hover_pointer" @click="jump(item)"> | |||||
<img :src="item.icon" alt=""> | |||||
<p class="name">{{item.name}}</p> | |||||
</div> | |||||
<el-carousel trigger="click" height="580px" :autoplay="false"> | |||||
<el-carousel-item v-for="(item,index) in data" :key="index"> | |||||
<div class="flex_block"> | |||||
<div class="item hover_pointer" v-for="(item2,index2) in item" :key="index2 + 'item2'" @click="jump(item2)"> | |||||
<img :src="item2.icon" alt=""> | |||||
<p class="name">{{item2.name}}</p> | |||||
</div> | |||||
</div> | |||||
</el-carousel-item> | |||||
</el-carousel> | |||||
</div> | </div> | ||||
<div class="left_light"></div> | <div class="left_light"></div> | ||||
<div class="right_light"></div> | <div class="right_light"></div> | ||||
@@ -30,7 +30,13 @@ | |||||
left: 50%; | left: 50%; | ||||
top: 26%; | top: 26%; | ||||
transform: translateX(-50%); | transform: translateX(-50%); | ||||
width: 70%; | |||||
} | |||||
.flex_block{ | |||||
display: flex; | display: flex; | ||||
align-items: center; | |||||
padding: 2vh 4vh; | |||||
} | } | ||||
.item { | .item { | ||||
@@ -63,4 +69,8 @@ | |||||
font-size: 36px; | font-size: 36px; | ||||
margin-bottom: 50px; | margin-bottom: 50px; | ||||
} | } | ||||
} | |||||
} | |||||
::v-deep .el-carousel__arrow{ | |||||
font-size: 32px; | |||||
} |
@@ -29,7 +29,7 @@ export default { | |||||
}, | }, | ||||
methods: { | methods: { | ||||
tabChange (info) { | tabChange (info) { | ||||
console.log(info); | |||||
//console.log(info); | |||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
} | } | ||||
} | } | ||||
@@ -28,7 +28,7 @@ export default { | |||||
deptLayer: "", // 坐标点图层 | deptLayer: "", // 坐标点图层 | ||||
countyBorderLayerName: "", // 区县边界图层名称 | countyBorderLayerName: "", // 区县边界图层名称 | ||||
townBorderLayerName: "", // 乡镇边界图层名称 | townBorderLayerName: "", // 乡镇边界图层名称 | ||||
villageBorderLayerName: "", // 村边界图层名称 | |||||
//villageBorderLayerName: "", // 村边界图层名称 | |||||
groupBorderLayerName: "", // 组边界图层名称 | groupBorderLayerName: "", // 组边界图层名称 | ||||
LegendData: [ | LegendData: [ | ||||
{ | { | ||||
@@ -446,7 +446,7 @@ export default { | |||||
let features = []; | let features = []; | ||||
permanentList.forEach(item => { | permanentList.forEach(item => { | ||||
if (item.theGeom != null && item.theGeom !== '') { | if (item.theGeom != null && item.theGeom !== '') { | ||||
// console.log(222, useType, item); | |||||
// //console.log(222, useType, item); | |||||
const { useType } = item | const { useType } = item | ||||
let icon = iconMap[useType + ''] | let icon = iconMap[useType + ''] | ||||
let fs = gis.getFeature2(item, icon) | let fs = gis.getFeature2(item, icon) | ||||
@@ -459,9 +459,9 @@ export default { | |||||
gis.mapSetFit(features) | gis.mapSetFit(features) | ||||
}, | }, | ||||
// 添加村边界 | // 添加村边界 | ||||
addVillageBorder (deptId) { | |||||
gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptId) | |||||
}, | |||||
// addVillageBorder (deptId) { | |||||
// gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptId) | |||||
// }, | |||||
// 获取geoserver的地址 | // 获取geoserver的地址 | ||||
getGeoServerUrl () { | getGeoServerUrl () { | ||||
// 获取geoserver的地址 | // 获取geoserver的地址 | ||||
@@ -669,7 +669,7 @@ export default { | |||||
}, | }, | ||||
// 添加乡镇边界 | // 添加乡镇边界 | ||||
addTownBorder (deptIds) { | addTownBorder (deptIds) { | ||||
console.log(this.townBorderLayerName); | |||||
//console.log(this.townBorderLayerName); | |||||
gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | ||||
}, | }, | ||||
// 添加村边界 | // 添加村边界 | ||||
@@ -29,7 +29,7 @@ export default { | |||||
}, | }, | ||||
methods: { | methods: { | ||||
tabChange (info) { | tabChange (info) { | ||||
console.log(info); | |||||
//console.log(info); | |||||
this.tabIndex = info.id | this.tabIndex = info.id | ||||
} | } | ||||
} | } | ||||
@@ -285,18 +285,18 @@ export default { | |||||
addTownBorder (deptIds) { | addTownBorder (deptIds) { | ||||
gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | ||||
}, | }, | ||||
// 添加村边界 | |||||
addVillageBorder (deptIds) { | |||||
gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
}, | |||||
// 获取资源列表 | |||||
getResourceList (deptId) { | |||||
getResourceListByDeptId(deptId).then(response => { | |||||
if (response.data && response.data.length > 0) { | |||||
this.addResourceLayer(response.data); | |||||
} | |||||
}); | |||||
}, | |||||
// // 添加村边界 | |||||
// addVillageBorder (deptIds) { | |||||
// gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
// }, | |||||
// // 获取资源列表 | |||||
// getResourceList (deptId) { | |||||
// getResourceListByDeptId(deptId).then(response => { | |||||
// if (response.data && response.data.length > 0) { | |||||
// this.addResourceLayer(response.data); | |||||
// } | |||||
// }); | |||||
// }, | |||||
// 获取geoserver的地址 | // 获取geoserver的地址 | ||||
getGeoServerUrl () { | getGeoServerUrl () { | ||||
// 获取geoserver的地址 | // 获取geoserver的地址 | ||||
@@ -391,7 +391,7 @@ export default { | |||||
// // 获取资源列表 | // // 获取资源列表 | ||||
this.getResourceList(deptId); | this.getResourceList(deptId); | ||||
let dept2 = this.addrOptions[0]; | let dept2 = this.addrOptions[0]; | ||||
console.log(this.addrOptions, 'this.addrOptions'); | |||||
//console.log(this.addrOptions, 'this.addrOptions'); | |||||
if (dept2.deptLevel === '5') { | if (dept2.deptLevel === '5') { | ||||
// 登录身份为市级领导 | // 登录身份为市级领导 | ||||
this.userRole = 'cityLeader'; | this.userRole = 'cityLeader'; | ||||
@@ -543,7 +543,7 @@ export default { | |||||
}, | }, | ||||
// 创建矢量数据源 | // 创建矢量数据源 | ||||
addDeptLayer (nextDeptSet, locationIcon) { | addDeptLayer (nextDeptSet, locationIcon) { | ||||
console.log('nextDeptSet', nextDeptSet); | |||||
//console.log('nextDeptSet', nextDeptSet); | |||||
let features = []; | let features = []; | ||||
nextDeptSet.forEach(item => { | nextDeptSet.forEach(item => { | ||||
let fs = gis.getFeature(item, this.yellowIcon) | let fs = gis.getFeature(item, this.yellowIcon) | ||||
@@ -0,0 +1,34 @@ | |||||
export default [ | |||||
[ | |||||
{ | |||||
show: true, | |||||
name: '农用地(亩)', | |||||
value: '716' | |||||
}, | |||||
{ | |||||
show: true, | |||||
name: '建设用地(亩)', | |||||
value: '716' | |||||
}, | |||||
{ | |||||
show: true, | |||||
name: '未利用地(亩)', | |||||
value: '716' | |||||
}, | |||||
{ | |||||
show: true, | |||||
name: '农用地(宗)', | |||||
value: '716' | |||||
}, | |||||
{ | |||||
show: true, | |||||
name: '建设用地(宗)', | |||||
value: '716' | |||||
}, | |||||
{ | |||||
show: true, | |||||
name: '未利用地(宗)', | |||||
value: '103' | |||||
} | |||||
] | |||||
] |
@@ -0,0 +1,64 @@ | |||||
<div class="buttom2"> | |||||
<div> | |||||
<div class="flex_main"> | |||||
<i></i> | |||||
<p class="tt">集体资源资产统计</p> | |||||
<div class="flex_block"> | |||||
<p>数量</p> | |||||
<p>{{data.jtzyzc.num}}个</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>用地面积</p> | |||||
<p>{{data.jtzyzc.ydmj}}亩</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>建筑面积</p> | |||||
<p>{{data.jtzyzc.jzmj}}㎡</p> | |||||
</div> | |||||
</div> | |||||
<div class="flex_main"> | |||||
<i></i> | |||||
<p class="tt">农业设施设备统计</p> | |||||
<div class="flex_block"> | |||||
<p>数量</p> | |||||
<p>{{data.nysssb.num}}个</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>用地面积</p> | |||||
<p>{{data.nysssb.ydmj}}亩</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>建筑面积</p> | |||||
<p>{{data.nysssb.jzmj}}㎡</p> | |||||
</div> | |||||
</div> | |||||
<div class="flex_main"> | |||||
<i></i> | |||||
<p class="tt">农户资产统计</p> | |||||
<div class="flex_block"> | |||||
<p>数量</p> | |||||
<p>{{data.nhzc.num}}个</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>用地面积</p> | |||||
<p>{{data.nhzc.ydmj}}亩</p> | |||||
</div> | |||||
<div class="flex_block"> | |||||
<p>建筑面积</p> | |||||
<p>{{data.nhzc.jzmj}}㎡</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div> | |||||
<div class="flex_main_right"> | |||||
<p>{{data.xy23}}<span>万元</span></p> | |||||
<p>2023年盘活效益</p> | |||||
</div> | |||||
<div class="flex_main_right"> | |||||
<p>{{data.xy24}}<span>万元</span></p> | |||||
<p>2024年盘活效益</p> | |||||
</div> | |||||
</div> | |||||
</div> |
@@ -0,0 +1,24 @@ | |||||
import BlockValue from '@/components/value/index.vue'; | |||||
export default { | |||||
components: { | |||||
BlockValue | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
} | |||||
}; |
@@ -0,0 +1,89 @@ | |||||
.buttom2 { | |||||
width: 960px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
.flex_main{ | |||||
background: url("bg.png") no-repeat 10px center; | |||||
background-size: calc(100% - 10px) 100%; | |||||
width: 220px; | |||||
height: 150px; | |||||
padding: 15px 15px 15px 25px; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
margin-bottom: 15px; | |||||
position: relative; | |||||
.flex_block{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
p:nth-child(1){ | |||||
color: #e6f1ff; | |||||
} | |||||
} | |||||
.tt{ | |||||
text-shadow: 2px 2px 4px #000000; | |||||
font-size: 18px; | |||||
font-weight: bold; | |||||
} | |||||
i{ | |||||
display: block; | |||||
height: 100%; | |||||
width: 5px; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
} | |||||
&:nth-child(1){ | |||||
i{ | |||||
background-color: #00d6f8; | |||||
} | |||||
.flex_block{ | |||||
p:nth-child(2){ | |||||
color: #00d6f8; | |||||
} | |||||
} | |||||
} | |||||
&:nth-child(2){ | |||||
i{ | |||||
background-color: #f7cc3a; | |||||
} | |||||
.flex_block{ | |||||
p:nth-child(2){ | |||||
color: #f7cc3a; | |||||
} | |||||
} | |||||
} | |||||
&:nth-child(3){ | |||||
i{ | |||||
background-color: #04e26f; | |||||
} | |||||
.flex_block{ | |||||
p:nth-child(2){ | |||||
color: #04e26f; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.flex_main_right{ | |||||
background: url("bg2.png") no-repeat center; | |||||
background-size: 100% 100%; | |||||
width: 220px; | |||||
height: 100px; | |||||
margin-bottom: 15px; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
justify-content: space-evenly; | |||||
p:nth-child(1){ | |||||
color: #01d5f8; | |||||
font-size: 26px; | |||||
font-weight: bold; | |||||
span{ | |||||
font-size: 14px; | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,11 @@ | |||||
<Pannel title="资金支出分析" height="340" flexIble> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Pie | |||||
:title="'总资产'" | |||||
:titleNum="'167万元'" | |||||
:data="data" | |||||
></Pie> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,34 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Pie from '@/components/charts/pie/index.vue'; | |||||
export default { | |||||
components: { | |||||
Pie, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
pannelTabData: [], | |||||
tabIndex: '1' | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
tabChange (info) { | |||||
//console.log(info); | |||||
this.tabIndex = info.id | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,12 @@ | |||||
<Pannel title="农业设施设备" height="300"> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Bar id="bar3" | |||||
:color="['#01d4f8', '#2194ff']" | |||||
:barBorderRadius="[15, 15, 15, 15]" | |||||
:data="data" | |||||
unit="单位:亩" | |||||
></Bar> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,32 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Bar from '@/components/charts/bar/index.vue'; | |||||
export default { | |||||
components: { | |||||
Bar, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
nysssbDeptList:[] | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
tabChange (info) { | |||||
this.tabIndex = info.id | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,12 @@ | |||||
<Pannel title="集体资源资产" height="300"> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Bar | |||||
:color="['#f7cc3a', '#f7803f']" | |||||
:barBorderRadius="[15, 15, 15, 15]" | |||||
:data="data" | |||||
unit="单位:亩" | |||||
></Bar> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,29 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Bar from '@/components/charts/bar/index.vue'; | |||||
export default { | |||||
components: { | |||||
Bar, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,11 @@ | |||||
<Pannel title="农户资产分布" height="300"> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Bar id="bar6" | |||||
:color="['#01d4f8', '#2194ff']" | |||||
:data="data" | |||||
unit="单位:亩" | |||||
></Bar> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,60 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Bar from '@/components/charts/bar-dimensional/index.vue'; | |||||
export default { | |||||
components: { | |||||
Bar, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
chartData: [ | |||||
{ | |||||
name: 'A镇', | |||||
value: '100' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '190' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '180' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '170' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '160' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '150' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '240' | |||||
} | |||||
] | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
tabChange (info) { | |||||
this.tabIndex = info.id | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,11 @@ | |||||
<Pannel title="农业设施设备分布" height="300"> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Bar id="bar5" | |||||
:color="['#01d4f8', '#2194ff']" | |||||
:data="data" | |||||
unit="单位:亩" | |||||
></Bar> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,60 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Bar from '@/components/charts/bar/index.vue'; | |||||
export default { | |||||
components: { | |||||
Bar, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
chartData: [ | |||||
{ | |||||
name: 'A镇', | |||||
value: '100' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '190' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '180' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '170' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '160' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '150' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '240' | |||||
} | |||||
] | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
tabChange (info) { | |||||
this.tabIndex = info.id | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,11 @@ | |||||
<Pannel title="集体资源资产分布" height="300"> | |||||
<div class="full"> | |||||
<div class="buttom"> | |||||
<Bar id="bar4" | |||||
:color="['#f7cc3a', '#f7803f']" | |||||
:data="data" | |||||
unit="单位:亩" | |||||
></Bar> | |||||
</div> | |||||
</div> | |||||
</Pannel> |
@@ -0,0 +1,57 @@ | |||||
import Pannel from '@/components/pannelNew/index.vue'; | |||||
import Bar from '@/components/charts/bar/index.vue'; | |||||
export default { | |||||
components: { | |||||
Bar, | |||||
Pannel | |||||
}, | |||||
props: { | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [] | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
chartData: [ | |||||
{ | |||||
name: 'A镇', | |||||
value: '100' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '190' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '180' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '170' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '160' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '150' | |||||
}, | |||||
{ | |||||
name: 'A镇', | |||||
value: '240' | |||||
} | |||||
] | |||||
}; | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
} | |||||
}; |
@@ -0,0 +1,17 @@ | |||||
.full { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.top { | |||||
height: 50px !important; | |||||
width: 100%; | |||||
display: flex !important; | |||||
align-items: center !important; | |||||
justify-content: flex-end; | |||||
} | |||||
.buttom { | |||||
flex: 1; | |||||
width: 100%; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -0,0 +1,28 @@ | |||||
export const comps = { | |||||
'1': { | |||||
left: [{ | |||||
name: 'Left11', | |||||
data: [] | |||||
},{ | |||||
name: 'Left21', | |||||
data: [] | |||||
},{ | |||||
name: 'Left31', | |||||
data: [] | |||||
}], | |||||
right: [{ | |||||
name: 'Right11', | |||||
data: [] | |||||
},{ | |||||
name: 'Right21', | |||||
data: [] | |||||
},{ | |||||
name: 'Right31', | |||||
data: [] | |||||
}], | |||||
buttom: [{ | |||||
name: 'Bottom1', | |||||
data: {} | |||||
}] | |||||
} | |||||
} |
@@ -0,0 +1,17 @@ | |||||
<div class="page"> | |||||
<MainGis></MainGis> | |||||
<Header title="三清五治一张图" callBack></Header> | |||||
<!-- 项目初始化 --> | |||||
<div class="left_side col space_between zIndextop"> | |||||
<component :is="item.name" v-for="(item, index) in currentComp.left" :key="index" :data="item.data"></component> | |||||
</div> | |||||
<div class="right_side col space_between zIndextop"> | |||||
<component :is="item.name" v-for="(item, index) in currentComp.right" :key="index" :data="item.data"></component> | |||||
</div> | |||||
<div class="buttom_side row space_between zIndextop"> | |||||
<component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component> | |||||
</div> | |||||
<Left></Left> | |||||
<Right></Right> | |||||
<Footer></Footer> | |||||
</div> |
@@ -0,0 +1,112 @@ | |||||
import Header from '@/components/headerNew/index.vue'; | |||||
import Footer from '@/components/footer/index.vue'; | |||||
import Left from '@/components/left/index.vue'; | |||||
import Right from '@/components/right/index.vue'; | |||||
import Tabs from '@/components/tabs/index.vue'; | |||||
import Left11 from './comps/left/top/1/index.vue'; | |||||
import Left21 from './comps/left/middle/1/index.vue'; | |||||
import Left31 from './comps/left/bottom/1/index.vue'; | |||||
import Right11 from './comps/right/top/1/index.vue'; | |||||
import Right21 from './comps/right/middle/1/index.vue'; | |||||
import Right31 from './comps/right/bottom/1/index.vue'; | |||||
import Bottom1 from './comps/buttom/1/index.vue'; | |||||
import MainGis from './main-gis/index.vue'; | |||||
import { comps } from './data.js' | |||||
import { getStatistic } from "@/api/index"; | |||||
import { getInfo } from "@/api/login"; | |||||
export default { | |||||
components: { | |||||
MainGis, | |||||
Header, | |||||
Footer, | |||||
Left, | |||||
Right, | |||||
Tabs, | |||||
Left11, | |||||
Left21, | |||||
Left31, | |||||
Right11, | |||||
Right21, | |||||
Right31, | |||||
Bottom1 | |||||
}, | |||||
data () { | |||||
return { | |||||
comps, | |||||
tab: '1', | |||||
allData: {} | |||||
}; | |||||
}, | |||||
computed: { | |||||
currentComp: function () { | |||||
return this.comps[this.tab] | |||||
} | |||||
}, | |||||
created () { | |||||
getInfo().then(res => { | |||||
getStatistic({ deptId: res.user.deptId }).then((response) => { | |||||
response.data.jtzyzcDeptList.map(rr => { | |||||
this.currentComp.left[0].data.push({ | |||||
name: rr.deptName, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
response.data.nysssbDeptList.map(rr => { | |||||
this.currentComp.left[1].data.push({ | |||||
name: rr.deptName, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
response.data.nhzcDeptList.map(rr => { | |||||
this.currentComp.left[2].data.push({ | |||||
name: rr.deptName, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
response.data.jtzyzcTypeList.map(rr => { | |||||
this.currentComp.right[0].data.push({ | |||||
name: rr.threeDetailType, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
response.data.nysssbTypeList.map(rr => { | |||||
this.currentComp.right[1].data.push({ | |||||
name: rr.threeDetailType, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
response.data.nhzcTypeList.map(rr => { | |||||
this.currentComp.right[2].data.push({ | |||||
name: rr.threeDetailType, | |||||
value: rr.ydmj | |||||
}) | |||||
}) | |||||
this.currentComp.buttom[0].data = { | |||||
jtzyzc: response.data.jtzyzc,//集体资源资产 | |||||
nysssb: response.data.nysssb,//农业设施设备 | |||||
nhzc: response.data.nhzc, | |||||
xy23: response.data.xy23, | |||||
xy24: response.data.xy24 | |||||
} | |||||
console.log(this.currentComp) | |||||
this.allData = response.data; | |||||
}); | |||||
}) | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
tabChange (info) { | |||||
this.tab = info.id; | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,11 @@ | |||||
.map { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
} | |||||
.buttom_side { | |||||
top: 100px; | |||||
bottom: auto; | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |