110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<div class="lurking-peril-container ccw">
|
|
<div class="lurking-peril-top">
|
|
<public-chart ref="publicChart" :option="yhzlOptions" theme="vab-echarts-theme" />
|
|
<div class="legend-content ccw">
|
|
<span style="color: #8c8c8c; margin-bottom: 5px">隐患总数</span>
|
|
<span style="margin-bottom: 5px">
|
|
<span class="fs-22 ccw ff-AvenirMedium">2400</span>
|
|
<span> 处</span>
|
|
</span>
|
|
<div v-for="(item, index) in yhzlList" :key="index" style="">
|
|
<span>
|
|
<span class="circle" :style="{ background: item.itemStyle.color }"></span>
|
|
{{ item.name }}
|
|
</span>
|
|
<span class="ff-AvenirMedium" style="margin: 0 8px">{{ item.value }}</span>
|
|
处
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lurking-peril-bottom">
|
|
<div class="lurking-peril-bottom-item radius-base" v-for="(item, index) in yxcyhList" :key="index">
|
|
<span class="fs-18 ff-AvenirMedium">{{ item.value }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref, reactive, toRefs } from 'vue'
|
|
|
|
import yhzl from './json/yhzl.json'
|
|
|
|
const state = reactive({
|
|
yhzlList: [
|
|
{ name: '企业自查', value: 12, itemStyle: { color: '#057AFF' } },
|
|
{ name: '监督检查', value: 12, itemStyle: { color: '#499EFE' } },
|
|
{ name: '公共检查', value: 12, itemStyle: { color: '#A5CFFF' } },
|
|
{ name: '风险检查', value: 12, itemStyle: { color: '#D8EAFF' } },
|
|
],
|
|
yxcyhList: [
|
|
{ name: '隐患已消除', value: 136 },
|
|
{ name: '整改中', value: 136 },
|
|
{ name: '逾期未处置', value: 136 },
|
|
{ name: '往期隐患', value: 136 },
|
|
],
|
|
yhzlOptions: yhzl,
|
|
})
|
|
|
|
const { yhzlList, yhzlOptions, yxcyhList } = toRefs(state)
|
|
onMounted(() => {
|
|
yhzlOptions.value.series.data = yhzlList.value
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.lurking-peril-container {
|
|
height: calc(359px - 51px);
|
|
|
|
.lurking-peril-top {
|
|
display: flex;
|
|
height: 70%;
|
|
|
|
.echarts {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.legend-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 50%;
|
|
padding-left: 15px;
|
|
box-sizing: border-box;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 80%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.circle {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lurking-peril-bottom {
|
|
display: flex;
|
|
height: 25%;
|
|
padding: 0 12px;
|
|
|
|
.lurking-peril-bottom-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: calc(25% - 8px);
|
|
margin: 0 4px;
|
|
background: #f8f8fa;
|
|
}
|
|
}
|
|
}
|
|
</style>
|