loveflow
1 year 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>
|
||||