zhzf/client/src/components/IndustryTradeComponents/InherentRisk.vue

<template>
  <div class="inherent-risk-container">
    <div class="inherent-risk-top">
      <div class="inherent-risk-top-item border-base radius-base ccw" v-for="(item, index) in gyfxList" :key="index">
        <img :src="item.img" alt="" />
        <div class="inherent-risk-top-text">
          <div class="fs-16 tcw">{{ item.name }}</div>
          <div v-if="item.lessValue" class="fs-22 ff-AvenirMedium">
            <span style="color: #f4551c">{{ item.lessValue }}</span>
            /
            {{ item.value }}
          </div>
          <div v-else class="fs-22 ff-AvenirMedium">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <index-title titleName="危险工艺"></index-title>
    <div class="dangerous-charts">
      <public-chart ref="publicChart" :option="wxgyOptions" theme="vab-echarts-theme" />
      <div class="legend-content ccw">
        <div v-for="(item, index) in wxgyList" :key="index" style="">
          <span class="fs-14">
            <span class="circle" :style="{ background: item.itemStyle.color }"></span>
            {{ item.name }}
          </span>
          <span class="ff-AvenirMedium">{{ item.value }}</span>
        </div>
      </div>
    </div>
    <index-title titleName="风险对象统计"></index-title>
    <div class="dangerous-charts">
      <public-chart ref="publicChartone" :option="fxdxOptions" theme="vab-echarts-theme" />
      <div class="legend-content ccw legendone-content">
        <div v-for="(item, index) in fxdxList" :key="index" style="">
          <span class="fs-14">
            <span class="circle" :style="{ background: item.itemStyle.color }"></span>
            {{ item.name }}
          </span>
          <span class="ff-AvenirMedium">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref, reactive, toRefs } from 'vue'

  import wxgy from './json/wxgy.json'
  import fxdx from './json/fxdx.json'

  import zdbw from '@/assets/image/zdbw.png'
  import wxy from '@/assets/image/wxy.png'

  const state = reactive({
    gyfxList: [
      { name: '重点部位', value: 136, img: zdbw },
      { name: '危险源', value: 136, img: wxy },
    ],
    wxgyList: [
      { name: '裂解（裂化）工艺', value: 78, itemStyle: { color: '#F59E0B' } },
      { name: '合成氨工艺', value: 12, itemStyle: { color: '#14B8A6' } },
      { name: '新型煤化工工艺', value: 19, itemStyle: { color: '#3B82F6' } },
      { name: '烷基化工艺', value: 25, itemStyle: { color: '#6366F1' } },
      { name: '氧化工艺', value: 43, itemStyle: { color: '#EC4899' } },
    ],
    fxdxList: [
      { name: '重大风险', value: 78, itemStyle: { color: '#F59E0B' } },
      { name: '较大风险', value: 12, itemStyle: { color: '#14B8A6' } },
      { name: '一般风险', value: 19, itemStyle: { color: '#3B82F6' } },
      { name: '低风险', value: 43, itemStyle: { color: '#6366F1' } },
      { name: '未评估', value: 25, itemStyle: { color: '#EC4899' } },
    ],
    wxgyOptions: wxgy,
    fxdxOptions: fxdx,
  })

  const { gyfxList, wxgyList, fxdxList, wxgyOptions, fxdxOptions } = toRefs(state)
  onMounted(() => {
    wxgyOptions.value.series.data = wxgyList.value
    fxdxOptions.value.series.data = fxdxList.value
  })
</script>

<style lang="scss" scoped>
  .inherent-risk-container {
    height: calc(548px - 51px);
    padding: 12px 14px;
    box-sizing: border-box;

    .inherent-risk-top {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 18%;

      .inherent-risk-top-item {
        display: flex;
        align-items: center;
        width: calc(50% - 16px);
        height: calc(100% - 8px);
        padding: 12px 16px;
        margin: 8px 8px 0 8px;
        box-sizing: border-box;

        img {
          width: 56px;
          height: 56px;
          margin-right: 16px;
        }

        .inherent-risk-top-text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }

    .index-title {
      margin-left: 0 !important;
    }

    .dangerous-charts {
      display: flex;
      width: 100%;
      height: calc(41% - 43px);

      .echarts {
        width: 50%;
        height: 100%;
      }

      .legend-content {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 78%;
          margin-bottom: 8px;
        }

        .circle {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 2px;
          border-radius: 50%;
        }
      }

      .legendone-content {
        div {
          width: 55%;
        }
      }
    }
  }
</style>