Skip to content

B
big-screen-all
Commit 3b54ae4b by T
Options

页面及组件调整优化

parent 28bc4a8d
正在显示 包含 4649 行增加 和 69 行删除
public/index.html
......@@ -24,7 +24,7 @@
<script>
window._CONFIG = {};
window._CONFIG['domianURL'] = 'http://192.168.3.188:5000';
window._CONFIG['mainURL'] = 'http://192.168.2.246:100';
window._CONFIG['mainURL'] = 'http://192.168.2.246:99';
//现场-all
// window._CONFIG['domianURL'] = 'http://41.190.20.132:5000';
......
src/components/JunmpJYZB/cakeLinkage copy.vue 0 → 100644
<!--
描述: 柱饼组合联动
作者: Jack Chen
日期: 2020-04-30
-->
<template>
<div class="cakeLinkage-container">
<div class="chartsdom" id="chart_bp"></div>
</div>
</template>
<script>
import '@/assets/js/flexible'
export default {
name: "zbcakeLinkage",
data() {
return {
option: null,
dataMap: {},
timeLineList: [],
dataList: [],
options: [],
itemStyleList: [
{ color: '#BDE527' },
{ color: '#6027E5' },
{ color: '#27B8E5' },
{ color: '#27e575' },
{ color: '#d6d638' },
{ color: '#00c86c' },
{ color: '#07d8ff' },
{ color: '#0c71cf' },
{ color: '#ADD8E6' },
],
findObj: {},
}
},
props: {
findCode: {
type: String,
required: true
}
},
mounted() {
this.initPie();
setInterval(() => {
this.initPie();
}, 1000 * 60 * 3)
},
methods: {
initPie() {
axios.post(window._CONFIG['domianURL'] + '/api/View/GetAreaType', {findCode: this.findCode}).then(res => {
if (res.data.code == '10000') {
this.timeLineList = res.data.data.data.filter(i => i.orgCode != null).map(i => i.orgName)
//数据处理
// a
let a = [
'指挥信通装备','刑事技术装备', '侦查技术装备','武器警械','防护装备','警用车辆及船艇','反恐救援装备','警用航空装备','其他装备'
];
let b = res.data.data.pList
// 比较两个数组
let diffArray = a.filter((item) => !b.includes(item));
if (diffArray.length > 0) {
// 如果 b 数组中有不在 a 数组中的元素，则将 a 中多余的元素添加到 b 数组中
b.push(...diffArray);
}
//重新排序处理
b.sort((item1, item2) => {
const order = {
'指挥信通装备': 0,
'刑事技术装备': 1,
'侦查技术装备': 2,
'武器警械': 3,
'防护装备': 4,
'警用车辆及船艇': 5,
'反恐救援装备': 6,
'警用航空装备': 7,
'其他装备': 8
};
return order[item1] - order[item2];
});
// console.log(b);
this.pList = b
//this.pList = res.data.data.pList
this.dataList = res.data.data.data.filter(i => i.orgCode != null)
this.getEchart();
}
})
},
getEchart() {
let myChart = echarts.init(document.getElementById('chart_bp'));
for(var i of this.dataList) {
this.findObj[i.orgName] = {}
for (var j=0;j<this.pList.length;j++) {
this.findObj[i.orgName][this.pList[j]] = i.children.filter(i => i.name == this.pList[j]).length > 0 ? i.children.filter(i => i.name == this.pList[j]).map(x => x.zsCount)[0] : 0
}
}
for (var j=0;j<this.timeLineList.length;j++) {
var arr = []
for (var i=0;i<this.pList.length;i++) {
var obj1 = {}
obj1.name = this.pList[i] // 饼图的装备类型
obj1.value = this.findObj[this.timeLineList[j]][this.pList[i]] //对应类型的值
obj1.itemStyle = this.itemStyleList[i] //样式
//if(obj1.value !==0){
arr.push(obj1)
//}
}
//console.log(obj1)
var obj = {}
obj.series = [
{ data: [] },
{ data: [] }
]
//柱形图
obj.series[0].data=arr
//柱形图标记
obj.series[0].markPoint = {
symbol: 'pin',
itemStyle: {
normal: {
color: '#eb9b44',
shadowColor: '#eb9b44',
shadowBlur: 15
}
},
data: arr.map((item, index) => {
return { coord: [index, item.value], value: item.value };
})
}
//右侧拼图
obj.series[1].data=arr.filter(item => item.value !== 0);
this.options.push(obj)
}
console.log(this.findCode)
//判断为宁波市局时底部机构不按奇偶数一上一下显示
// if(this.findCode==='3302'){
// this.option = {
// baseOption: {
// //最底各机构
// timeline: {
// axisType: 'category',
// autoPlay: true,
// playInterval: 4000,
// data: this.timeLineList,
// //底部机构按奇数一上一下显示
// // data: this.timeLineList.map((i,index) => {
// // if(index%2) {
// // return '\n' + i
// // } else {
// // return i
// // }
// // }),
// //轮播线的样式
// lineStyle: {
// color: '#179bf1'
// },
// left: 30,
// right: 30,
// label: {
// interval: 0,//设置横坐标为斜
// color: '#00aeef',//机构名称显示颜色
// rotate: 0, //倾斜显示
// textStyle: {
// //align: 'right', //右对齐
// lineHeight: 10 //设置行高为30
// }
// },
// //当前轮播点
// checkpointStyle: {
// color: '#01d8ff',
// symbolSize: 10,
// borderColor: 'rgba(1, 216, 255, 0.5)',
// borderWidth: 5,
// },
// controlStyle: {
// showPlayBtn: false,
// borderColor: '#01bde6',
// itemGap: 20 ,
// },
// itemStyle: {
// // color: '#004b85',
// borderColor: '#004b85',
// borderWidth: 1,
// shadowColor: 'rgba(1, 216, 225, 0.5)',
// shadowBlur: 5
// },
// //鼠标放上（不为当前轮播的点）去后的样式
// emphasis: {
// label: {
// color: '#01d8ff',
// show: false
// },
// checkpointStyle: {
// color: '#01d8ff',
// borderColor: 'rgba(1, 216, 255, 0.5)',
// borderWidth: 5,
// },
// controlStyle: {
// borderColor: 'rgba(1, 216, 255, 0.5)'
// },
// itemStyle: {
// color: '#01d8ff',
// borderColor: 'rgba(1, 216, 225, 0.5)',
// borderWidth: 5
// }
// }
// },
// //鼠标放上去汽包显示当前机构的样式
// tooltip: {
// trigger: 'item',
// },
// //统计坐标的宽
// grid: {
// bottom: '20%',
// right: "32%"
// },
// calculable: true,
// xAxis: [{
// type: 'category',
// data: this.pList,
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#00aeef',
// }
// },
// }],
// yAxis: [{
// // min: 0,
// // max: 1500,
// // interval: 500,
// type: 'value',
// minInterval: 1,
// name: '装备总数（件）',
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#00aeef'
// }
// },
// }],
// series: [{
// name: '装备类型',
// type: 'bar',
// barMaxWidth: 15,
// center: ['20%', '65%'],
// seriesLayoutBy: 'row',
// // label: {
// // show: true,
// // position: 'top',
// // fontWeight: 'bold'
// // },
// },{
// name: '装备类型',
// type: 'pie',
// tooltip: {
// trigger: 'item'
// },
// center: ['76%', '28%'],
// radius: '30%',
// z: 100,
// }]
// },
// options: this.options
// }
// }else{
this.option = {
baseOption: {
//最底各机构
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 4000,
//data: this.timeLineList,
//底部机构按奇数一上一下显示
data: this.timeLineList.map((i,index) => {
if(index%2) {
return '\n' + i
} else {
return i
}
}),
//轮播线的样式
lineStyle: {
color: '#179bf1'
},
left: 30,
right: 30,
label: {
interval: 0,//设置横坐标为斜
color: '#00aeef',//机构名称显示颜色
rotate: 0, //倾斜显示
textStyle: {
//align: 'right', //右对齐
lineHeight: 10 //设置行高为30
}
},
//当前轮播点
checkpointStyle: {
color: '#01d8ff',
symbolSize: 10,
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
controlStyle: {
showPlayBtn: false,
borderColor: '#01bde6',
itemGap: 20 ,
},
itemStyle: {
// color: '#004b85',
borderColor: '#004b85',
borderWidth: 1,
shadowColor: 'rgba(1, 216, 225, 0.5)',
shadowBlur: 5
},
//鼠标放上（不为当前轮播的点）去后的样式
emphasis: {
label: {
color: '#01d8ff',
show: false
},
checkpointStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
controlStyle: {
borderColor: 'rgba(1, 216, 255, 0.5)'
},
itemStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 225, 0.5)',
borderWidth: 5
}
}
},
//鼠标放上去汽包显示当前机构的样式
tooltip: {
trigger: 'item',
},
//统计坐标的宽
grid: {
bottom: '20%',
right: "32%"
},
calculable: true,
xAxis: [{
type: 'category',
data: this.pList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#00aeef',
}
},
}],
yAxis: [{
// min: 0,
// max: 1500,
// interval: 500,
type: 'value',
minInterval: 1,
name: '装备总数（件）',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#00aeef'
}
},
}],
series: [{
name: '装备类型',
type: 'bar',
barMaxWidth: 15,
center: ['20%', '65%'],
seriesLayoutBy: 'row',
// label: {
// show: true,
// position: 'top',
// fontWeight: 'bold'
// },
},{
name: '装备类型',
type: 'pie',
tooltip: {
trigger: 'item'
},
center: ['76%', '28%'],
radius: '30%',
z: 100,
}]
},
options: this.options
}
// }
myChart.setOption(this.option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
}
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.cakeLinkage-container {
.chartsdom {
height: 3.68rem;
}
}
</style>
src/components/JunmpJYZB/cakeLinkage.vue
......@@ -22,12 +22,15 @@ export default {
dataList: [],
options: [],
itemStyleList: [
{ color: '#BDE527' },
{ color: '#6027E5' },
{ color: '#27B8E5' },
{ color: '#27e575' },
{ color: '#d6d638' },
{ color: '#00c86c' },
{ color: '#07d8ff' },
{ color: '#0c71cf' },
{ color: '#ADD8E6' },
{ color: '#F0E68C' }
],
findObj: {},
}
......@@ -49,13 +52,44 @@ export default {
axios.post(window._CONFIG['domianURL'] + '/api/View/GetAreaType', {findCode: this.findCode}).then(res => {
if (res.data.code == '10000') {
this.timeLineList = res.data.data.data.filter(i => i.orgCode != null).map(i => i.orgName)
this.pList = res.data.data.pList
//数据处理
// a
let a = [
'指挥信通装备','刑事技术装备', '侦查技术装备','武器警械','防护装备','警用车辆及船艇','反恐救援装备','警用航空装备','其他装备'
];
let b = res.data.data.pList
// 比较两个数组
let diffArray = a.filter((item) => !b.includes(item));
if (diffArray.length > 0) {
// 如果 b 数组中有不在 a 数组中的元素，则将 a 中多余的元素添加到 b 数组中
b.push(...diffArray);
}
//重新排序处理
b.sort((item1, item2) => {
const order = {
'指挥信通装备': 0,
'刑事技术装备': 1,
'侦查技术装备': 2,
'武器警械': 3,
'防护装备': 4,
'警用车辆及船艇': 5,
'反恐救援装备': 6,
'警用航空装备': 7,
'其他装备': 8
};
return order[item1] - order[item2];
});
// console.log(b);
this.pList = b
//this.pList = res.data.data.pList
this.dataList = res.data.data.data.filter(i => i.orgCode != null)
this.getEchart();
}
})
},
getEchart() {
let myChart = echarts.init(document.getElementById('chart_bp'));
for(var i of this.dataList) {
......@@ -68,37 +102,234 @@ export default {
var arr = []
for (var i=0;i<this.pList.length;i++) {
var obj1 = {}
obj1.name = this.pList[i] // 装备类型
obj1.value = this.findObj[this.timeLineList[j]][this.pList[i]]
obj1.itemStyle = this.itemStyleList[i]
obj1.name = this.pList[i] // 饼图的装备类型
obj1.value = this.findObj[this.timeLineList[j]][this.pList[i]] //对应类型的值
obj1.itemStyle = this.itemStyleList[i] //样式
//if(obj1.value !==0){
arr.push(obj1)
}
//}
}
//console.log(obj1)
var obj = {}
obj.series = [
{ data: [] },
{ data: [] }
]
//柱形图
obj.series[0].data=arr
obj.series[1].data=arr
//柱形图标记
obj.series[0].markPoint = {
symbol: 'pin',
itemStyle: {
normal: {
color: '#eb9b44',
shadowColor: '#eb9b44',
shadowBlur: 15
}
},
data: arr.map((item, index) => {
return { coord: [index, item.value], value: item.value };
})
}
//右侧拼图
obj.series[1].data=arr.filter(item => item.value !== 0);
obj.series[1].left = '48%'
obj.series[1].top = '12%'
obj.series[1].radius= '55%'
this.options.push(obj)
}
//console.log(this.findCode)
//判断为宁波市局时底部机构不按奇偶数一上一下显示
// if(this.findCode==='3302'){
// this.option = {
// baseOption: {
// //最底各机构
// timeline: {
// axisType: 'category',
// autoPlay: true,
// playInterval: 4000,
// data: this.timeLineList,
// //底部机构按奇数一上一下显示
// // data: this.timeLineList.map((i,index) => {
// // if(index%2) {
// // return '\n' + i
// // } else {
// // return i
// // }
// // }),
// //轮播线的样式
// lineStyle: {
// color: '#179bf1'
// },
// left: 30,
// right: 30,
// label: {
// interval: 0,//设置横坐标为斜
// color: '#00aeef',//机构名称显示颜色
// rotate: 0, //倾斜显示
// textStyle: {
// //align: 'right', //右对齐
// lineHeight: 10 //设置行高为30
// }
// },
// //当前轮播点
// checkpointStyle: {
// color: '#01d8ff',
// symbolSize: 10,
// borderColor: 'rgba(1, 216, 255, 0.5)',
// borderWidth: 5,
// },
// controlStyle: {
// showPlayBtn: false,
// borderColor: '#01bde6',
// itemGap: 20 ,
// },
// itemStyle: {
// // color: '#004b85',
// borderColor: '#004b85',
// borderWidth: 1,
// shadowColor: 'rgba(1, 216, 225, 0.5)',
// shadowBlur: 5
// },
// //鼠标放上（不为当前轮播的点）去后的样式
// emphasis: {
// label: {
// color: '#01d8ff',
// show: false
// },
// checkpointStyle: {
// color: '#01d8ff',
// borderColor: 'rgba(1, 216, 255, 0.5)',
// borderWidth: 5,
// },
// controlStyle: {
// borderColor: 'rgba(1, 216, 255, 0.5)'
// },
// itemStyle: {
// color: '#01d8ff',
// borderColor: 'rgba(1, 216, 225, 0.5)',
// borderWidth: 5
// }
// }
// },
// //鼠标放上去汽包显示当前机构的样式
// tooltip: {
// trigger: 'item',
// },
// //统计坐标的宽
// grid: {
// bottom: '20%',
// right: "32%"
// },
// calculable: true,
// xAxis: [{
// type: 'category',
// data: this.pList,
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#00aeef',
// }
// },
// }],
// yAxis: [{
// // min: 0,
// // max: 1500,
// // interval: 500,
// type: 'value',
// minInterval: 1,
// name: '装备总数（件）',
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#00aeef'
// }
// },
// }],
// series: [{
// name: '装备类型',
// type: 'bar',
// barMaxWidth: 15,
// center: ['20%', '65%'],
// seriesLayoutBy: 'row',
// // label: {
// // show: true,
// // position: 'top',
// // fontWeight: 'bold'
// // },
// },{
// name: '装备类型',
// type: 'pie',
// tooltip: {
// trigger: 'item'
// },
// center: ['76%', '28%'],
// radius: '30%',
// z: 100,
// }]
// },
// options: this.options
// }
// }else{
this.option = {
baseOption: {
//最底各机构
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 4000,
data: this.timeLineList,
//data: this.timeLineList,
//底部机构按奇数一上一下显示
data: this.timeLineList.map((i,index) => {
if(index%2) {
return '\n' + i
} else {
return i
}
}),
//轮播线的样式
lineStyle: {
color: '#179bf1'
},
left: 30,
right: 30,
label: {
color: '#00aeef'
interval: 0,//设置横坐标为斜
color: '#00aeef',//机构名称显示颜色
rotate: 0, //倾斜显示
textStyle: {
//align: 'right', //右对齐
lineHeight: 10 //设置行高为30
}
},
//当前轮播点
checkpointStyle: {
color: '#01d8ff',
symbolSize: 10,
......@@ -108,7 +339,7 @@ export default {
controlStyle: {
showPlayBtn: false,
borderColor: '#01bde6',
itemGap: 20
itemGap: 20 ,
},
itemStyle: {
// color: '#004b85',
......@@ -117,6 +348,7 @@ export default {
shadowColor: 'rgba(1, 216, 225, 0.5)',
shadowBlur: 5
},
//鼠标放上（不为当前轮播的点）去后的样式
emphasis: {
label: {
color: '#01d8ff',
......@@ -137,12 +369,14 @@ export default {
}
}
},
//鼠标放上去汽包显示当前机构的样式
tooltip: {
trigger: 'item',
},
//统计坐标的宽
grid: {
bottom: '20%',
right: "42%"
right: "32%"
},
calculable: true,
xAxis: [{
......@@ -162,6 +396,9 @@ export default {
},
}],
yAxis: [{
// min: 0,
// max: 1500,
// interval: 500,
type: 'value',
minInterval: 1,
name: '装备总数（件）',
......@@ -174,7 +411,7 @@ export default {
axisLine: {
show: true,
lineStyle: {
color: '#2867a8'
color: '#00aeef'
}
},
}],
......@@ -184,24 +421,15 @@ export default {
barMaxWidth: 15,
center: ['20%', '65%'],
seriesLayoutBy: 'row',
markPoint: {
symbol: 'pin',
itemStyle: {
normal: {
color: '#eb9b44',
shadowColor: '#eb9b44',
shadowBlur: 15
}
},
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
// label: {
// show: true,
// position: 'top'
// position: 'top',
// fontWeight: 'bold'
// },
},{
name: '装备类型',
type: 'pie',
......@@ -210,12 +438,15 @@ export default {
},
center: ['76%', '28%'],
radius: '30%',
z: 100
z: 100,
}]
},
options: this.options
}
//}
myChart.setOption(this.option, true);
window.addEventListener('resize', () => {
myChart.resize();
......
src/components/JunmpJYZB/cakeLinkage1.vue 0 → 100644
<!--
描述: 柱饼组合联动
作者: Jack Chen
日期: 2020-04-30
-->
<template>
<div class="cakeLinkage-container">
<div class="chartsdom" id="chart_bp"></div>
</div>
</template>
<script>
import '@/assets/js/flexible'
export default {
name: "zbcakeLinkage",
data() {
return {
option: null,
dataMap: {},
timeLineList: [],
dataList: [],
options: [],
itemStyleList: [
{ color: '#BDE527' },
{ color: '#6027E5' },
{ color: '#27B8E5' },
{ color: '#27e575' },
{ color: '#d6d638' },
{ color: '#00c86c' },
{ color: '#07d8ff' },
{ color: '#0c71cf' },
{ color: '#ADD8E6' },
],
findObj: {},
}
},
props: {
findCode: {
type: String,
required: true
}
},
mounted() {
this.initPie();
setInterval(() => {
this.initPie();
}, 1000 * 60 * 3)
},
methods: {
initPie() {
axios.post(window._CONFIG['domianURL'] + '/api/View/GetAreaType', {findCode: this.findCode}).then(res => {
if (res.data.code == '10000') {
this.timeLineList = res.data.data.data.filter(i => i.orgCode != null).map(i => i.orgName)
//数据处理
//挖坑 a
let a = [
'指挥信通装备','刑事技术装备', '侦查技术装备','武器警械','防护装备','警用车辆及船艇','反恐救援装备','警用航空装备','其他装备'
];
let b = res.data.data.pList
// 比较两个数组
let diffArray = a.filter((item) => !b.includes(item));
if (diffArray.length > 0) {
// 如果 b 数组中有不在 a 数组中的元素，则将 a 中多余的元素添加到 b 数组中
b.push(...diffArray);
}
//重新排序处理
b.sort((item1, item2) => {
const order = {
'指挥信通装备': 0,
'刑事技术装备': 1,
'侦查技术装备': 2,
'武器警械': 3,
'防护装备': 4,
'警用车辆及船艇': 5,
'反恐救援装备': 6,
'警用航空装备': 7,
'其他装备': 8
};
return order[item1] - order[item2];
});
// console.log(b);
this.pList = b
//this.pList = res.data.data.pList
this.dataList = res.data.data.data.filter(i => i.orgCode != null)
this.getEchart();
}
})
},
getEchart() {
let myChart = echarts.init(document.getElementById('chart_bp'));
for(var i of this.dataList) {
this.findObj[i.orgName] = {}
for (var j=0;j<this.pList.length;j++) {
this.findObj[i.orgName][this.pList[j]] = i.children.filter(i => i.name == this.pList[j]).length > 0 ? i.children.filter(i => i.name == this.pList[j]).map(x => x.zsCount)[0] : 0
}
}
for (var j=0;j<this.timeLineList.length;j++) {
var arr = []
for (var i=0;i<this.pList.length;i++) {
var obj1 = {}
obj1.name = this.pList[i] // 饼图的装备类型
obj1.value = this.findObj[this.timeLineList[j]][this.pList[i]] //柱形图
obj1.itemStyle = this.itemStyleList[i] //样式
arr.push(obj1)
}
//console.log(obj1)
var obj = {}
obj.series = [
{ data: [] },
{ data: [] }
]
//柱形图
obj.series[0].data=arr
//右侧拼图
obj.series[1].data=arr
//console.log(obj.series)
this.options.push(obj)
}
console.log()
this.option = {
baseOption: {
//最底各机构
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 4000,
//data: this.timeLineList,
data: this.timeLineList.map((i,index) => {
if(index%2) {
return '\n' + i
} else {
return i
}
}),
//轮播线的样式
lineStyle: {
color: '#179bf1'
},
left: 30,
right: 30,
label: {
interval: 0,//设置横坐标为斜
color: '#00aeef',//机构名称显示颜色
rotate: 0, //倾斜显示
textStyle: {
//align: 'right', //右对齐
lineHeight: 10 //设置行高为30
}
},
// label: {
// show: true,
// position: 'bottom',
// color: '#00aeef', //机构名称显示颜色
// //rotate: -15, //倾斜显示
// formatter: function(params) {
// return params.seriesName + '\n' + (params.dataIndex % 2 === 0 ? '{left|' + params.value + '}' : '{right|' + params.value + '}')
// },
// rich: {
// left: {
// color: '#000',
// lineHeight: 20
// },
// right: {
// color: '#000',
// lineHeight: 20
// }
// },
// textStyle: {
// align: 'center',
// fontSize: 12
// }
// },
//当前轮播点
checkpointStyle: {
color: '#01d8ff',
symbolSize: 10,
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
controlStyle: {
showPlayBtn: false,
borderColor: '#01bde6',
itemGap: 20 ,
},
itemStyle: {
// color: '#004b85',
borderColor: '#004b85',
borderWidth: 1,
shadowColor: 'rgba(1, 216, 225, 0.5)',
shadowBlur: 5
},
//鼠标放上（不为当前轮播的点）去后的样式
emphasis: {
label: {
color: '#01d8ff',
show: false
},
checkpointStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
controlStyle: {
borderColor: 'rgba(1, 216, 255, 0.5)'
},
itemStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 225, 0.5)',
borderWidth: 5
}
}
},
//鼠标放上去汽包显示当前机构的样式
tooltip: {
trigger: 'item',
},
//统计坐标的宽
grid: {
bottom: '20%',
right: "32%"
},
calculable: true,
xAxis: [{
type: 'category',
data: this.pList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#00aeef',
}
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
name: '装备总数（件）',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#2867a8'
}
},
}],
series: [{
name: '装备类型',
type: 'bar',
barMaxWidth: 15,
center: ['20%', '65%'],
seriesLayoutBy: 'row',
markPoint: {
symbol: 'pin',
itemStyle: {
normal: {
color: '#eb9b44',
shadowColor: '#eb9b44',
shadowBlur: 15
}
},
data: [
// {type: 'max', name: '最大值'},
// {type: 'min', name: '最小值'}
]
},
label: {
show: true,
position: 'top',
fontWeight: 'bold'
},
},{
name: '装备类型',
type: 'pie',
tooltip: {
trigger: 'item'
},
center: ['76%', '28%'],
radius: '30%',
z: 100
}]
},
options: this.options
}
myChart.setOption(this.option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
}
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.cakeLinkage-container {
.chartsdom {
height: 3.68rem;
}
}
</style>
src/components/JunmpJYZB/distribution.vue
......@@ -111,11 +111,12 @@ export default {
type: 'pie',
radius: ['6%', '10%'],
hoverAnimation: false,
//装备类型连接拼图的虚线
labelLine: {
normal: {
show: true,
length: 30,
length2: 50
length: 15,
length2: 20
},
emphasis: {
show: true
......@@ -168,7 +169,7 @@ export default {
label: {
normal: {
show: true,
formatter: '{b}',
formatter: '{b}: {c}',
textStyle: {
fontSize: 12,
},
......@@ -182,7 +183,7 @@ export default {
normal: {
show: true,
length: 15,
length2: 50,
length2: 20,
lineStyle: {
type: 'dotted'
}
......
src/components/JunmpJYZB/distribution1.vue 0 → 100644
<!--
描述: 饼图
作者: huangqy
日期: 2021-01-25
-->
<template>
<div class="distribution-container" style="margin-top: 12px">
<div class="chart" id="chart_right2"></div>
</div>
</template>
<script>
import '@/assets/js/flexible'
export default {
name: "zbdistribution",
data() {
return {
data: []
}
},
props: {
findCode: {
type: String,
required: true
},
level: {
type: String
}
},
watch: {
level(newV,oldV) {
this.initPie()
}
},
mounted() {
this.initPie();
setInterval(() => {
this.initPie();
}, 1000 * 60 * 3)
},
methods: {
initPie() {
axios.post(window._CONFIG['domianURL'] +'/api/View/GetGroupByCount', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
//数据处理
//挖坑 a
let a = [
{ name: '指挥信通装备', value: 0 },
{ name: '刑事技术装备', value: 0 },
{ name: '侦查技术装备', value: 0 },
{ name: '武器警械', value: 0 },
{ name: '防护装备', value: 0 },
{ name: '警用车辆及船艇', value: 0 },
{ name: '反恐救援装备', value: 0 },
{ name: '警用航空装备', value: 0 },
{ name: '其他装备', value: 0 },
];
let b = res.data.data
// 比较两个数组,并去填坑b
if (a.length === b.length) {
a.forEach((itemA) => {
const itemB = b.find((item) => item.name === itemA.name);
if (itemB) {
// 如果 a 数组和 b 数组中都存在相同 name 的元素，则将 a 中对应的 age 赋值给 b
itemB.value = itemA.value;
} else {
// 如果在 b 数组中没有找到相同 name 的元素，则将 a 中对应的元素添加到 b 数组中
b.push(itemA);
}
});
} else if (a.length > b.length) {
// 如果 a 数组的长度大于 b 数组的长度，则将 a 数组中多出的元素添加到 b 数组中
const diffArray = a.filter((itemA) => !b.find((itemB) => itemB.name === itemA.name));
b.push(...diffArray);
}
//console.log(b);
this.data = b.filter(i => i.value > 0).reverse()
//this.data = res.data.data
this.getEchartRight2()
}
})
},
getEchartRight2() {
const _this = this
let myChart = echarts.init(document.getElementById('chart_right2'));
let option = {
color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
polar: {},
angleAxis: {
interval: 1,
type: 'category',
data: [],
z: 10,
axisLine: {
show: true,
lineStyle: {
color: '#0B4A6B',
width: 5,
type: 'solid'
},
},
axisLabel: {
interval: 0,
show: true,
color: '#0B4A6B',
margin: 8,
fontSize: 16
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: true,
lineStyle: {
color: '#0B3E5E',
width: 1,
type: 'solid'
},
},
axisLabel: {
formatter: '{value} %',
show: true,
padding: [0, 0, 20, 0],
color: '#0B3E5E',
fontSize: 16
},
splitLine: {
lineStyle: {
color: '#0B3E5E',
width: 2,
type: "solid"
}
}
},
calculable: true,
series: [{
type: 'pie',
radius: ['6%', '10%'],
hoverAnimation: false,
labelLine: {
normal: {
show: true,
length: 30,
length2: 50
},
emphasis: {
show: true
}
},
tooltip: {
show: true
},
data: [{
name: '',
value: 0,
itemStyle: {
normal: {
color: '#0B4A6B'
}
}
}]
}, {
type: 'pie',
radius: ['90%', '95%'],
hoverAnimation: false,
labelLine: {
normal: {
show: true,
length: 30,
length2: 50
},
emphasis: {
show: true
}
},
tooltip: {
show: true
},
data: [{
name: '',
value: 0,
itemStyle: {
normal: {
color: '#0B4A6B'
}
}
}]
},{
stack: 'a',
type: 'pie',
radius: ['20%', '80%'],
roseType: 'area',
zlevel: 10,
label: {
normal: {
show: true,
formatter: '{b} {c}',
textStyle: {
fontSize: 12,
},
position: 'outside'
},
emphasis: {
show: true
}
},
//装备类型连接拼图的虚线
labelLine: {
normal: {
show: true,
length: 15,
length2: 20,
lineStyle: {
type: 'dotted'
}
},
emphasis: {
show: true
}
},
data: this.data
}]
}
myChart.setOption(option, true);
myChart.on("click", function (params) {
const url = window._CONFIG['mainURL'] + "/#/warehouse/inventoryList?type=在库数量&level=" + _this.level + "&code=" + _this.findCode.padEnd(12, '0') + "&topTypeName="+params.name
window.open(url)
});
window.addEventListener('resize', () => {
myChart.resize();
});
},
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.distribution-container {
.chart {
height: 2.8rem;
}
}
</style>
src/components/JunmpJYZB/distributionStatistics copy.vue 0 → 100644
<!--
描述: 装备分布统计
作者: huangqy
日期: 2021-12-07
-->
<template>
<div class="distribution-statistics" style="margin-top: 12px">
<div class="chart" id="chart_zbfb"></div>
</div>
</template>
<script>
import '@/assets/js/flexible'
export default {
name: "distributionStatistics",
data() {
return {
zsCount: [],
zkCount: [],
orgName: []
}
},
mounted() {
this.initPie();
setInterval(() => {
this.initPie();
}, 1000 * 60 * 3)
},
methods: {
initPie() {
axios.post(window._CONFIG['domianURL'] +'/api/Tj/GetPageOrgTj', {page: 0, size: 20, orgId: "A35F3DB1-80A1-45ED-A458-B7DEA193682G"}).then(res => {
if (res.data.code == '10000') {
const list = res.data.data.content.reverse()
this.zsCount = list.map(i => i.zsCount)
this.zkCount = list.map(i => i.zkCount)
this.orgName = list.map(i => i.orgName)
this.getEchartRight2()
}
})
},
getEchartRight2() {
const _this = this
let myChart = echarts.init(document.getElementById('chart_zbfb'));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
padding: [5, 10, 0, 10],
itemGap: 50,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 16
}
},
grid: {
top: '6%',
left: '4%',
right: '16%',
bottom: '3%',
containLabel: true
},
xAxis: {
show: false // 不显示横坐标
},
yAxis: {
type: 'category',
offset: 15,
boundaryGap: ['20%', '20%'],
data: this.orgName,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '16',
fontWeight: 'bold'
}
},
},
series: [
{
name: "装备总量",
type: "bar",
data: this.zsCount,
barWidth: 16, //柱子宽度
barGap: 0, //柱子之间间距
itemStyle: {
normal: {
label: {
formatter: "{c}"+"件",
show: true,
//数字与柱形图的距离
//position: [245, 0],
position: 'right',
textStyle: {
fontWeight: "bold",
fontSize: "14",
color: "#fff"
}
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fff'
}]),
opacity: 1
}
}
},
{
name: "应急储备",
type: "bar",
data: this.zkCount,
barWidth: 16, //柱子宽度
barGap: 0, //柱子之间间距
itemStyle: {
normal: {
label: {
formatter: "{c}"+"件",
show: true,
//数字与柱形图的距离
//position: [245, 0],
position: 'right',
textStyle: {
fontWeight: "bold",
fontSize: "14",
color: "#FFEB7B"
}
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFEB7B'
}]),
opacity: 1
}
}
},
]
};
myChart.setOption(option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
},
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.distribution-statistics {
.chart {
height: 8rem;
}
}
</style>
src/components/JunmpJYZB/distributionStatistics.vue
......@@ -93,7 +93,9 @@ export default {
label: {
formatter: "{c}"+"件",
show: true,
position: [330, 0],
//数字与柱形图的距离
//position: [245, 0],
position: 'right',
textStyle: {
fontWeight: "bold",
fontSize: "14",
......@@ -119,7 +121,9 @@ export default {
label: {
formatter: "{c}"+"件",
show: true,
position: [330, 0],
//数字与柱形图的距离
//position: [245, 0],
position: 'right',
textStyle: {
fontWeight: "bold",
fontSize: "14",
......
src/components/JunmpJYZB/dynamicList copy.vue 0 → 100644
<!--
描述: 动态列表动画
作者: Jack Chen
日期: 2020-04-18
-->
<template>
<div class="dynamicList-container">
<div class="y-center">
<div class="info-1-0 animated infinite rotateF"></div>
<div class="info-1-1 animated infinite rotateF"></div>
<div class="info-1-2 animated infinite rotate"></div>
<div class="info-1-3 animated infinite rotate"></div>
<div class="info-1-4 animated infinite flashPD"></div>
</div>
<div class="y-number y-number-1 animated fadeInLeft" @click="toInventoryList('在库数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>在库装备</span>
<span id="number1" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='zkCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div>
<div class="y-number y-number-2 animated fadeInLeft" @click="toInventoryList('调拨数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>调拨中</span>
<span id="number2" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='houseCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div>
<div class="y-number y-number-3 animated fadeInLeft" @click="toInventoryList('领用数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotateF"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>使用中</span>
<span id="number3" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='lyCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div>
<div class="y-number y-number-4 animated fadeInLeft" @click="toInventoryList('维修数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotateF"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>维修装备</span>
<span id="number4" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='wxCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div>
<!-- <div class="y-number y-number-4 animated fadeInLeft" @click="toInventoryList('报废数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>报废数量</span>
<span id="number4" class="odometer odometer-theme-digital">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='bfCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div> -->
</div>
</template>
<script>
import countTo from 'vue-count-to'
import '@/assets/js/flexible'
export default {
name: "zbdynamicList",
components: {
countTo
},
data() {
return {
startVal: 0,
zkCount: 0,
lyCount: 0,
wxCount: 0,
bfCount: 0,
houseCount:0
}
},
props: {
findCode: {
type: String,
required: true
},
level: {
type: String
}
},
watch: {
level(newV,oldV) {
this.getCount()
}
},
mounted() {
this.getCount();
setInterval(() => {
this.getCount();
}, 1000 * 60 * 3)
},
methods: {
getCount() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetCount', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
this.zkCount = res.data.data.zkCount
this.lyCount = res.data.data.lyCount
this.wxCount = res.data.data.wxCount
this.bfCount = res.data.data.bfCount
this.houseCount = res.data.data.houseCount
}
})
},
toInventoryList(type) {
const url = window._CONFIG['mainURL'] +"/#/warehouse/inventoryList?type=" + type + '&level='+ this.level +'&code=' + this.findCode.padEnd(12, '0')
window.open(url)
}
}
};
</script>
<style lang="scss" scoped>
.dynamicList-container {
.y-center {
position: absolute;
top: 50px;
left: 30px;
width: 234px;
height: 234px;
> [class^=info-1] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center center;
}
.info-1-0 {
background-image: url(../../assets/img/dynamic/info-1-0.png);
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
}
.info-1-1 {
background-image: url(../../assets/img/dynamic/info-1-1.png);
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.info-1-2 {
background-image: url(../../assets/img/dynamic/info-1-2.png);
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.info-1-3 {
background-image: url(../../assets/img/dynamic/info-1-3.png);
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
animation-delay: 5s;
}
.info-1-4 {
background-image: url(../../assets/img/dynamic/info-1-4.png);
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
}
}
.y-number {
position: absolute;
left: 0;
padding-left: 290px;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
.y-number-bg {
width: 54px;
height: 54px;
position: absolute;
top: 5px;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
}
.y-number-icon {
width: 54px;
height: 54px;
position: absolute;
top: 5px;
}
.y-number-text {
display: inline-block;
color: #0072bc;
font-size: 18px;
padding: 10px 0 0 60px;
> span {
display: block;
&:nth-child(2) {
font-size: 22px;
color: #00aeef;
line-height: 28px;
padding: 0;
background: transparent;
}
}
}
&.y-number-1 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
background: url(../../assets/img/dynamic/info-line-01.png) no-repeat 180px center;
height: 60px;
top: 45px;
.y-number-bg {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
background: url(../../assets/img/dynamic/info-bg-01.png) no-repeat 50% 50%;
}
.y-number-icon {
background: url(../../assets/img/dynamic/info-icon-1.png) no-repeat 50% 50%;
}
}
&.y-number-2 {
-webkit-animation-delay: 1.25s;
-moz-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
animation-delay: 1.25s;
background: url(../../assets/img/dynamic/info-line-02.png) no-repeat 180px center;
height: 60px;
top: 100px;
padding-left: 350px;
.y-number-bg {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s;
background: url(../../assets/img/dynamic/info-bg-02.png) no-repeat 50% 50%;
}
.y-number-icon {
background: url(../../assets/img/dynamic/info-icon-2.png) no-repeat 50% 50%;
}
}
&.y-number-3 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
background: url(../../assets/img/dynamic/info-line-02.png) no-repeat 180px center;
height: 60px;
top: 160px;
padding-left: 350px;
.y-number-bg {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
background: url(../../assets/img/dynamic/info-bg-03.png) no-repeat 50% 50%;
}
.y-number-icon {
background: url(../../assets/img/dynamic/info-icon-3.png) no-repeat 50% 50%;
}
}
&.y-number-4 {
-webkit-animation-delay: 1.75s;
-moz-animation-delay: 1.75s;
-o-animation-delay: 1.75s;
animation-delay: 1.75s;
background: url(../../assets/img/dynamic/info-line-01.png) no-repeat 180px center;
height: 60px;
top: 220px;
.y-number-bg {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
background: url(../../assets/img/dynamic/info-bg-04.png) no-repeat 50% 50%;
}
.y-number-icon {
background: url(../../assets/img/dynamic/info-icon-4.png) no-repeat 50% 50%;
}
}
}
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
0% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotate {
0% {
-webkit-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotate {
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotateF {
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes rotateF {
100% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-o-keyframes rotateF {
100% {
-webkit-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes rotateF {
100% {
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.rotateF {
-webkit-animation-name: rotateF;
-moz-animation-name: rotateF;
-o-animation-name: rotateF;
animation-name: rotateF;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes flashPD {
0%,
90% {
opacity: 1;
}
92%,
98% {
opacity: 0;
}
96%,
100% {
opacity: 1;
}
}
@-moz-keyframes flashPD {
0%,
90% {
opacity: 1;
}
92%,
98% {
opacity: 0;
}
96%,
100% {
opacity: 1;
}
}
@-o-keyframes flashPD {
0%,
90% {
opacity: 1;
}
92%,
98% {
opacity: 0;
}
96%,
100% {
opacity: 1;
}
}
@keyframes flashPD {
0%,
90% {
opacity: 1;
}
92%,
98% {
opacity: 0;
}
96%,
100% {
opacity: 1;
}
}
.flashPD {
-webkit-animation-name: flashPD;
-moz-animation-name: flashPD;
-o-animation-name: flashPD;
animation-name: flashPD;
}
</style>
src/components/JunmpJYZB/dynamicList.vue
......@@ -18,8 +18,8 @@
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>在库总量</span>
<span id="number1" class="odometer odometer-theme-digital">
<span>在库装备</span>
<span id="number1" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
......@@ -38,12 +38,36 @@
</div>
</div>
<div class="y-number y-number-2 animated fadeInLeft" @click="toInventoryList('领用数量')" style="cursor: pointer">
<div class="y-number y-number-2 animated fadeInLeft" @click="toInventoryList('调拨数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>调拨中</span>
<span id="number2" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
<span class="odometer-digit-inner">
<span class="odometer-ribbon">
<span class="odometer-ribbon-inner">
<span class="odometer-value">
<countTo :startVal='startVal' :endVal='houseCount' :duration='6000' separator=""></countTo>
</span>
</span>
</span>
</span>
</span>
</div>
</span>
</div>
</div>
<div class="y-number y-number-3 animated fadeInLeft" @click="toInventoryList('领用数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotateF"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>使用中</span>
<span id="number2" class="odometer odometer-theme-digital">
<span id="number3" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
......@@ -62,12 +86,12 @@
</div>
</div>
<div class="y-number y-number-3 animated fadeInLeft" @click="toInventoryList('维修数量')" style="cursor: pointer">
<div class="y-number y-number-4 animated fadeInLeft" @click="toInventoryList('维修数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotateF"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
<span>维修数量</span>
<span id="number3" class="odometer odometer-theme-digital">
<span>维修装备</span>
<span id="number4" class="odometer odometer-theme-digital" style="font-family: 'SimSun';">
<div class="odometer-inside">
<span class="odometer-digit">
<span class="odometer-digit-spacer">8</span>
......@@ -86,7 +110,7 @@
</div>
</div>
<div class="y-number y-number-4 animated fadeInLeft" @click="toInventoryList('报废数量')" style="cursor: pointer">
<!-- <div class="y-number y-number-4 animated fadeInLeft" @click="toInventoryList('报废数量')" style="cursor: pointer">
<div class="y-number-bg animated infinite rotate"></div>
<div class="y-number-icon"></div>
<div class="y-number-text">
......@@ -108,7 +132,8 @@
</div>
</span>
</div>
</div>
</div> -->
</div>
</template>
......@@ -127,7 +152,8 @@ export default {
zkCount: 0,
lyCount: 0,
wxCount: 0,
bfCount: 0
bfCount: 0,
houseCount:0
}
},
props: {
......@@ -158,6 +184,7 @@ export default {
this.lyCount = res.data.data.lyCount
this.wxCount = res.data.data.wxCount
this.bfCount = res.data.data.bfCount
this.houseCount = res.data.data.houseCount
}
})
},
......
src/components/JunmpJYZB/pyramidTrend copy.vue 0 → 100644
<!--
描述: 金字塔趋势
作者: Jack Chen
日期: 2020-04-18
-->
<template>
<div class="pyramidTrend container">
<div class="chartsdom" id="chart_ptrend"></div>
</div>
</template>
<script>
import '@/assets/js/flexible'
export default {
name: "zbpyramidTrend",
data() {
return {
option: null,
pList: [],
dataType: [],
dataMap: {}
}
},
props: {
findCode: {
type: String,
required: true
},
level: {
type: String
}
},
watch: {
level(newV,oldV) {
this.initPie()
}
},
mounted() {
this.initPie();
setInterval(() => {
this.initPie();
}, 1000 * 60 * 3)
},
methods: {
initPie() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetSyWxBf', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
//数据处理
//this.pList = res.data.data.pList
//this.dataType = res.data.data.dataType
let j = [[0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0]]
let k = res.data.data.dataType
//对比补充到k
for (let i = 0; i < j.length; i++) {
if (k[i].length !== j[i].length) {
let diff = j[i].length - k[i].length;
for (let j = 0; j < diff; j++) {
k[i].push(0);
}
}
}
//对数组K重新排下序
let new_k = k.map(item => {
return [item[7], item[6], item[8], item[5], item[1], item[2], item[0], item[3], item[4]]
});
this.dataType = new_k
//console.log(this.dataType)
//挖坑 a
let a = [
'指挥信通装备','刑事技术装备', '侦查技术装备','武器警械','防护装备','警用车辆及船艇','反恐救援装备','警用航空装备','其他装备'
];
let b = res.data.data.pList
// 比较两个数组
let diffArray = a.filter((item) => !b.includes(item));
if (diffArray.length > 0) {
// 如果 b 数组中有不在 a 数组中的元素，则将 a 中多余的元素添加到 b 数组中
b.push(...diffArray);
}
this.pList = b
//重新排序处理
b.sort((item1, item2) => {
const order = {
'指挥信通装备': 0,
'刑事技术装备': 1,
'侦查技术装备': 2,
'武器警械': 3,
'防护装备': 4,
'警用车辆及船艇': 5,
'反恐救援装备': 6,
'警用航空装备': 7,
'其他装备': 8
};
return order[item1] - order[item2];
});
//console.log(k)
this.getEchart()
}
})
},
dataFormatter(obj) {
let pList = this.pList
let temp;
for (let x = 0; x < 3; x++) {
let max = 0;
let sum = 0;
temp = obj[x];
for (let i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[x][i] = {
name: pList[i],
value: temp[i]
};
}
obj[x + 'max'] = Math.floor(max / 100) * 100;
obj[x + 'sum'] = sum;
}
return obj;
},
getEchart() {
let myChart = echarts.init(document.getElementById('chart_ptrend'));
let itemStyle = {
barBorderRadius: [15, 0],
color: '#0084ff'
}
this.dataMap.dataType = this.dataFormatter(this.dataType);
this.option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 3000,
data: ['使用', '维修', '报废'],
left: 80,
right: 80,
bottom: -5,
lineStyle: {
color: '#179bf1'
},
label: {
color: '#fff'
},
checkpointStyle: {
color: '#01d8ff',
symbolSize: 10,
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
controlStyle: {
show: false,
},
itemStyle: {
borderColor: '#004b85',
borderWidth: 1,
shadowColor: 'rgba(1, 216, 225, 0.5)',
shadowBlur: 5
},
emphasis: {
label: {
color: '#01d8ff',
show: false
},
checkpointStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 255, 0.5)',
borderWidth: 5,
},
itemStyle: {
color: '#01d8ff',
borderColor: 'rgba(1, 216, 225, 0.5)',
borderWidth: 5
}
}
},
calculable: true,
tooltip : {
trigger: 'axis',
//formatter: '{b} : {c}',
axisPointer : {
type : 'shadow'
}
},
grid: {
top: '12%',
bottom: '28%'
},
xAxis: [{
type: 'category',
axisLabel: {
interval: 0,
rotate: 15
},
data: this.pList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#00aeef',
}
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
name: '次数',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#00aeef'
}
}
}],
series: [{
name: '使用',
type: 'bar',
barWidth: 15,
legendHoverLink: true,
label: {
show: true,
position: 'top',
color: '#fff',
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
}]
},
options: [{
series: [{
data: this.dataMap.dataType['0'],
itemStyle: itemStyle
}]
},{
series: [{
data: this.dataMap.dataType['1'],
itemStyle: itemStyle
}]
},{
series: [{
data: this.dataMap.dataType['2'],
itemStyle: itemStyle
}]
}]
}
myChart.setOption(this.option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
}
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.pyramidTrend {
width: 480px;
height: 252px;
.chartsdom {
width: 100%;
height: 100%;
}
}
</style>
src/components/JunmpJYZB/pyramidTrend.vue
......@@ -46,8 +46,55 @@ export default {
initPie() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetSyWxBf', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
this.pList = res.data.data.pList
this.dataType = res.data.data.dataType
//数据处理
//this.pList = res.data.data.pList
//this.dataType = res.data.data.dataType
let j = [[0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0]]
let k = res.data.data.dataType
//对比补充到k
for (let i = 0; i < j.length; i++) {
if (k[i].length !== j[i].length) {
let diff = j[i].length - k[i].length;
for (let j = 0; j < diff; j++) {
k[i].push(0);
}
}
}
//对数组K重新排下序
let new_k = k.map(item => {
return [item[7], item[6], item[8], item[5], item[1], item[2], item[0], item[3], item[4]]
});
this.dataType = new_k
//console.log(this.dataType)
//挖坑 a
let a = [
'指挥信通装备','刑事技术装备', '侦查技术装备','武器警械','防护装备','警用车辆及船艇','反恐救援装备','警用航空装备','其他装备'
];
let b = res.data.data.pList
// 比较两个数组
let diffArray = a.filter((item) => !b.includes(item));
if (diffArray.length > 0) {
// 如果 b 数组中有不在 a 数组中的元素，则将 a 中多余的元素添加到 b 数组中
b.push(...diffArray);
}
this.pList = b
//重新排序处理
b.sort((item1, item2) => {
const order = {
'指挥信通装备': 0,
'刑事技术装备': 1,
'侦查技术装备': 2,
'武器警械': 3,
'防护装备': 4,
'警用车辆及船艇': 5,
'反恐救援装备': 6,
'警用航空装备': 7,
'其他装备': 8
};
return order[item1] - order[item2];
});
//console.log(k)
this.getEchart()
}
})
......@@ -131,20 +178,21 @@ export default {
calculable: true,
tooltip : {
trigger: 'axis',
formatter: '{b} : {c}',
//formatter: '{b} : {c}',
axisPointer : {
type : 'shadow'
}
},
grid: {
top: '12%',
bottom: '28%'
bottom: '30%'
},
xAxis: [{
type: 'category',
axisLabel: {
interval: 0,
rotate: 15
//x轴字体倾斜度
rotate: 20
},
data: this.pList,
splitLine: {
......
src/views/Brand copy.vue 0 → 100644
<template>
<div class="brand-container">
<div class="wrap">
<header>
<div style="cursor:pointer"><h2>{{placeName}}警用装备智能管理平台</h2></div>
<div class="showTime">
<!-- <span class="time" style="cursor:pointer;z-index: 999" @click="changeLevel" v-if="findCode.length > 4">{{ level }}</span> -->
<span class="time">{{ nowTime }}</span>
<span class="date">
<span>{{ week }}</span>
<span>{{ date }}</span>
</span>
</div>
<button class="loginBtn" style="width: 90px;margin-left: 10px;margin-top: -25px;" @click="reback">
返回
</button>
</header>
<section class="mainbox">
<div class="item left">
<div class="double-panel" v-if="findCode == 33">
<distribution-statistics/>
<div class="panel-footer"></div>
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备状态统计</h2>
<zbdynamicList :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备类型统计</h2>
<zbdistribution :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
</div>
<div class="item center">
<div class="resume">
<div class="resume-hd">
<ul>
<li @click="toInventoryList('装备总数')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="zkTopCount" :duration='2000' separator=""></countTo>
</li>
<li @click="toInventoryList('在库数量')" style="cursor: pointer;z-index: 3">
<countTo :startVal='startVal' :endVal="zkCount" :duration='2000' separator=""></countTo>
</li>
<li @click="toInventoryList('领用数量')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="lyCount" :duration='2000' separator=""></countTo>
</li>
</ul>
</div>
<div class="resume-bd">
<ul>
<li>全部装备（单位: 件）</li>
<li>在库装备（单位: 件）</li>
<li>使用中（单位: 件）</li>
</ul>
</div>
</div>
<div class="map" v-if="this.findCode.length < 7">
<div class="chart" id="chart_map"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="extra_map" v-if="this.findCode.length < 5">
<button class="extraBtn" @click="tzbj()">本级</button>
<button class="extraBtn" v-for="(extra, index) in extraList" :key="index" @click="extraClick(extra)">{{ extra.orgName }}</button>
</div>
</div>
<zbseamless :findCode="findCode" :level="level" v-else/>
</div>
<div class="item right">
<div class="panel">
<h2>装备近三十天使用次数Top5</h2>
<zbsinan :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
<div class="panel">
<h2>近三十天使用、维修、报废次数</h2>
<zbpyramidTrend :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
</div>
</section>
<div class="bottom-panel">
<h2>各地区装备总数</h2>
<zbcakeLinkage :findCode="findCode"/>
<div class="bottom-panel-footer"></div>
</div>
</div>
</div>
</template>
<script>
import '@/assets/js/flexible'
import countTo from 'vue-count-to'
import { encrypt, decrypt } from '../utils/rsaEncrypt'
export default {
name: 'Brand',
components: {
countTo
},
data() {
return {
nowTime: '',
week: '',
date: '',
timer: null,
level: '本级及下级',
imgSrc: '',
weatcherData: {},
startVal: 0,
geoCoordMap: {},
code: '',
placeName: '浙江省',
nameList: ['杭州市', '湖州市', '嘉兴市', '金华市', '丽水市', '宁波市', '衢州市', '绍兴市', '台州市', '温州市', '舟山市',
'萧山区', '滨江区', '西湖区', '上城区', '下城区', '江干区', '拱墅区', '余杭区', '临安区', '富阳区', '桐庐县', '淳安区', '建德市',
'安吉县', '长兴县', '德清县', '吴兴区', '南浔区',
'桐乡市', '海宁市', '海盐县', '南湖区', '秀洲区', '平湖市', '嘉善县',
'婺城区', '金东区', '兰溪市', '义乌市', '东阳市', '永康市', '浦江县', '武义县', '磐安县',
'莲都区', '龙泉市', '青田县', '云和县', '景宁畲族自治县', '庆元县', '缙云县', '遂昌县', '松阳县',
'海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '余姚市', '慈溪市', '象山县', '宁海县',
'柯城区', '衢江区', '龙游县', '江山市', '常山县', '开化县',
'越城区', '柯桥区', '上虞区', '新昌县', '嵊州市', '诸暨市',
'椒江区', '黄岩区', '路桥区', '临海市', '温岭市', '玉环市', '天台县', '仙居县', '三门县',
'鹿城区','龙湾区','瓯海区','洞头区','瑞安市','乐清市','龙港市','永嘉县','平阳县','苍南县','文成县','泰顺县',
'定海区', '普陀区', '岱山县', '嵊泗县'
],
splitList: [],
extraList: [],
colorList: [
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6'
],
data: [],
markPointData: [],
dataColor: [],
zkTopCount: 0,
zkCount: 0,
houseCount: 0,
wxCount: 0,
bfCount: 0,
lyCount: 0,
findCode: '',
cityMap: {
"杭州市": "3301",
"宁波市": "3302",
"温州市": "3303",
"嘉兴市": "3304",
"湖州市": "3305",
"绍兴市": "3306",
"金华市": "3307",
"衢州市": "3308",
"舟山市": "3309",
"台州市": "3310",
"丽水市": "3311",
"上城区":"330102",
"拱墅区":"330105",
"西湖区":"330106",
"滨江区":"330108",
"余杭区":"330110",
"萧山区":"330109",
"临平区":"330113",
"钱塘区":"330114",
"桐庐县":"330122",
"淳安县":"330127",
"建德市":"330182",
"富阳区":"330183",
"临安区":"330185",
"海曙区":"330203",
"江北区":"330205",
"北仑区":"330206",
"镇海区":"330211",
"鄞州区":"330212",
"象山县":"330225",
"宁海县":"330226",
"余姚市":"330281",
"慈溪市":"330282",
"奉化区":"330283",
"鹿城区":"330302",
"龙湾区":"330303",
"瓯海区":"330304",
"洞头区":"330305",
"永嘉县":"330324",
"平阳县":"330326",
"苍南县":"330327",
"文成县":"330328",
"泰顺县":"330329",
"瑞安市":"330381",
"乐清市":"330382",
"龙港市":"330383",
"南湖区":"330402",
"秀洲区":"330411",
"嘉善县":"330421",
"海盐县":"330424",
"海宁市":"330481",
"平湖市":"330482",
"桐乡市":"330483",
"吴兴区":"330502",
"南浔区":"330503",
"德清县":"330521",
"长兴县":"330522",
"安吉县":"330523",
"越城区":"330602",
"柯桥区":"330603",
"上虞区":"330604",
"新昌县":"330624",
"诸暨市":"330681",
"嵊州市":"330683",
"婺城区":"330702",
"金东区":"330703",
"武义县":"330723",
"浦江县":"330726",
"磐安县":"330727",
"兰溪市":"330781",
"义乌市":"330782",
"东阳市":"330783",
"永康市":"330784",
"柯城区":"330802",
"衢江区":"330803",
"常山县":"330822",
"开化县":"330824",
"龙游县":"330825",
"江山市":"330881",
"定海区":"330902",
"普陀区":"330903",
"岱山县":"330921",
"嵊泗县":"330922",
"椒江区":"331002",
"黄岩区":"331003",
"路桥区":"331004",
"玉环市":"331021",
"三门县":"331022",
"天台县":"331023",
"仙居县":"331024",
"温岭市":"331081",
"临海市":"331082",
"莲都区":"331102",
"青田县":"331121",
"缙云县":"331122",
"遂昌县":"331123",
"松阳县":"331124",
"云和县":"331125",
"庆元县":"331126",
"景宁畲族自治县":"331127",
"龙泉市":"331181"
},
mapFindByCode: {
"33" : "浙江省",
"3301" : "杭州市",
"3302" : "宁波市",
"3303" : "温州市",
"3304" : "嘉兴市",
"3305" : "湖州市",
"3306" : "绍兴市",
"3307" : "金华市",
"3308" : "衢州市",
"3309" : "舟山市",
"3310" : "台州市",
"3311" : "丽水市",
"330102":"上城区",
"330105":"拱墅区",
"330106":"西湖区",
"330108":"滨江区",
"330110":"余杭区",
"330109":"萧山区",
"330113":"临平区",
"330114":"钱塘区",
"330122":"桐庐县",
"330127":"淳安县",
"330182":"建德市",
"330183":"富阳区",
"330185":"临安区",
"330203":"海曙区",
"330205":"江北区",
"330206":"北仑区",
"330211":"镇海区",
"330212":"鄞州区",
"330225":"象山县",
"330226":"宁海县",
"330281":"余姚市",
"330282":"慈溪市",
"330283":"奉化区",
"330302":"鹿城区",
"330303":"龙湾区",
"330304":"瓯海区",
"330305":"洞头区",
"330324":"永嘉县",
"330326":"平阳县",
"330327":"苍南县",
"330328":"文成县",
"330329":"泰顺县",
"330381":"瑞安市",
"330382":"乐清市",
"330383":"龙港市",
"330402":"南湖区",
"330411":"秀洲区",
"330421":"嘉善县",
"330424":"海盐县",
"330481":"海宁市",
"330482":"平湖市",
"330483":"桐乡市",
"330502":"吴兴区",
"330503":"南浔区",
"330521":"德清县",
"330522":"长兴县",
"330523":"安吉县",
"330602":"越城区",
"330603":"柯桥区",
"330604":"上虞区",
"330624":"新昌县",
"330681":"诸暨市",
"330683":"嵊州市",
"330702":"婺城区",
"330703":"金东区",
"330723":"武义县",
"330726":"浦江县",
"330727":"磐安县",
"330781":"兰溪市",
"330782":"义乌市",
"330783":"东阳市",
"330784":"永康市",
"330802":"柯城区",
"330803":"衢江区",
"330822":"常山县",
"330824":"开化县",
"330825":"龙游县",
"330881":"江山市",
"330902":"定海区",
"330903":"普陀区",
"330921":"岱山县",
"330922":"嵊泗县",
"331002":"椒江区",
"331003":"黄岩区",
"331004":"路桥区",
"331021":"玉环市",
"331022":"三门县",
"331023":"天台县",
"331024":"仙居县",
"331081":"温岭市",
"331082":"临海市",
"331102":"莲都区",
"331121":"青田县",
"331122":"缙云县",
"331123":"遂昌县",
"331124":"松阳县",
"331125":"云和县",
"331126":"庆元县",
"331127":"景宁畲族自治县",
"331181":"龙泉市"
}
}
},
created() {
this.findCode = window.atob(window.decodeURIComponent(this.$route.query.findCode))
console.log(this.findCode)
this.placeName = this.$route.query.placeName
this.level = this.$route.query.level || this.level
// 解决返回上一页，页面不刷新
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
}
},
mounted() {
this.getCount();
this.timer = setInterval(() => {
this.getCount();
}, 1000 * 60 * 3)
this.nowTimes();
if (this.findCode.length <5 && (this.level != '本级')) {
this.getEchart()
} else if (this.findCode.length <5 && (this.level == '本级')) {
this.getEchart()
this.placeName = this.placeName + '本级'
}
else if (this.findCode.length > 5 && this.findCode.length < 12){
this.initMarkPointData()
} else {
this.getPlaceName()
}
},
methods: {
initMarkPointData() {
this.markPointData = []
axios.post(window._CONFIG['domianURL']+'/api/Organization/GetOrgJWDByCode', {code: this.findCode}).then(res => {
if (res.data.code == '10000') {
res.data.data.forEach(element => {
this.markPointData.push({
name: element.name,
coord: [
parseFloat(element.longitude), parseFloat(element.latitude)
],
selected: false,
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABBxJREFUSEu9lmtoHFUUx/9ndpNYaUElmRlLiKCx3RlfSFWqKLSiaCyxUs2HzIxKoUk+FESFFhtR6qtQkVqhSKoVQrOzoVah1lLaTxZL/SKIWZKdTWnwBU1mqhKFppjdnSN3H8lmd/aVlt5Pw5zH79x7zrnnEpa51qzubT1/cfTPZZqDlmOoKdY2gD8n0LcZH59OXoqeatRPQ2BNtTaB+VUATxSDmDHsg/af96Jj9QZQE9ypbm1r8efX+BIGwHhROGbgeJjDr/tIrWeiNwDczcAVAPtJoq+afJqMuyOXqwWxBByRjd1CmUBtRNAYuANAx4IDwk/E/G7CjX1T7FSXTYsJ2wGsz//PgHABzFNgmmDwnPif9GJZ/zlG0dIUk8ujpCmA48wcl1pTexKJo/OVdqLLhukTugjoAuiWEr0zjmtvrAom5h0+KB6GPzbujbpBIE3ufc7xRo9VCuKeDuNmTmXUNDcpxPwdgNpgx7Vr5j6imLbk01DiUvRstVxGVGvDNQXn0sKHHDfWd93AEdl6hIjPAfjHce2brhtYV6yDDO4XQEmironpyhdIw0ctDCrtJJ+zrFj0NIg+DtKlNCY5jLUN57i9vWfFqlTzZwCsem+kXDT0tuNF3xOfDe94SX+r5nYwDtQB/42ZB5Je7HRB96rAwomuGg8xMASm+ysE8GXLf00DP88OzxbLrxpccBZ8u+EXx7VvDwqoIXAm5LcFzdqIbPQT0cEgwDwkZcod8Upla1XzBYlxtOrNpavmKWY8BVCf40YPlTrRVOMsmB5lIEOEQTCeXByRvM1xY1+U2SjmSL44o45rZ6ebWCVDwngNoH0ATjiu3R3gRAwRh8C7xIRah/6mK8rcAdHToq2Srr252EZv61nJUvM0gJXM/FHSi+0IBEfk3oeJpB+EMMTpznHvyNRCdSpmH4GeCUmpwfHpI87SAjJfJsYwhaTbEhdHfl+0sXoJHMv3e3fStU8EgrN9J5t/EKFdvCqSnr11oahkc6/j3bkL2O0H5VhrtW7lMJ5PzkSzbafrPc38V8s5gB8QT6SEG3222K5sCmmyuReEnXml9x3XfquO/i1T0RRTjExx9BlI/LgzHfu+KlgINdX8Gowt4tvn0H2T3uF4I3BdMQYZ9EGuiPjNhBvbU2pfce5qijUG8L3CQCLcNTFjJ+qB66rZxYyT+do96bjRTUF2VQe+ppjirbQiWxzM76TTtO/C3/a/lQLQFeMVBn2Sl1cdmTVfGrpiHWdwobUmmHgoPU+HCwGsW9194+X0qqdJkjaD+aXc8ZYXU91HXaxYeMAX/ZsDaBTwOwB6DMANi7Lgy2dZ4GybqdYGiflDBh6skLMffaKdyZnomXpqoeZRlzqJyMYWibDRJ+okplkC/+oTna4XWPECqSfaa6HzP6bm/y7ydYxMAAAAAElFTkSuQmCC', // 标注图片地址路径
symbolSize: 15,
})
this.cityMap[element.name] = element.code
})
}
this.getEchart()
})
},
getPlaceName() {
axios.post(window._CONFIG['domianURL']+'/api/Organization/GetOrgByCode', {code: this.findCode}).then(res => {
this.placeName = res.data.data.dName || res.data.data.name
})
},
reback() {
window.history.back()
},
toInventoryList(type) {
const url = window._CONFIG['mainURL'] +"/#/warehouse/inventoryList?type=" + type + '&level='+ this.level +'&code=' + this.findCode.padEnd(12, '0')
window.open(url)
},
changeLevel() {
if (this.level === '本级及下级') { this.level = '本级'}
else { this.level = '本级及下级'}
this.getCount();
},
getCount() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetCount', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
this.zkTopCount = res.data.data.zkTopCount - res.data.data.bfCount
this.zkCount = res.data.data.zkCount
this.houseCount = res.data.data.houseCount
this.wxCount = res.data.data.wxCount
this.bfCount = res.data.data.bfCount
this.lyCount = res.data.data.lyCount
}
})
},
timeFormate(timeStamp) { //显示当前时间
let newDate = new Date(timeStamp);
let year = newDate.getFullYear();
let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
let week = newDate.getDay();
let weeks = ['日', '一', '二', '三', '四', '五', '六'];
let getWeek = '星期' + weeks[week];
this.week = getWeek;
this.date = year + '.' + month + '.' + date;
this.nowTime = hh + ':' + mm + ':' + ss;
},
nowTimes() {
this.timeFormate(new Date());
setInterval(this.nowTimes, 1000);
this.clear();
},
extraClick(extra) {
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(extra.findCode)) + '&placeName=' + extra.orgName;
},
tzbj() {
this.level = '本级'
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(this.findCode)) + '&level=本级&placeName='+ this.placeName + '本级';
},
clear() {
clearInterval(this.nowTimes)
this.nowTimes = null;
},
getEchart() { // 初始化地图数据
const _this = this
let myChart = echarts.init(document.getElementById('chart_map'));
this.placeName = this.mapFindByCode[this.findCode] || this.placeName
echarts.registerMap(this.placeName, require('@/map/' + this.placeName + '.json'));
this.data = []
this.splitList = []
for (var i=0; i<this.nameList.length; i++) {
this.data.push({name: this.nameList[i], selected: false, value: i+1}) //各省地图颜色数据依赖value
this.splitList.push({start: i+1, end: i+1, label: this.nameList[i], color: this.colorList[i]})
}
this.dataColor = {
x: '-1000 px', //图例横轴位置
y: '-1000 px', //图例纵轴位置
splitList: this.splitList
};
let option = {
tooltip: {
trigger: "item",
formatter: '{b}'
},
series: [{
name: '省市数据',
mapType: this.placeName, // 自定义扩展图表类型
type: 'map',
roam: false,
zoom: 1.1, //当前视角的缩放比例
label: {
normal:{
show: true,//是否在普通状态下显示标签。
textStyle: {
fontSize: 10,
fontWeight: "bold",
}, //普通状态下的标签文本样式。
},
emphasis: {
show: true,
color:"#00aeef",
}
},
markPoint: { //图标标注。
// label: {
// normal: {
// show: true,
// position: 'top',
// formatter: function(params) {
// return params.name;
// },
// },
// },
// itemStyle: {
// normal: {
// color: '#000'
// },
// },
data: this.markPointData
},
data: this.data
}],
dataRange: this.dataColor
}
myChart.setOption(option, true);
myChart.on("click", function (params) {
_this.placeName = params.name
if (_this.cityMap[params.name] !== _this.findCode) {
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(_this.cityMap[params.name]));
}
});
axios.post(window._CONFIG['domianURL']+'/api/View/GetAreaType', {findCode: this.findCode}).then(res => {
if (res.data.code == '10000') {
this.extraList = res.data.data.data.filter(i => i.isMap === 1).filter(i => i.orgCode != null)
}
})
window.addEventListener("resize", () => {
myChart.resize();
});
}
},
beforeDestroy() {
clearInterval(this.timer);
},
}
</script>
<style lang="scss" scoped>
.loginBtn {
width: 100%;
padding: 12px 0;
border: 1px solid rgba(25, 186, 139, 0.17);
font-size: 16px;
color: #d3d7f7;
cursor: pointer;
background: transparent;
border-radius: 4px;
&:hover {
color: #fff;
}
}
.brand-container {
position: absolute;
width: 100%;
height: 100%;
background: #000;
.wrap {
background: url(../assets/img/brand/bg.jpg) no-repeat #000;
background-size: cover;
line-height: 1.15;
header {
position: relative;
height: 1rem;
background: url(../assets/img/brand/head_bg.png) no-repeat top center;
background-size: 100% 100%;
h2 {
color: #7ef0ff;
font-size: 0.475rem;
text-align: center;
line-height: 0.75rem;
letter-spacing: 1px;
}
.weather {
position: absolute;
left: 1.375rem;
top: 0.35rem;
font-size: 0.25rem;
color: rgba(126, 240, 255, .7);
img {
width: .45rem;
}
span {
display: inline-block;
}
.tem {
margin: 0 .1rem 0 .2rem;
}
}
.showTime {
position: absolute;
right: 1.375rem;
top: 0.5rem;
color: rgba(126, 240, 255, .7);
display: flex;
.time {
font-size: .28rem;
margin-right: .18rem;
}
.date {
span {
display: block;
&:nth-child(1) {
font-size: .12rem;
text-align: right;
}
&:nth-child(2) {
font-size: .14rem;
}
}
}
}
}
.mainbox {
min-width: 1024px;
max-width: 1920px;
padding: 0.125rem 0.125rem 0;
display: flex;
flex-wrap: wrap;
.item {
flex: 3;
width: 25%;
&.center {
flex: 5;
width: 50%;
margin: 0 0.125rem 0.1rem;
overflow: hidden;
.resume {
background: rgba(101, 132, 226, 0.1);
padding: 0.1rem;
.resume-hd {
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
ul {
display: flex;
%li-line {
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
top: 25%;
}
li {
position: relative;
flex: 1;
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
font-size: 0.75rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-weight: bold;
&:nth-child(2) {
&:after {
@extend %li-line;
right: 0;
}
&:before {
@extend %li-line;
left: 0;
}
}
}
}
&:before {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
}
&:after {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
}
}
.resume-bd {
ul {
display: flex;
li {
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
}
}
}
}
}
%map-style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../assets/img/brand/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
.map {
position: relative;
height: 480px;
.chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 6.275rem;
width: 100%;
}
.map1 {
@extend %map-style;
}
.map2 {
@extend %map-style;
width: 7.575rem;
height: 7.575rem;
background-image: url(../assets/img/brand/lbx.png);
opacity: 0.6;
-webkit-animation: rotate 15s linear infinite;
animation: rotate 15s linear infinite;
z-index: 2;
}
.map3 {
@extend %map-style;
width: 7.075rem;
height: 7.075rem;
background-image: url(../assets/img/brand/jt.png);
-webkit-animation: rotate1 10s linear infinite;
animation: rotate1 10s linear infinite;
}
.extra_map {
position: absolute;
z-index: 999;
left: 1%;
top: 5%;
text-align: center;
width: 2.6rem;
height: 2.6rem;
.extraBtn {
cursor:pointer;
width: 100%;
padding: 12px 0;
border: 1px solid rgba(25, 186, 139, 0.17);
font-size: 15px;
color: #d3d7f7;
background: transparent;
border-radius: 4px;
}
}
}
.double-panel {
position: relative;
height: 7.8385rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-bottom: 0.1875rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
}
.panel {
position: relative;
height: 3.825rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-bottom: 0.1875rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
.chart {
height: 3rem;
}
}
}
}
.bottom-panel{
position: relative;
height: 4.275rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-right: 0.1375rem;
margin-left: 0.1375rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.bottom-panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
.chart {
height: 3rem;
}
}
}
}
@-webkit-keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920) {
html {
font-size: 80px !important;
}
}
</style>
src/views/Brand.vue
<!--
描述: jyzb大屏
作者: huangqy
日期: 2021-01-27
-->
<template>
<div class="brand-container">
<div class="wrap">
......@@ -17,7 +11,7 @@
<span>{{ date }}</span>
</span>
</div>
<button class="loginBtn" style="width: 90px;margin-left: 10px;top: 30px;position: fixed;" @click="reback">
<button class="loginBtn" style="width: 90px;margin-left: 10px;margin-top: -25px;" @click="reback">
返回
</button>
</header>
......@@ -30,15 +24,17 @@
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备类型统计</h2>
<zbdistribution :findCode="findCode" :level="level"/>
<h2>装备状态统计</h2>
<zbdynamicList :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备状态统计</h2>
<zbdynamicList :findCode="findCode" :level="level"/>
<h2>装备类型统计</h2>
<zbdistribution :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
</div>
<div class="item center">
......@@ -51,16 +47,16 @@
<li @click="toInventoryList('在库数量')" style="cursor: pointer;z-index: 3">
<countTo :startVal='startVal' :endVal="zkCount" :duration='2000' separator=""></countTo>
</li>
<li @click="toInventoryList('调拨数量')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="houseCount" :duration='2000' separator=""></countTo>
<li @click="toInventoryList('领用数量')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="lyCount" :duration='2000' separator=""></countTo>
</li>
</ul>
</div>
<div class="resume-bd">
<ul>
<li>装备总量（单位: 件）</li>
<li>可用数量（单位: 件）</li>
<li>调拨数量（单位: 件）</li>
<li>全部装备（单位: 件）</li>
<li>在库装备（单位: 件）</li>
<li>使用中（单位: 件）</li>
</ul>
</div>
</div>
......@@ -162,6 +158,7 @@ export default {
houseCount: 0,
wxCount: 0,
bfCount: 0,
lyCount: 0,
findCode: '',
cityMap: {
"杭州市": "3301",
......@@ -443,11 +440,12 @@ export default {
getCount() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetCount', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
this.zkTopCount = res.data.data.zkTopCount
this.zkTopCount = res.data.data.zkTopCount - res.data.data.bfCount
this.zkCount = res.data.data.zkCount
this.houseCount = res.data.data.houseCount
this.wxCount = res.data.data.wxCount
this.bfCount = res.data.data.bfCount
this.lyCount = res.data.data.lyCount
}
})
},
......@@ -683,10 +681,9 @@ export default {
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
font-size: 0.65rem;
font-size: 0.75rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: 'DIGITALDREAMFAT';
font-weight: bold;
&:nth-child(2) {
&:after {
......
src/views/Login1.vue 0 → 100644
<template>
<div class="brand-container">
<div class="wrap">
<header>
<div style="cursor:pointer"><h2>{{placeName}}警用装备智能管理平台</h2></div>
<div class="showTime">
<!-- <span class="time" style="cursor:pointer;z-index: 999" @click="changeLevel" v-if="findCode.length > 4">{{ level }}</span> -->
<span class="time">{{ nowTime }}</span>
<span class="date">
<span>{{ week }}</span>
<span>{{ date }}</span>
</span>
</div>
<button class="loginBtn" style="width: 90px;margin-left: 10px;top: 30px;position: fixed;" @click="reback">
返回
</button>
</header>
<section class="mainbox">
<div class="item left">
<div class="double-panel" v-if="findCode == 33">
<distribution-statistics/>
<div class="panel-footer"></div>
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备状态统计</h2>
<zbdynamicList :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
<div class="panel" v-if="findCode !== '33'">
<h2>装备类型统计</h2>
<zbdistribution :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
</div>
<div class="item center">
<div class="resume">
<div class="resume-hd">
<ul>
<li @click="toInventoryList('装备总数')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="zkTopCount" :duration='2000' separator=""></countTo>
</li>
<li @click="toInventoryList('在库数量')" style="cursor: pointer;z-index: 3">
<countTo :startVal='startVal' :endVal="zkCount" :duration='2000' separator=""></countTo>
</li>
<li @click="toInventoryList('领用数量')" style="cursor: pointer">
<countTo :startVal='startVal' :endVal="lyCount" :duration='2000' separator=""></countTo>
</li>
</ul>
</div>
<div class="resume-bd">
<ul>
<li>全部装备（单位: 件）</li>
<li>在库装备（单位: 件）</li>
<li>使用中（单位: 件）</li>
</ul>
</div>
</div>
<div class="map" v-if="this.findCode.length < 7">
<div class="chart" id="chart_map"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="extra_map" v-if="this.findCode.length < 5">
<button class="extraBtn" @click="tzbj()">本级</button>
<button class="extraBtn" v-for="(extra, index) in extraList" :key="index" @click="extraClick(extra)">{{ extra.orgName }}</button>
</div>
</div>
<zbseamless :findCode="findCode" :level="level" v-else/>
</div>
<div class="item right">
<div class="panel">
<h2>装备近三十天使用次数Top5</h2>
<zbsinan :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
<div class="panel">
<h2>近三十天使用、维修、报废次数</h2>
<zbpyramidTrend :findCode="findCode" :level="level"/>
<div class="panel-footer"></div>
</div>
</div>
</section>
<div class="bottom-panel">
<h2>各地区装备总数</h2>
<zbcakeLinkage :findCode="findCode"/>
<div class="bottom-panel-footer"></div>
</div>
</div>
</div>
</template>
<script>
import '@/assets/js/flexible'
import countTo from 'vue-count-to'
import { encrypt, decrypt } from '../utils/rsaEncrypt'
export default {
name: 'Brand',
components: {
countTo
},
data() {
return {
nowTime: '',
week: '',
date: '',
timer: null,
level: '本级及下级',
imgSrc: '',
weatcherData: {},
startVal: 0,
geoCoordMap: {},
code: '',
placeName: '浙江省',
nameList: ['杭州市', '湖州市', '嘉兴市', '金华市', '丽水市', '宁波市', '衢州市', '绍兴市', '台州市', '温州市', '舟山市',
'萧山区', '滨江区', '西湖区', '上城区', '下城区', '江干区', '拱墅区', '余杭区', '临安区', '富阳区', '桐庐县', '淳安区', '建德市',
'安吉县', '长兴县', '德清县', '吴兴区', '南浔区',
'桐乡市', '海宁市', '海盐县', '南湖区', '秀洲区', '平湖市', '嘉善县',
'婺城区', '金东区', '兰溪市', '义乌市', '东阳市', '永康市', '浦江县', '武义县', '磐安县',
'莲都区', '龙泉市', '青田县', '云和县', '景宁畲族自治县', '庆元县', '缙云县', '遂昌县', '松阳县',
'海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '余姚市', '慈溪市', '象山县', '宁海县',
'柯城区', '衢江区', '龙游县', '江山市', '常山县', '开化县',
'越城区', '柯桥区', '上虞区', '新昌县', '嵊州市', '诸暨市',
'椒江区', '黄岩区', '路桥区', '临海市', '温岭市', '玉环市', '天台县', '仙居县', '三门县',
'鹿城区','龙湾区','瓯海区','洞头区','瑞安市','乐清市','龙港市','永嘉县','平阳县','苍南县','文成县','泰顺县',
'定海区', '普陀区', '岱山县', '嵊泗县'
],
splitList: [],
extraList: [],
colorList: [
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6',
'#90EE90', '#FFC0CB', '#feffdb', '#e0cee4', '#fde8cd', '#87CEEB', '#fffed7', '#e4f1d7', '#F0E68C', '#ADD8E6'
],
data: [],
markPointData: [],
dataColor: [],
zkTopCount: 0,
zkCount: 0,
houseCount: 0,
wxCount: 0,
bfCount: 0,
lyCount: 0,
findCode: '',
cityMap: {
"杭州市": "3301",
"宁波市": "3302",
"温州市": "3303",
"嘉兴市": "3304",
"湖州市": "3305",
"绍兴市": "3306",
"金华市": "3307",
"衢州市": "3308",
"舟山市": "3309",
"台州市": "3310",
"丽水市": "3311",
"上城区":"330102",
"拱墅区":"330105",
"西湖区":"330106",
"滨江区":"330108",
"余杭区":"330110",
"萧山区":"330109",
"临平区":"330113",
"钱塘区":"330114",
"桐庐县":"330122",
"淳安县":"330127",
"建德市":"330182",
"富阳区":"330183",
"临安区":"330185",
"海曙区":"330203",
"江北区":"330205",
"北仑区":"330206",
"镇海区":"330211",
"鄞州区":"330212",
"象山县":"330225",
"宁海县":"330226",
"余姚市":"330281",
"慈溪市":"330282",
"奉化区":"330283",
"鹿城区":"330302",
"龙湾区":"330303",
"瓯海区":"330304",
"洞头区":"330305",
"永嘉县":"330324",
"平阳县":"330326",
"苍南县":"330327",
"文成县":"330328",
"泰顺县":"330329",
"瑞安市":"330381",
"乐清市":"330382",
"龙港市":"330383",
"南湖区":"330402",
"秀洲区":"330411",
"嘉善县":"330421",
"海盐县":"330424",
"海宁市":"330481",
"平湖市":"330482",
"桐乡市":"330483",
"吴兴区":"330502",
"南浔区":"330503",
"德清县":"330521",
"长兴县":"330522",
"安吉县":"330523",
"越城区":"330602",
"柯桥区":"330603",
"上虞区":"330604",
"新昌县":"330624",
"诸暨市":"330681",
"嵊州市":"330683",
"婺城区":"330702",
"金东区":"330703",
"武义县":"330723",
"浦江县":"330726",
"磐安县":"330727",
"兰溪市":"330781",
"义乌市":"330782",
"东阳市":"330783",
"永康市":"330784",
"柯城区":"330802",
"衢江区":"330803",
"常山县":"330822",
"开化县":"330824",
"龙游县":"330825",
"江山市":"330881",
"定海区":"330902",
"普陀区":"330903",
"岱山县":"330921",
"嵊泗县":"330922",
"椒江区":"331002",
"黄岩区":"331003",
"路桥区":"331004",
"玉环市":"331021",
"三门县":"331022",
"天台县":"331023",
"仙居县":"331024",
"温岭市":"331081",
"临海市":"331082",
"莲都区":"331102",
"青田县":"331121",
"缙云县":"331122",
"遂昌县":"331123",
"松阳县":"331124",
"云和县":"331125",
"庆元县":"331126",
"景宁畲族自治县":"331127",
"龙泉市":"331181"
},
mapFindByCode: {
"33" : "浙江省",
"3301" : "杭州市",
"3302" : "宁波市",
"3303" : "温州市",
"3304" : "嘉兴市",
"3305" : "湖州市",
"3306" : "绍兴市",
"3307" : "金华市",
"3308" : "衢州市",
"3309" : "舟山市",
"3310" : "台州市",
"3311" : "丽水市",
"330102":"上城区",
"330105":"拱墅区",
"330106":"西湖区",
"330108":"滨江区",
"330110":"余杭区",
"330109":"萧山区",
"330113":"临平区",
"330114":"钱塘区",
"330122":"桐庐县",
"330127":"淳安县",
"330182":"建德市",
"330183":"富阳区",
"330185":"临安区",
"330203":"海曙区",
"330205":"江北区",
"330206":"北仑区",
"330211":"镇海区",
"330212":"鄞州区",
"330225":"象山县",
"330226":"宁海县",
"330281":"余姚市",
"330282":"慈溪市",
"330283":"奉化区",
"330302":"鹿城区",
"330303":"龙湾区",
"330304":"瓯海区",
"330305":"洞头区",
"330324":"永嘉县",
"330326":"平阳县",
"330327":"苍南县",
"330328":"文成县",
"330329":"泰顺县",
"330381":"瑞安市",
"330382":"乐清市",
"330383":"龙港市",
"330402":"南湖区",
"330411":"秀洲区",
"330421":"嘉善县",
"330424":"海盐县",
"330481":"海宁市",
"330482":"平湖市",
"330483":"桐乡市",
"330502":"吴兴区",
"330503":"南浔区",
"330521":"德清县",
"330522":"长兴县",
"330523":"安吉县",
"330602":"越城区",
"330603":"柯桥区",
"330604":"上虞区",
"330624":"新昌县",
"330681":"诸暨市",
"330683":"嵊州市",
"330702":"婺城区",
"330703":"金东区",
"330723":"武义县",
"330726":"浦江县",
"330727":"磐安县",
"330781":"兰溪市",
"330782":"义乌市",
"330783":"东阳市",
"330784":"永康市",
"330802":"柯城区",
"330803":"衢江区",
"330822":"常山县",
"330824":"开化县",
"330825":"龙游县",
"330881":"江山市",
"330902":"定海区",
"330903":"普陀区",
"330921":"岱山县",
"330922":"嵊泗县",
"331002":"椒江区",
"331003":"黄岩区",
"331004":"路桥区",
"331021":"玉环市",
"331022":"三门县",
"331023":"天台县",
"331024":"仙居县",
"331081":"温岭市",
"331082":"临海市",
"331102":"莲都区",
"331121":"青田县",
"331122":"缙云县",
"331123":"遂昌县",
"331124":"松阳县",
"331125":"云和县",
"331126":"庆元县",
"331127":"景宁畲族自治县",
"331181":"龙泉市"
}
}
},
created() {
this.findCode = window.atob(window.decodeURIComponent(this.$route.query.findCode))
console.log(this.findCode)
this.placeName = this.$route.query.placeName
this.level = this.$route.query.level || this.level
// 解决返回上一页，页面不刷新
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
}
},
mounted() {
this.getCount();
this.timer = setInterval(() => {
this.getCount();
}, 1000 * 60 * 3)
this.nowTimes();
if (this.findCode.length <5 && (this.level != '本级')) {
this.getEchart()
} else if (this.findCode.length <5 && (this.level == '本级')) {
this.getEchart()
this.placeName = this.placeName + '本级'
}
else if (this.findCode.length > 5 && this.findCode.length < 12){
this.initMarkPointData()
} else {
this.getPlaceName()
}
},
methods: {
initMarkPointData() {
this.markPointData = []
axios.post(window._CONFIG['domianURL']+'/api/Organization/GetOrgJWDByCode', {code: this.findCode}).then(res => {
if (res.data.code == '10000') {
res.data.data.forEach(element => {
this.markPointData.push({
name: element.name,
coord: [
parseFloat(element.longitude), parseFloat(element.latitude)
],
selected: false,
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABBxJREFUSEu9lmtoHFUUx/9ndpNYaUElmRlLiKCx3RlfSFWqKLSiaCyxUs2HzIxKoUk+FESFFhtR6qtQkVqhSKoVQrOzoVah1lLaTxZL/SKIWZKdTWnwBU1mqhKFppjdnSN3H8lmd/aVlt5Pw5zH79x7zrnnEpa51qzubT1/cfTPZZqDlmOoKdY2gD8n0LcZH59OXoqeatRPQ2BNtTaB+VUATxSDmDHsg/af96Jj9QZQE9ypbm1r8efX+BIGwHhROGbgeJjDr/tIrWeiNwDczcAVAPtJoq+afJqMuyOXqwWxBByRjd1CmUBtRNAYuANAx4IDwk/E/G7CjX1T7FSXTYsJ2wGsz//PgHABzFNgmmDwnPif9GJZ/zlG0dIUk8ujpCmA48wcl1pTexKJo/OVdqLLhukTugjoAuiWEr0zjmtvrAom5h0+KB6GPzbujbpBIE3ufc7xRo9VCuKeDuNmTmXUNDcpxPwdgNpgx7Vr5j6imLbk01DiUvRstVxGVGvDNQXn0sKHHDfWd93AEdl6hIjPAfjHce2brhtYV6yDDO4XQEmironpyhdIw0ctDCrtJJ+zrFj0NIg+DtKlNCY5jLUN57i9vWfFqlTzZwCsem+kXDT0tuNF3xOfDe94SX+r5nYwDtQB/42ZB5Je7HRB96rAwomuGg8xMASm+ysE8GXLf00DP88OzxbLrxpccBZ8u+EXx7VvDwqoIXAm5LcFzdqIbPQT0cEgwDwkZcod8Upla1XzBYlxtOrNpavmKWY8BVCf40YPlTrRVOMsmB5lIEOEQTCeXByRvM1xY1+U2SjmSL44o45rZ6ebWCVDwngNoH0ATjiu3R3gRAwRh8C7xIRah/6mK8rcAdHToq2Srr252EZv61nJUvM0gJXM/FHSi+0IBEfk3oeJpB+EMMTpznHvyNRCdSpmH4GeCUmpwfHpI87SAjJfJsYwhaTbEhdHfl+0sXoJHMv3e3fStU8EgrN9J5t/EKFdvCqSnr11oahkc6/j3bkL2O0H5VhrtW7lMJ5PzkSzbafrPc38V8s5gB8QT6SEG3222K5sCmmyuReEnXml9x3XfquO/i1T0RRTjExx9BlI/LgzHfu+KlgINdX8Gowt4tvn0H2T3uF4I3BdMQYZ9EGuiPjNhBvbU2pfce5qijUG8L3CQCLcNTFjJ+qB66rZxYyT+do96bjRTUF2VQe+ppjirbQiWxzM76TTtO/C3/a/lQLQFeMVBn2Sl1cdmTVfGrpiHWdwobUmmHgoPU+HCwGsW9194+X0qqdJkjaD+aXc8ZYXU91HXaxYeMAX/ZsDaBTwOwB6DMANi7Lgy2dZ4GybqdYGiflDBh6skLMffaKdyZnomXpqoeZRlzqJyMYWibDRJ+okplkC/+oTna4XWPECqSfaa6HzP6bm/y7ydYxMAAAAAElFTkSuQmCC', // 标注图片地址路径
symbolSize: 15,
})
this.cityMap[element.name] = element.code
})
}
this.getEchart()
})
},
getPlaceName() {
axios.post(window._CONFIG['domianURL']+'/api/Organization/GetOrgByCode', {code: this.findCode}).then(res => {
this.placeName = res.data.data.dName || res.data.data.name
})
},
reback() {
window.history.back()
},
toInventoryList(type) {
const url = window._CONFIG['mainURL'] +"/#/warehouse/inventoryList?type=" + type + '&level='+ this.level +'&code=' + this.findCode.padEnd(12, '0')
window.open(url)
},
changeLevel() {
if (this.level === '本级及下级') { this.level = '本级'}
else { this.level = '本级及下级'}
this.getCount();
},
getCount() {
axios.post(window._CONFIG['domianURL']+'/api/View/GetCount', {findCode: this.findCode, level: this.level}).then(res => {
if (res.data.code == '10000') {
this.zkTopCount = res.data.data.zkTopCount - res.data.data.bfCount
this.zkCount = res.data.data.zkCount
this.houseCount = res.data.data.houseCount
this.wxCount = res.data.data.wxCount
this.bfCount = res.data.data.bfCount
this.lyCount = res.data.data.lyCount
}
})
},
timeFormate(timeStamp) { //显示当前时间
let newDate = new Date(timeStamp);
let year = newDate.getFullYear();
let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
let week = newDate.getDay();
let weeks = ['日', '一', '二', '三', '四', '五', '六'];
let getWeek = '星期' + weeks[week];
this.week = getWeek;
this.date = year + '.' + month + '.' + date;
this.nowTime = hh + ':' + mm + ':' + ss;
},
nowTimes() {
this.timeFormate(new Date());
setInterval(this.nowTimes, 1000);
this.clear();
},
extraClick(extra) {
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(extra.findCode)) + '&placeName=' + extra.orgName;
},
tzbj() {
this.level = '本级'
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(this.findCode)) + '&level=本级&placeName='+ this.placeName + '本级';
},
clear() {
clearInterval(this.nowTimes)
this.nowTimes = null;
},
// x='121.542035',
// y='29.817563',
getEchart() { // 初始化地图数据
const _this = this
let myChart = echarts.init(document.getElementById('chart_map'));
this.placeName = this.mapFindByCode['330203'] || this.placeName
echarts.registerMap(this.placeName, require('@/map/' + this.placeName + '.json'));
this.data = []
this.splitList = []
for (var i=0; i<this.nameList.length; i++) {
this.data.push({name: this.nameList[i], selected: false, value: i+1}) //各省地图颜色数据依赖value
this.splitList.push({start: i+1, end: i+1, label: this.nameList[i], color: this.colorList[i]})
}
this.dataColor = {
x: 'x', //图例横轴位置
y: 'y', //图例纵轴位置
// x: 121.542035, //图例横轴位置
// y: 29.817563, //图例纵轴位置
splitList: this.splitList
};
let option = {
tooltip: {
trigger: "item",
formatter: '{b}'
},
series: [{
name: '省市数据',
mapType: this.placeName, // 自定义扩展图表类型
type: 'map',
roam: false,
zoom: 1.1, //当前视角的缩放比例
label: {
normal:{
show: true,//是否在普通状态下显示标签。
textStyle: {
fontSize: 10,
fontWeight: "bold",
}, //普通状态下的标签文本样式。
},
emphasis: {
show: true,
color:"#00aeef",
}
},
markPoint: { //图标标注。
// label: {
// normal: {
// show: true,
// position: 'top',
// formatter: function(params) {
// return params.name;
// },
// },
// },
// itemStyle: {
// normal: {
// color: '#000'
// },
// },
// data: this.markPointData
symbol: 'pin', // 标注的图形为pin
symbolSize: 50, // 标注图形大小
data: [
{
name: '指定坐标',
coord: [121.544445 ,29.862271],
},
],
},
data: this.data
}],
dataRange: this.dataColor
}
myChart.setOption(option, true);
myChart.on("click", function (params) {
_this.placeName = params.name
if (_this.cityMap[params.name] !== _this.findCode) {
window.location.href = window._CONFIG['mainURL'] + "/my-app?findCode=" + window.encodeURIComponent(window.btoa(_this.cityMap[params.name]));
}
});
axios.post(window._CONFIG['domianURL']+'/api/View/GetAreaType', {findCode: this.findCode}).then(res => {
if (res.data.code == '10000') {
this.extraList = res.data.data.data.filter(i => i.isMap === 1).filter(i => i.orgCode != null)
}
})
window.addEventListener("resize", () => {
myChart.resize();
});
}
},
beforeDestroy() {
clearInterval(this.timer);
},
}
</script>
<style lang="scss" scoped>
.loginBtn {
width: 100%;
padding: 12px 0;
border: 1px solid rgba(25, 186, 139, 0.17);
font-size: 16px;
color: #d3d7f7;
cursor: pointer;
background: transparent;
border-radius: 4px;
&:hover {
color: #fff;
}
}
.brand-container {
position: absolute;
width: 100%;
height: 100%;
background: #000;
.wrap {
background: url(../assets/img/brand/bg.jpg) no-repeat #000;
background-size: cover;
line-height: 1.15;
header {
position: relative;
height: 1rem;
background: url(../assets/img/brand/head_bg.png) no-repeat top center;
background-size: 100% 100%;
h2 {
color: #7ef0ff;
font-size: 0.475rem;
text-align: center;
line-height: 0.75rem;
letter-spacing: 1px;
}
.weather {
position: absolute;
left: 1.375rem;
top: 0.35rem;
font-size: 0.25rem;
color: rgba(126, 240, 255, .7);
img {
width: .45rem;
}
span {
display: inline-block;
}
.tem {
margin: 0 .1rem 0 .2rem;
}
}
.showTime {
position: absolute;
right: 1.375rem;
top: 0.5rem;
color: rgba(126, 240, 255, .7);
display: flex;
.time {
font-size: .28rem;
margin-right: .18rem;
}
.date {
span {
display: block;
&:nth-child(1) {
font-size: .12rem;
text-align: right;
}
&:nth-child(2) {
font-size: .14rem;
}
}
}
}
}
.mainbox {
min-width: 1024px;
max-width: 1920px;
padding: 0.125rem 0.125rem 0;
display: flex;
flex-wrap: wrap;
.item {
flex: 3;
width: 25%;
&.center {
flex: 5;
width: 50%;
margin: 0 0.125rem 0.1rem;
overflow: hidden;
.resume {
background: rgba(101, 132, 226, 0.1);
padding: 0.1rem;
.resume-hd {
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
ul {
display: flex;
%li-line {
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
top: 25%;
}
li {
position: relative;
flex: 1;
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
font-size: 0.65rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: 'DIGITALDREAMFAT';
font-weight: bold;
&:nth-child(2) {
&:after {
@extend %li-line;
right: 0;
}
&:before {
@extend %li-line;
left: 0;
}
}
}
}
&:before {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
}
&:after {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
}
}
.resume-bd {
ul {
display: flex;
li {
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
}
}
}
}
}
%map-style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../assets/img/brand/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
.map {
position: relative;
height: 480px;
.chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 6.275rem;
width: 100%;
}
.map1 {
@extend %map-style;
}
.map2 {
@extend %map-style;
width: 7.575rem;
height: 7.575rem;
background-image: url(../assets/img/brand/lbx.png);
opacity: 0.6;
-webkit-animation: rotate 15s linear infinite;
animation: rotate 15s linear infinite;
z-index: 2;
}
.map3 {
@extend %map-style;
width: 7.075rem;
height: 7.075rem;
background-image: url(../assets/img/brand/jt.png);
-webkit-animation: rotate1 10s linear infinite;
animation: rotate1 10s linear infinite;
}
.extra_map {
position: absolute;
z-index: 999;
left: 1%;
top: 5%;
text-align: center;
width: 2.6rem;
height: 2.6rem;
.extraBtn {
cursor:pointer;
width: 100%;
padding: 12px 0;
border: 1px solid rgba(25, 186, 139, 0.17);
font-size: 15px;
color: #d3d7f7;
background: transparent;
border-radius: 4px;
}
}
}
.double-panel {
position: relative;
height: 7.8385rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-bottom: 0.1875rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
}
.panel {
position: relative;
height: 3.825rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-bottom: 0.1875rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
.chart {
height: 3rem;
}
}
}
}
.bottom-panel{
position: relative;
height: 4.275rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
padding: 0 0.1875rem 0;
margin-right: 0.1375rem;
margin-left: 0.1375rem;
&:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.bottom-panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 0.225rem;
font-weight: 400;
a {
margin: 0 0.1875rem;
color: #fff;
text-decoration: none;
}
}
.chart {
height: 3rem;
}
}
}
}
@-webkit-keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920) {
html {
font-size: 80px !important;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论