更新大屏
This commit is contained in:
@ -9,11 +9,11 @@ import { ref, watch ,defineProps,nextTick } from "vue";
|
||||
const props = defineProps({
|
||||
echartsId:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
default:'barId'
|
||||
},
|
||||
color:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
default:'#0072ff'
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
@ -72,7 +72,7 @@ const initChart = (data) => {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "情报反馈统计",
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "75%"],
|
||||
center: ["30%", "50%"],
|
||||
|
||||
@ -3,152 +3,34 @@
|
||||
<span class="title">情报反馈统计</span>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
|
||||
<pieEcharts echartsId='qbfk' :data="countData"></pieEcharts>
|
||||
<!-- <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import pieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('qbfk');
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
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)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
const countData = ref([
|
||||
{ label:'实反馈',value:0,color:['#FF6B9A','#FF4B7A']},
|
||||
{ label:'超时反馈',value:0,color:['#FFAA33','#FF8A00']},
|
||||
{ label:'处置下发',value:0,color:['#FFE699','#FFD666']},
|
||||
{ label:'未反馈',value:0,color:['#66B5FF','#3AA1FF']},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
getCount();
|
||||
});
|
||||
|
||||
const getCount = () =>{
|
||||
// 获取处置状态统计
|
||||
qcckPost({cjLx:0}, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
|
||||
console.log(res,'=====');
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -14,8 +14,8 @@ import { onMounted, reactive } from "vue";
|
||||
const list = reactive({
|
||||
xDate: ['110警情','人力情报','系统采集','民警处置单'],
|
||||
list:[
|
||||
{ name: "总数", value: [40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,40,50,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
{ name: "总数", value: [0,0,0,0,] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [0,0,0,0],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
})
|
||||
onMounted(() => {
|
||||
@ -24,8 +24,9 @@ onMounted(() => {
|
||||
|
||||
const getCount = () =>{
|
||||
qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForLylx').then(res=>{
|
||||
console.log(res,'=====');
|
||||
|
||||
list.xDate = res ? res.cz.map(v=> v.zdmc):[];
|
||||
list.list[0].value = res ? res.zs.map(v=>v.count):[];
|
||||
list.list[1].value = res ? res.cz.map(v=>v.count):[];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -8,18 +8,31 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { values } from "lodash";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive, onMounted } from 'vue';
|
||||
|
||||
const dataList = reactive({
|
||||
xData:['巴宜区','工布江达县','米林县','墨脱县','波密县','察隅县','朗县'],
|
||||
color:['#0386FB','#00FFFF'],
|
||||
list:[
|
||||
{label:'总数',val:[30,20,10,60,50,60,35]},
|
||||
{label:'已处置',val:[40,30,20,50,30,44,50]},
|
||||
{label:'总数',val:[0,0,0,0,0,0,0]},
|
||||
{label:'已处置',val:[0,0,0,0,0,0,0]},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getCount()
|
||||
});
|
||||
|
||||
const getCount = () =>{
|
||||
qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForQx').then(res=>{
|
||||
dataList.xDate = res ? res.ycz.map(v=> v.org_name):[];
|
||||
dataList.list[0].val = res ? res.zs.map(v=>v.count):[];
|
||||
dataList.list[1].val = res ? res.ycz.map(v=>v.count):[];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -11,13 +11,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { ref, onMounted } from "vue";
|
||||
const contentItem = ref([
|
||||
{ label: "线索总数", value: "892" ,icon:require('@/assets/images/top-1.png')},
|
||||
{ label: "已处置线索总数", value: "892",icon:require('@/assets/images/top-2.png') },
|
||||
{ label: "重点人总数", value: "892",icon:require('@/assets/images/top-3.png') },
|
||||
{ label: "重点群体总数", value: "892" ,icon:require('@/assets/images/top-4.png')},
|
||||
{ type:"xs", label: "线索总数", value: "0" ,icon:require('@/assets/images/top-1.png')},
|
||||
{ type:"xscz", label: "已处置线索总数", value: "0",icon:require('@/assets/images/top-2.png') },
|
||||
{ type:"zdry", label: "重点人总数", value: "0",icon:require('@/assets/images/top-3.png') },
|
||||
{ type:"zdqt", label: "重点群体总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
getCount()
|
||||
});
|
||||
|
||||
const getCount = () =>{
|
||||
qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForZs').then(res=>{
|
||||
for(let key in res){
|
||||
let index = contentItem.value.findIndex(v=>key == v.type)
|
||||
if(index != -1) contentItem.value[index].value = res[key];
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user