loveflow
7 months ago
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,187 @@
|
|||||||
|
<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 = {
|
||||||
|
legend: {
|
||||||
|
data: this.chartObj.legend,
|
||||||
|
icon: "rect",
|
||||||
|
right: "5%",
|
||||||
|
top: this.chartObj.legendTop || "2%",
|
||||||
|
itemWidth: 8, // 设置宽度
|
||||||
|
itemHeight: 8, // 设置高度
|
||||||
|
itemGap: 16, // 设置间距
|
||||||
|
textStyle: {
|
||||||
|
//图例文字的样式
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: this.chartObj.gridTop || "20%",
|
||||||
|
bottom: this.chartObj.gridBtm || "10%",
|
||||||
|
left: this.chartObj.gridLeft || "6%",
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: this.chartObj.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#6C8097",
|
||||||
|
fontSize: 12,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.chartObj.legend[0],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
color: this.chartObj.color[0][0],
|
||||||
|
data: this.chartObj.yData1,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[0][1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[0][2],
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.chartObj.legend[0] + "1",
|
||||||
|
type: "scatter",
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
symbol: "roundRect",
|
||||||
|
symbolSize: [20, 4], // 进度条白点
|
||||||
|
symbolOffset: [-12, 0],
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
barBorderRadius: [10, 10, 10, 10],
|
||||||
|
color: "#6BDFFF",
|
||||||
|
shadowColor: "rgba(255, 255, 255, 1)",
|
||||||
|
shadowBlur: 6,
|
||||||
|
borderWidth: 1,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
z: 2,
|
||||||
|
data: this.chartObj.yData1,
|
||||||
|
animationDelay: 500,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.chartObj.legend[1],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
color: this.chartObj.color[1][0],
|
||||||
|
data: this.chartObj.yData2,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[1][1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[1][2],
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.chartObj.legend[1] + "2",
|
||||||
|
type: "scatter",
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
symbol: "roundRect",
|
||||||
|
symbolSize: [20, 4], // 进度条白点
|
||||||
|
symbolOffset: [12, 0],
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
barBorderRadius: [10, 10, 10, 10],
|
||||||
|
color: "#FFE16B",
|
||||||
|
shadowColor: "rgba(255, 255, 255, 1)",
|
||||||
|
shadowBlur: 6,
|
||||||
|
borderWidth: 1,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
z: 2,
|
||||||
|
data: this.chartObj.yData2,
|
||||||
|
animationDelay: 300,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<div class="enterpriseTopic">
|
||||||
|
<head-wrap title="人员安全风险评估"></head-wrap>
|
||||||
|
<div class="enterpriseTopicBody">
|
||||||
|
<div class="screenRow mb18">
|
||||||
|
<div class="screenCol mr18">
|
||||||
|
<div class="screenName">
|
||||||
|
<div class="screenIcon"></div>
|
||||||
|
<div class="screenNameText">人防数据</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenChart">
|
||||||
|
<lineOne :chartObj="tlObj"></lineOne>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenCol mr18">
|
||||||
|
<div class="screenName">
|
||||||
|
<div class="screenIcon"></div>
|
||||||
|
<div class="screenNameText">物品使用情况</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenChart">
|
||||||
|
<barFour :chartObj="tmObj"></barFour>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenCol">
|
||||||
|
<div class="screenName">
|
||||||
|
<div class="screenIcon"></div>
|
||||||
|
<div class="screenNameText">列管物品异常分析</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenRow screenRowBtm">
|
||||||
|
<div class="screenCol mr20">
|
||||||
|
<div class="screenCol">
|
||||||
|
<div class="screenName">
|
||||||
|
<div class="screenIcon"></div>
|
||||||
|
<div class="screenNameText">放射源物品</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenCol">
|
||||||
|
<div class="screenName">
|
||||||
|
<div class="screenIcon"></div>
|
||||||
|
<div class="screenNameText">民用枪支</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import headWrap from "@/views/home/head.vue";
|
||||||
|
import lineOne from "@/loveflow/components/echart/line/one.vue";
|
||||||
|
import barFour from "@/loveflow/components/echart/bar/four.vue";
|
||||||
|
export default {
|
||||||
|
components: { headWrap, lineOne, barFour },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tlObj: {
|
||||||
|
gridTop: "15%",
|
||||||
|
gridLeft: "8%",
|
||||||
|
yName: "单位：百分比",
|
||||||
|
legendTop: "4%",
|
||||||
|
xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
|
||||||
|
yData: [
|
||||||
|
[31, 41, 28, 87, 32, 12, 97, 79],
|
||||||
|
[51, 52, 68, 57, 12, 72, 57, 39],
|
||||||
|
[91, 71, 98, 59, 61, 72, 78, 69],
|
||||||
|
[81, 87, 21, 56, 10, 19, 82, 91],
|
||||||
|
],
|
||||||
|
name: "人防数据",
|
||||||
|
legend: ["危化品", "放射物品", "民爆物品", "民用枪支"],
|
||||||
|
color: [
|
||||||
|
["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
|
||||||
|
["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
|
||||||
|
["#FF8A5A", "rgba(255,138,90,0.1)", "rgba(255,138,90,0.1)"],
|
||||||
|
["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tmObj: {
|
||||||
|
xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
|
||||||
|
yData1: [23, 24, 13, 21, 33, 14, 32, 12],
|
||||||
|
yData2: [13, 34, 23, 11, 23, 24, 12, 32],
|
||||||
|
legend: ["易制爆物品", "剧毒物品"],
|
||||||
|
name: "物品使用情况",
|
||||||
|
color: [
|
||||||
|
["#09C8F5", "rgba(9,200,245,0.9)", "rgba(9,200,245,0)"],
|
||||||
|
["#FFD16A", "rgba(255,209,106,0.9)", "rgba(255,209,106,0)"],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.enterpriseTopic {
|
||||||
|
height: 100%;
|
||||||
|
background: url("~@/assets/images/topic/allback.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.enterpriseTopicBody {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 16px;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
height: calc(100% - 110px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.screenRow {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
.screenCol {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: url("~@/assets/images/topic/pcolT.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenRowBtm {
|
||||||
|
.screenCol {
|
||||||
|
background: url("~@/assets/images/topic/pcolB.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.enterpriseTopic {
|
||||||
|
.enterpriseTopicBody {
|
||||||
|
.screenRow {
|
||||||
|
.screenCol {
|
||||||
|
.screenName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: vh(6);
|
||||||
|
height: vh(36);
|
||||||
|
font-size: vh(16);
|
||||||
|
color: #d9e7ff;
|
||||||
|
.screenIcon {
|
||||||
|
width: vh(24);
|
||||||
|
height: vh(24);
|
||||||
|
background: url("~@/assets/images/screen/riskIcon.png") no-repeat
|
||||||
|
center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.screenNameText {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenChart {
|
||||||
|
height: calc(100% - 3.3333vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||