Skip to content

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

页面及组件调整优化

parent 28bc4a8d
正在显示 包含 1141 行增加 和 41 行删除
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/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.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.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 {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论