Loki/uni-pos
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1.1

Browse Source
This commit is contained in:
zkthink
2020-07-02 02:11:34 +08:00
parent 15c7b64f52
commit 107232d78a
26 changed files with 4811 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Management/AddDialog.vue
+13 -12
View File
@@ -52,11 +52,11 @@
placeholder="请输入生效日期"
/>
</form-item>
<form-item label="生效时限" prop="expireLimitYear">
<form-item label="生效时限(年)" prop="expireLimitYear">
<Input
v-model="formParams.expireLimitYear"
size="medium"
placeholder="请输入生效日期"
placeholder="请输入生效时限"
maxlength="4"
show-word-limit
clearable
@@ -234,19 +234,20 @@ export default {
this.$refs.addForm && this.$refs.addForm.resetFields()
},
async addManagement() {
this.addLoading = true
const res = await Management.addTenant(this.formParams).then(() => {
this.addLoading = false
})
const resData = res.data
this.addLoading = false
if (resData.code === 0) {
this.resetForm()
this.$message({
const vm = this
vm.addLoading = true
Management.addTenant(vm.formParams).then((res) => {
vm.addLoading = false
// const resData = res.data
vm.addLoading = false
// if (resData.code === 0) {
vm.resetForm()
vm.$message({
message: '创建成功！',
type: 'success'
})
}
// }
})
}
}
}
src/components/marketEchart/bar.vue
+114
View File
@@ -0,0 +1,114 @@
<template>
<div class="full-size">
<div
ref="myEchart"
class="full-size"
></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
chartData: {
type: Object,
default: () => {}
}
},
data () {
return {
}
},
watch: {
chartData: {
deep: true,
handler (newVal) {
this.chartData = newVal
this.draw()
}
}
},
mounted () {
this.draw()
},
methods: {
draw () {
const myEchart = echarts.init(this.$refs.myEchart, 'light')
const o = this.chartData
// y轴设置
const y = Object.assign(
{},
{
name: '金额/万元',
nameLocation: 'end',
nameTextStyle: {
color: '#999999',
fontSize: 14,
padding: [0, 10, -5, 0]
},
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(163,167,174,0.5)',
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: '#E0E5EB'
}
},
axisLabel: {
color: '#999999',
fontSize: 14
},
axisTick: {
show: false
}
},
o.yAxis
)
const option = {
// 图标的位置
grid: {
top: '15%',
bottom: '15%',
left: '10%'
},
// x轴
xAxis: {
name: '时间',
nameLocation: 'end',
nameTextStyle: {
color: '#999999',
fontSize: 14,
padding: [0, 0, 0, -10]
},
data: o.xData,
axisLabel: {
color: '#999999',
fontSize: 14
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#E0E5EB'
}
}
},
// y轴
yAxis: y,
// 柱状图和线状图数据展示
series: o.series
}
myEchart.setOption(option)
}
}
}
</script>
src/components/marketEchart/cake.vue
+77
View File
@@ -0,0 +1,77 @@
<template>
<div class="full-size">
<div
ref="myEchart"
class="full-size"
></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
chartData: {
type: Object,
default: () => {}
}
},
data () {
return {
}
},
watch: {
chartData: {
deep: true,
handler (newVal) {
this.chartData = newVal
this.draw()
}
}
},
mounted () {
this.draw()
},
methods: {
draw () {
const myEchart = echarts.init(this.$refs.myEchart, 'light')
const o = this.chartData
const option = {
color: ['#3A68F2', '#DEDEDE'],
series: [
Object.assign({}, {
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '55%'],
label: {
normal: {
show: true,
formatter: function (p) {
// const t = o.lineBreak ? '\n' : ' '
// ${p.value + o.unit}
return `{a|${p.name}}{b| ${p.percent}%}`
},
rich: {
a: {
color: '#666666',
fontSize: 16
},
b: {
color: '#666666',
fontSize: 16
}
}
}
}
}, o.series),
o.firstSeries || ''
]
}
myEchart.setOption(option)
}
}
}
</script>
src/components/marketEchart/geo.js
+2561
View File
File diff suppressed because it is too large Load Diff
src/components/marketEchart/map.vue
+225
View File
@@ -0,0 +1,225 @@
<template>
<div ref="usermap" class="full-size"></div>
</template>
<script>
import map from './geo'
import echarts from 'echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/geo'
import 'echarts/map/js/china'
export default {
props: {
mapdata: { type: Array, default: () => [] }
},
data() {
return {
seriesData: {
seriesData: [{ name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false }}}}],
minMaxData: {
min: 0,
max: 1000
}
}
}
},
watch: {
mapdata: {
handler(newVal) {
if (newVal.length !== 0) {
this.seriesData = map.getCityGeo(newVal)
console.log(newVal, 1212)
} else {
this.seriesData = {
seriesData: [],
minMaxData: { min: 0, max: 0 }
}
}
this.userMap()
},
deep: true
}
},
mounted() {
this.userMap()
},
methods: {
userMap() {
// const mychart = this.$echarts.init(document.getElementById('user-map'));
const mychart = echarts.init(this.$refs.usermap)
// const d = this.seriesData
const d = map.getCityGeo(this.mapdata)
// const fontColor = '#bbb';
// const visualMapColor = ['#ff0030', '#fe00f5', '#fbff04', '#48fe00', '#02fffe'];
const option = {
// title: {
// left: '5%',
// top: '6%',
// text: '登录情况分布',
// textStyle: {
// color: '#fff',
// fontSize: '18',
// fontWeight: '400'
// }
// },
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
tooltip: {
trigger: 'item',
formatter: (params) => {
let value = params.value
if (value instanceof Array) value = params.value[2]
return `${params.name}总登录次数: ${value}次`
},
extraCssText: 'width:150px;height:30px;'
},
// legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: ['访问次数'],
// textStyle: {
// color: '#FFFFFF'
// }
// },
visualMap: [
// {
// show: false,
// min: this.seriesData.minMaxData.min,
// max: this.seriesData.minMaxData.max,
// color: visualMapColor,
// dimension: 0,
// seriesIndex: 2
// },
{
// min: this.seriesData.minMaxData.min,
// max: this.seriesData.minMaxData.max,
// text: ['高', '低'],
// calculable: true,
// itemWidth: 10,
// itemHeight: 100,
// color: visualMapColor,
// textStyle: {
// color: fontColor
// },
// itemSymbol: 'circle',
// seriesIndex: [0, 1]
min: d.minMaxData.min,
max: d.minMaxData.max,
calculable: true,
type: 'piecewise',
itemWidth: 8,
itemHeight: 8,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff',
fontSize: 10
},
orient: 'horizontal',
left: '50%',
itemGap: 5,
textGap: 5,
seriesIndex: [0, 1],
formatter(a, b) {
const fn = function (v) {
if (v > 999) {
return `${(v / 1000).toFixed(1)}k`
}
if (v > 9 && v < 1000) {
return Math.floor(v / 10) * 10
}
return parseInt(v, 0)
}
return fn(b)
}
}],
geo: [{
map: 'china',
roam: true,
scaleLimit: { min: 1, max: 3 },
z: 1,
zoom: 1,
label: {
emphasis: {
show: false
}
},
// right: '40%',
// left: '5%',
// top: '10%',
// bottom: '10%',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderWidth: 1,
shadowBlur: 8,
shadowColor: 'rgba(0, 0, 0, 0.3)',
areaColor: '#0040b6', // '#0E0930'
borderColor: '#84a3dd'
},
emphasis: {
show: true,
// areaColor: '#3369D9',
// opacity: 0.2
itemStyle: {
areaColor: '#034fdb'
}
}
}
],
grid: {
right: '40%'
// top: 100,
// bottom: 40,
// width: '28%'
},
series: [
{
name: '访问次数',
type: 'scatter',
coordinateSystem: 'geo',
data: d.seriesData,
// symbolSize: (val) => {
// return Math.max(val[2] / 200, 8);
// },
symbolSize: 10,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'rgba(7,58,249,1)'
}
}
}
]
}
mychart.setOption(option, true)
window.addEventListener('resize', () => { mychart.resize() })
}
}
}
</script>
src/components/marketEchart/pie.vue
+110
View File
@@ -0,0 +1,110 @@
<template>
<div class="full-size">
<div
ref="myEchart"
class="full-size"
></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
chartData: {
type: Object,
default: () => {}
}
},
data () {
return {
}
},
watch: {
chartData: {
deep: true,
handler (newVal) {
this.chartData = newVal
this.draw()
}
}
},
mounted () {
this.draw()
},
methods: {
draw () {
const myEchart = echarts.init(this.$refs.myEchart, 'light')
const o = this.chartData
const data = o.series.data
let sum = 0
const obj = {}
data.forEach(item => {
obj[item.name] = item.value
sum += item.value
})
const option = {
color: ['#3AA0FF', '#35CACA', '#4FCB74', '#FAD337', '#F1627B', '#965DE4'],
legend: {
orient: 'vertical',
y: 'center',
left: '52%',
formatter(name) {
const text = Number(obj[name]) === 0 ? '0' : `${(parseFloat(obj[name] / sum) * 100).toFixed(2)}%`
return '{b|' + name + '} ' + '{a|' + text + '}' + `¥${obj[name]}`
},
itemGap: 25,
textStyle: {
rich: {
b: {
align: 'left',
fontSize: 16,
width: 120
},
a: {
align: 'left',
fontSize: 16,
width: 100
}
},
fontSize: 16,
color: '#666666',
textAlign: 'right'
}
},
series: [
Object.assign({}, {
type: 'pie',
radius: ['45%', '60%'],
center: ['26%', '55%'],
label: {
normal: {
show: false,
formatter: function (p) {
const t = o.lineBreak ? '\n' : ' '
return `{a|${p.name + t}}{b|${p.value + o.unit} ${p.percent}%}`
},
rich: {
a: {
color: '#fff',
fontSize: 16
},
b: {
color: '#A4B5DA',
fontSize: 16
}
}
}
}
}, o.series),
o.firstSeries || ''
]
}
myEchart.setOption(option)
}
}
}
</script>