loveflow
12 months ago
parent
ce1c677ed2
commit
f897b4c568
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 72 KiB |
@ -1,5 +1,98 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="antiAttackPanel">
|
||||||
<!-- 防攻击 -->
|
<!-- 防攻击 -->
|
||||||
|
<div class="screenRow screenTopRow">
|
||||||
|
<div class="screenLeft mr18">
|
||||||
|
<div class="screenLeftTop">
|
||||||
|
<colWrap class="mb14" title="人防数据"> </colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenLeftBtm">
|
||||||
|
<colWrap class="mb14" title="物防数据"> </colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenMid mr18">
|
||||||
|
<colWrap class="mb14" title="重点人员出入特定区域预警"> </colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenRight">
|
||||||
|
<colWrap class="mb14" title="企业隐患分析"> </colWrap>
|
||||||
|
<colWrap class="mb14" title="应急预案制定异常分析"> </colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenRow screenBtmRow">
|
||||||
|
<div class="screenBLeft mr18">
|
||||||
|
<colWrap class="" title="反恐目标单位检查数据"> </colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenBRight">
|
||||||
|
<colWrap class="" title="技防数据"> </colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import colWrap from "../components/colWrap.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
colWrap,
|
||||||
|
},
|
||||||
|
data() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.antiAttackPanel {
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.screenRow {
|
||||||
|
display: flex;
|
||||||
|
.screenLeft {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.screenLeftTop {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 26%;
|
||||||
|
}
|
||||||
|
.screenLeftBtm {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 74%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenMid {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.screenRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.screenRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenBLeft {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.screenBRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenTopRow {
|
||||||
|
height: 68%;
|
||||||
|
}
|
||||||
|
.screenBtmRow {
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let dataList = this.chartObj.data;
|
||||||
|
let maxArr = [];
|
||||||
|
let maxValue = 0;
|
||||||
|
let xData = [];
|
||||||
|
let yData = [];
|
||||||
|
let total = 0;
|
||||||
|
|
||||||
|
dataList.forEach((item) => {
|
||||||
|
xData.push(item.name);
|
||||||
|
yData.push(item.value);
|
||||||
|
if (maxValue < item.value) {
|
||||||
|
maxValue = item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
dataList.forEach((item) => {
|
||||||
|
maxArr.push(maxValue);
|
||||||
|
total = total + item.value;
|
||||||
|
});
|
||||||
|
if (!total) {
|
||||||
|
total = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: "14",
|
||||||
|
top: "5%", // 设置条形图的边距
|
||||||
|
right: "0",
|
||||||
|
bottom: "0",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
data: xData,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
color: "#299CD4",
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "Microsoft YaHei",
|
||||||
|
align: "left",
|
||||||
|
padding: [0, 0, 5, 7],
|
||||||
|
rich: {
|
||||||
|
index: {
|
||||||
|
padding: [4, 0, 0, 1],
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
padding: [4, 16, 0, 2],
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
align: "right",
|
||||||
|
color: "rgba(255,255,255,0.9)",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: (name, index) => {
|
||||||
|
if (dataList.length) {
|
||||||
|
const item = dataList.filter((item) => item.name == name)[0];
|
||||||
|
return `{name|${name}}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
offset: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 内
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: (params) => {
|
||||||
|
console.log(params);
|
||||||
|
var color = {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[params.dataIndex][0], // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[params.dataIndex][1], // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return color;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: dataList,
|
||||||
|
z: 2,
|
||||||
|
animationEasing: "elasticOut",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 外边框
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolBoundingData: maxValue,
|
||||||
|
barWidth: 1,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 10,
|
||||||
|
normal: {
|
||||||
|
color: "none",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
padding: [-20, 0, 0, -30],
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
rate: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#9CE0FF",
|
||||||
|
},
|
||||||
|
rate1: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#FFDE9C",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: (params) => {
|
||||||
|
var text = `{rate|${((params.data * 100) / total).toFixed(
|
||||||
|
0
|
||||||
|
)}%}`;
|
||||||
|
if (params.dataIndex === 1) {
|
||||||
|
text = `{rate1|${((params.data * 100) / total).toFixed(0)}%}`;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: "#9CE0FF",
|
||||||
|
fontSize: 16,
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
position: "right",
|
||||||
|
distance: 1, // 向右偏移位置
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: yData,
|
||||||
|
z: 0,
|
||||||
|
animationEasing: "elasticOut",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "外框",
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolBoundingData: maxValue,
|
||||||
|
barGap: "-100%", // 设置外框粗细
|
||||||
|
data: maxArr,
|
||||||
|
barWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(255,255,255,0.06)", // 填充色
|
||||||
|
label: {
|
||||||
|
// 标签显示位置
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
z: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let point = this.chartObj.point; //环形图的具体 百分比
|
||||||
|
let total = this.chartObj.total;
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
// 圆环中央文字
|
||||||
|
show: true, // 是否显示
|
||||||
|
text: this.chartObj.name,
|
||||||
|
textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
|
||||||
|
/* subtextStyle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 500,
|
||||||
|
lineHeight: 10,
|
||||||
|
color: "#E3FEFF",
|
||||||
|
}, */
|
||||||
|
textAlign: "center",
|
||||||
|
left: "47%",
|
||||||
|
top: 120,
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: this.chartObj.icon,
|
||||||
|
width: 160,
|
||||||
|
height: 160,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: -20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: '访问来源1',
|
||||||
|
type: "pie",
|
||||||
|
radius: [30, 40],
|
||||||
|
center: ["center", 60],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100, //对应显示的部分数据即100%
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15,
|
||||||
|
color: "#1B2221",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
formatter: ((100 * point) / total).toFixed(0) + "%",
|
||||||
|
color: this.chartObj.color[0],
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: '访问来源2',
|
||||||
|
type: "pie",
|
||||||
|
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||||
|
radius: [30, 40],
|
||||||
|
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||||
|
center: ["center", 60],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: (point / total) * 100,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderRadius: 15, //圆角
|
||||||
|
color: {
|
||||||
|
// 设置渐变色
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[1], // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[2], // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
value: 120, //百分比
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255,255,255,0)", //透明
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getHeight() {
|
||||||
|
let div = document.getElementById("pieWrap");
|
||||||
|
return div.clientHeight;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
this.option = {
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "68.31",
|
||||||
|
x: "center",
|
||||||
|
top: "45%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: "20",
|
||||||
|
color: "#FFF3C9",
|
||||||
|
foontWeight: "500",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
polar: {
|
||||||
|
radius: ["50%", "65%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
},
|
||||||
|
angleAxis: {
|
||||||
|
max: 100,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
radiusAxis: {
|
||||||
|
type: "category",
|
||||||
|
show: true,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 亮线
|
||||||
|
name: "",
|
||||||
|
z: 5,
|
||||||
|
type: "pie",
|
||||||
|
cursor: "default",
|
||||||
|
radius: ["40%", "40%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
legendHoverLink: false,
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: "rgba(38,95,92,0.6)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//内圆
|
||||||
|
type: "pie",
|
||||||
|
radius: "39%",
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
z: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(108,128,151,0)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(108,128,151,0.5)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(108,128,151,0.8)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [100],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue