|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <i class="icon-line" />
|
|
|
+ <div class="text">当前风险等级</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <div :class="getClass1(currentData)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <i class="icon-line" />
|
|
|
+ <div class="text">企业风险分析</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content2">
|
|
|
+ <Chart :option="option1" style="flex: 1; height:240px" />
|
|
|
+ <div class="legend-box">
|
|
|
+ <div v-for="(item, index) in legendData" :key="index" class="legend-item">
|
|
|
+ <i class="icon" :style="{backgroundColor: item.color}" />
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text2">{{ item.value }}</div>
|
|
|
+ <div class="text3">{{ item.percent }}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <i class="icon-line" />
|
|
|
+ <div class="text">区域风险排名</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content3">
|
|
|
+ <div v-for="(item, index) in rankData" :key="index" class="item">
|
|
|
+ <i :class="getClass2(item.name)" />
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text-box">
|
|
|
+ <i :class="getLevelClass(item.level)" />
|
|
|
+ {{ item.level }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {onMounted, ref} from "vue";
|
|
|
+import {chartOption5} from "@/views/disasterRiskMonitor/chartOptions";
|
|
|
+
|
|
|
+let legendData = ref([]);
|
|
|
+let currentData = ref('低风险');
|
|
|
+let rankData = ref([]);
|
|
|
+let option1 = ref(chartOption5);
|
|
|
+const getClass1 = (data) => {
|
|
|
+ let res = 'dashboard-box1'
|
|
|
+ if (data === '一般风险') {
|
|
|
+ res = 'dashboard-box2';
|
|
|
+ } else if (data === '较大风险') {
|
|
|
+ res = 'dashboard-box3';
|
|
|
+ } else if (data === '重大风险') {
|
|
|
+ res = 'dashboard-box4';
|
|
|
+ }
|
|
|
+ return res
|
|
|
+}
|
|
|
+const getClass2 = (name) => {
|
|
|
+ let res = 'icon-mn'
|
|
|
+ if (name === '电白区') {
|
|
|
+ res = 'icon-db';
|
|
|
+ } else if (name === '高州市') {
|
|
|
+ res = 'icon-gz';
|
|
|
+ } else if (name === '化州市') {
|
|
|
+ res = 'icon-hz';
|
|
|
+ } else if (name === '信宜市') {
|
|
|
+ res = 'icon-xy';
|
|
|
+ } else if (name === '滨海新区') {
|
|
|
+ res = 'icon-bh';
|
|
|
+ } else if (name === '高新区') {
|
|
|
+ res = 'icon-gx';
|
|
|
+ }
|
|
|
+ return res
|
|
|
+}
|
|
|
+const getLevelClass = () => {
|
|
|
+
|
|
|
+}
|
|
|
+const initData = () => {
|
|
|
+ const data = [{
|
|
|
+ name: '离线',
|
|
|
+ value: 3,
|
|
|
+ percent : 2
|
|
|
+ },{
|
|
|
+ name: '低风险',
|
|
|
+ value: 563,
|
|
|
+ percent : 80
|
|
|
+ },{
|
|
|
+ name: '一般风险',
|
|
|
+ value: 10,
|
|
|
+ percent : 4
|
|
|
+ },{
|
|
|
+ name: '较大风险',
|
|
|
+ value: 21,
|
|
|
+ percent : 12
|
|
|
+ },{
|
|
|
+ name: '重大风险',
|
|
|
+ value: 3,
|
|
|
+ percent : 2
|
|
|
+ }];
|
|
|
+ let seriesData = [];
|
|
|
+ const color= ['#8984ff', '#56e09f', '#2c81ff', '#fab21b', '#ff7a0d']
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ data[i].color = color[i];
|
|
|
+ seriesData.push({
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 8,
|
|
|
+ shadowBlur: 20,
|
|
|
+
|
|
|
+ borderRadius:20,
|
|
|
+ borderColor:color[i],
|
|
|
+ shadowColor: color[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ legendData.value = data;
|
|
|
+ option1.value.series[0].data = seriesData;
|
|
|
+ rankData.value = [
|
|
|
+ { name: '化州市', level: '重大风险' },
|
|
|
+ { name: '信宜市', level: '较大风险' },
|
|
|
+ { name: '茂南区', level: '一般风险' },
|
|
|
+ { name: '电白区', level: '一般风险' },
|
|
|
+ { name: '高州市', level: '一般风险' },
|
|
|
+ { name: '滨海新区', level: '低风险' },
|
|
|
+ { name: '高新区', level: '低风险' }
|
|
|
+ ];
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ initData();
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ height: calc(100vh);
|
|
|
+ padding: 16px;
|
|
|
+ .card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #EAEDF7;
|
|
|
+ box-shadow: 0 0 4px 0 #4554661a;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-image: linear-gradient(to bottom, #f3f7fd 0%, #f7fafe 20px, #fcfdff 50px, #ffffff 50px, #ffffff 100%);
|
|
|
+ margin-top: 16px;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .card-header {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #414F64;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 26px;
|
|
|
+ padding: 11px 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon-line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 16px;
|
|
|
+ background: url('@/assets/images/line.jpg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .dashboard-box1 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/dashboard1.png') no-repeat;
|
|
|
+ }
|
|
|
+ .dashboard-box2 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/dashboard2.png') no-repeat;
|
|
|
+ }
|
|
|
+ .dashboard-box3 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/dashboard3.png') no-repeat;
|
|
|
+ }
|
|
|
+ .dashboard-box4 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/dashboard4.png') no-repeat;
|
|
|
+ }
|
|
|
+ .dashboard-box1, .dashboard-box2, .dashboard-box3, .dashboard-box4 {
|
|
|
+ width: 246px;
|
|
|
+ height: 246px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ .legend-box {
|
|
|
+ width: 150px;
|
|
|
+ .legend-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 0;
|
|
|
+ .icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #414F64;
|
|
|
+ width: 59px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ width: 50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #414F64;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .text3 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #414F64;
|
|
|
+ text-align: right;
|
|
|
+ width: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content3 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 22px;
|
|
|
+ width: 312px;
|
|
|
+ height: 56px;
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/box.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .icon-mn {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/mn.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-db {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/db.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-gz {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/gz.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-hz {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/hz.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-xy {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/hz.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-bh {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/bh.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-gx {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/gx.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon-mn, .icon-db, .icon-gz, .icon-hz, .icon-xy, .icon-bh, .icon-gx {
|
|
|
+ width: 42px;
|
|
|
+ height: 44px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
