更新后台
This commit is contained in:
parent
b67be78892
commit
b4031bf1b4
|
|
@ -2,95 +2,146 @@
|
|||
<div class="echartsBox" ref="chartRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const chartRef = ref()
|
||||
const initChart = () => {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderColor: '#0C2E5A',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'middle',
|
||||
right: '5%',
|
||||
orient: 'vertical',
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
icon: 'roundRect',
|
||||
formatter: function(name) {
|
||||
const data = option.series[0].data;
|
||||
const target = data.find(item => item.name === name);
|
||||
if (target) {
|
||||
return `${name} ${target.value} ${(target.value / 50 * 100).toFixed(0)}%`;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '情报反馈统计',
|
||||
type: 'pie',
|
||||
radius: ['40%', '75%'],
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
zlevel: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A'
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
animation: true,
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A',
|
||||
opacity: 0.8,
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 18,
|
||||
name: '实反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FF6B9A' },
|
||||
{ offset: 1, color: '#FF4B7A' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: '超时反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFAA33' },
|
||||
{ offset: 1, color: '#FF8A00' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '处置下发',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFE699' },
|
||||
{ offset: 1, color: '#FFD666' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '未反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#66B5FF' },
|
||||
{ offset: 1, color: '#3AA1FF' }
|
||||
])
|
||||
}
|
||||
}
|
||||
],
|
||||
zlevel: 10,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 10,
|
||||
itemStyle: {
|
||||
shadowBlur: 30,
|
||||
shadowColor: 'rgba(0,0,0,0.6)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
// export default {
|
||||
// name: 'Bkjbtj',
|
||||
// data() {
|
||||
// return {
|
||||
// chart: null,
|
||||
// chartData: [
|
||||
// { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
|
||||
// { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
|
||||
// { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
|
||||
// { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
|
||||
// ]
|
||||
// };
|
||||
// },
|
||||
// mounted() {
|
||||
// this.initChart();
|
||||
// window.addEventListener('resize', this.resizeChart);
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// window.removeEventListener('resize', this.resizeChart);
|
||||
// this.chart && this.chart.dispose();
|
||||
// },
|
||||
// methods: {
|
||||
// initChart() {
|
||||
// this.chart = echarts.init(this.$refs.chartRef);
|
||||
// const option = {
|
||||
// backgroundColor: 'transparent',
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: '{b}: {c} ({d}%)'
|
||||
// },
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// right: '5%',
|
||||
// top: 'middle',
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// series: [{
|
||||
// name: '告警统计',
|
||||
// type: 'pie3D',
|
||||
// radius: '55%',
|
||||
// center: ['40%', '50%'],
|
||||
// viewControl: {
|
||||
// beta: 40,
|
||||
// alpha: 20,
|
||||
// distance: 200,
|
||||
// rotateSensitivity: 1,
|
||||
// zoomSensitivity: 1
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: '{d}%',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// fontSize: 14,
|
||||
// borderWidth: 1
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// itemStyle: {
|
||||
// opacity: 0.8,
|
||||
// borderWidth: 1,
|
||||
// borderColor: '#fff'
|
||||
// },
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// opacity: 1
|
||||
// }
|
||||
// },
|
||||
// data: this.chartData
|
||||
// }]
|
||||
// };
|
||||
// this.chart.setOption(option);
|
||||
// },
|
||||
// resizeChart() {
|
||||
// this.chart && this.chart.resize();
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!-- 头部筛选 -->
|
||||
<div class="topSearch">
|
||||
<el-form v-model="listQuery">
|
||||
<MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" />
|
||||
<!-- <MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" /> -->
|
||||
<MOSTY.Select v-model="listQuery.sd" :dictEnum="search.xd" />
|
||||
<MOSTY.Select v-model="listQuery.zs" :dictEnum="search.zs" />
|
||||
<MOSTY.Select v-model="listQuery.qy" :dictEnum="search.qy" />
|
||||
|
|
@ -34,14 +34,7 @@
|
|||
<!-- 第一部门 -->
|
||||
<div>
|
||||
<div class="hed flex align-center">
|
||||
<span
|
||||
@click="active = it"
|
||||
:class="active == it ? 'active' : ''"
|
||||
class="f14 mr10 pointer"
|
||||
v-for="it in btn.bkBtn"
|
||||
:key="it"
|
||||
>{{ it }}</span
|
||||
>
|
||||
<span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it">{{ it }}</span>
|
||||
</div>
|
||||
<Count></Count>
|
||||
</div>
|
||||
|
|
@ -79,7 +72,7 @@
|
|||
|
||||
<!-- 底部按钮 -->
|
||||
<ul class="footBox">
|
||||
<li class="footItem" v-for="it in btn.footBtn" :key="it">{{ it }}</li>
|
||||
<li class="footItem" v-for="it in btn.footBtn" :key="it"> {{ it }} </li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -204,10 +197,10 @@ const active1 = ref("人员身份标签统计");
|
|||
border-radius: 6px 6px 6px 6px;
|
||||
background: rgba(0, 29, 75, 0.4);
|
||||
.listContent {
|
||||
height: calc(100% - 86px);
|
||||
height: calc(100% - 96px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
|
|
@ -239,13 +232,18 @@ const active1 = ref("人员身份标签统计");
|
|||
display: flex;
|
||||
align-items: center;
|
||||
.footItem{
|
||||
background: red;
|
||||
width: 195px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
margin: 0 10px;
|
||||
background-image: linear-gradient( 95deg,#0072ff 0%, #0072ff 100%);
|
||||
transform: skew(-20deg);
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
&:nth-child(2){
|
||||
background-image: linear-gradient( 95deg,#FFA800 0%, #FFA800 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hed {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { fa } from 'element-plus/es/locale.mjs';
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('qbfk');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user