fj-dc-ui/.svn/pristine/bc/bcf82db06db70174f58b1b463f219d7e8f8bed42.svn-base

<template>
  <div class="container">
    <div class="left-section">
      <div style="height: 50%;display: flex;flex-direction: column;">
        <div style="display: flex;align-items: center;padding-top: 1%;height: 20px;">
            <div style="height: 100%;background-color:#4FAFCB;width: 2px;"></div>
            <div style="margin-left: 10px;">保险公司承保数量</div>
        </div>
        <div style="display: flex;align-items: center;height: 20px;margin-top: 5%;">
          <el-select @change="initBingChart" v-model="valueQunian" placeholder="请选择年份" style="width: 30%;">
            <el-option
              v-for="item in optionsYear"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="showAxde" type="primary" style="margin-left: auto;">详情</el-button>
        </div>
        <div id="bing1" style="flex: 1;width: 90%;margin: 0 auto;"></div>
      </div>
      <div style="margin-top: 1%;height: 50%;display: flex;flex-direction: column;">
        <div style="display: flex;align-items: center;padding-top: 1%;height: 20px;">
            <div style="height: 100%;background-color:#4FAFCB;width: 2px;"></div>
            <div style="margin-left: 10px;">保险公司承保趋势统计</div>
        </div>
        <el-select @change="initZhu1Chart" v-model="valueZhu1nian" placeholder="请选择年份" style="margin-top: 5%;width: 30%;">
          <el-option
            v-for="item in optionsYear"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div id="zhu1" style="flex: 1;width: 90%;margin: 0 auto;"></div>
      </div>
    </div>
    <div class="middle-section" style='margin-left: 1%;display: flex;flex-direction: column;height: 100%;'>
      <div style="height: 50%;display: flex;flex-direction: column;">
        <div style="display: flex;align-items: center;padding-top: 1%;height: 20px;">
            <div style="height: 100%;background-color:#4FAFCB;width: 2px;"></div>
            <div style="margin-left: 10px;">安责险完成情况</div>
        </div>
        <div style="display: flex;align-items: center;height: 20px;margin-top: 5%;">
          <el-select @change="initZhu2Chart" v-model="valueZhu2nian" placeholder="请选择年份" style="width: 30%;">
            <el-option
              v-for="item in optionsYear"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="showAxCom" type="primary" style="margin-left: auto;">详情</el-button>
        </div>
        <el-table
          :data="tableDataAnCom"
          :height="tableHeight"
          style="flex: 1;width: 100%;margin-top:2%;"
        >
          <el-table-column
            prop="AD_NAME"
            label="地区"
          ></el-table-column>
          <el-table-column
            prop="PROJECT_CNT"
            label="项目个数"
          ></el-table-column>
          <el-table-column
            prop="UNDERWRITING_CNT"
            label="保险承保个数"
          ></el-table-column>
          <el-table-column
            prop="COMPLETION_CNT"
            label="完成情况"
          ></el-table-column>
        </el-table>
      </div>
      <div id="zhu2" style="height: 50%;border-top: 1px solid #e0e0e0;box-sizing: border-box;">

      </div>
    </div>
    <!-- 弹窗展示安全保险详情 -->
    <el-dialog
      title="安全保险详情"
      :visible.sync="showAxDialog"
      width="90%"
      height="90%"
      :fullscreen="false"
    >
      <DuChaTianBaoIndexAx />
    </el-dialog>
    <el-dialog
      title="六项机制详情"
      :visible.sync="showLxDialog"
      width="90%"
      height="90%"
      :fullscreen="false"
    >
      <DuChaTianBaoIndexLx />
    </el-dialog>
    <div class="right-section" style='margin-left: 1%;'>
        <div style="height: 50%;display: flex;flex-direction: column;">
            <div style="display: flex;align-items: center;padding-top: 1%;height: 20px;">
            <div style="height: 100%;background-color:#4FAFCB;width: 2px;"></div>
            <div style="margin-left: 10px;">六项机制完成情况</div>
        </div>
        <div style="display: flex;align-items: center;height: 20px;margin-top: 5%;">
          <el-select @change="initZhu3Chart" v-model="valueZhu3nian" placeholder="请选择年份" style="width: 30%;">
            <el-option
              v-for="item in optionsYear"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="showLxCom" type="primary" style="margin-left: auto;">详情</el-button>
        </div>
        <el-table
          :data="tableDataLiuCom"
          :height="tableHeight"
          style="flex: 1;width: 100%;margin-top: 2%;"
        >
          <el-table-column
            prop="AD_NAME"
            label="地区"
          ></el-table-column>
          <el-table-column
            prop="PROJECT_CNT"
            label="项目个数"
          ></el-table-column>
          <el-table-column
            prop="COMPLETION_CNT"
            label="完成个数"
          ></el-table-column>
        </el-table>
      </div>
      <div id="zhu3" style="height: 50%;border-top: 1px solid #e0e0e0;box-sizing: border-box;">

      </div>
    </div>
    <el-dialog
      title="安险详情"
      :visible.sync="dialogVisible"
      width="80%">
      <!-- 搜索条件 -->
      <div style="display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap;">
        <el-input
          v-model="searchForm.name"
          placeholder="工程名称"
          style="width: 200px;">
        </el-input>
        <addvSearch
          v-model="searchForm.adName"
          :maxHeight='300'
          :maxWidth='250'
          :rootAddCode='curAdcode_long'
          :level='"3"'
          placeholder="地区"
          :nameOrCode="'name'"
        ></addvSearch>
        <el-input
          v-model="searchForm.insuranceCompany"
          placeholder="保险名称"
          style="width: 200px;">
        </el-input>
        <el-button
          type="primary"
          @click="showAxde"
          size="mini"
          style="height: 32px; align-self: center;">
          搜索
        </el-button>
        <!-- <el-button
          @click="resetSearch"
          style="height: 32px; align-self: center;">
          重置
        </el-button> -->
      </div>
      <el-table
          ref="table"
          border
          :data="tableDataAn"
          style="width: 100%"
          v-loading="expLoading">
          <el-table-column
              prop="name"
              label="工程名称">
          </el-table-column>
          <el-table-column
              prop="adName"
              label="地区">
          </el-table-column>
          <el-table-column
              prop="insuranceCompany"
              label="保险名称">
          </el-table-column>
          <el-table-column
              prop="insuranceContactPerson"
              label="保险机构联系人">
          </el-table-column>
          <el-table-column
              prop="insuranceContactPhone"
              label="保险机构联系电话"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="policyholder"
              label="投保人">
          </el-table-column>
          <el-table-column
              prop="policyholderPhone"
              label="投保人联系电话">
          </el-table-column>
          <el-table-column
              prop="serviceUnitContactPerson"
              label="服务单位">
          </el-table-column>
          <el-table-column
              prop="serviceUnitContactPhone"
              label="服务单位联系电话">
          </el-table-column>
        </el-table>
        <div style="text-align: center; margin-top: 20px;">
          <el-pagination
            layout="prev, pager, next"
            :current-page="currentPageAx"
            @current-change="handleCurrentChangeAx"
            :total="totalAx">
          </el-pagination>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '../../utils/gw_ajax_request.js'
import DuChaTianBaoIndexAx from './duChaTianBaoIndex_ax.vue'
import DuChaTianBaoIndexLx from './duChaTianBaoIndex_lx.vue'
import addvSearch from "@widget/addvSearch.vue"
import {curAdcode_short,curAdcode_long} from '@util/global_variable.js'
export default {
  name: 'DuChaTianBaoIndexLxShouye',
  components: {
    DuChaTianBaoIndexAx,
    DuChaTianBaoIndexLx,
    addvSearch
  },
  data() {
    return {
      tableDataAn:[],
      tableDataLiuCom:[],
      tableHeight: window.innerHeight - 304,
      dialogVisible: false,
      totalAx: 0,
      currentPageAx: 1,
      showLxDialog: false,
      showAxDialog: false,
      searchForm: {
        name: '',
        adName: '',
        insuranceCompany: ''
      },
      valueZhu1nian: '2026',
      tableDataAnCom:[],
      valueZhu2nian: '2026',
      valueZhu3nian: '2026',
      valueQunian: '2026',
      optionsYear: [
        { value: '2026', label: '2026' },
        { value: '2025', label: '2025' },
        { value: '2024', label: '2024' },
        { value: '2023', label: '2023' },
        { value: '2022', label: '2022' },
        { value: '2021', label: '2021' }
      ],
      // 表格数据
      tableData: [
        { name: '数据1', value: 1234, status: '正常' },
        { name: '数据2', value: 5678, status: '正常' },
        { name: '数据3', value: 9012, status: '异常' },
        { name: '数据4', value: 3456, status: '正常' },
        { name: '数据5', value: 7890, status: '正常' }
      ]
    }
  },
  computed: {
    curAdcode_long(){
      return curAdcode_long
    },
  },
  mounted() {
    // 初始化图表
    this.initBingChart()
    this.initZhu1Chart()
    this.initZhu2Chart()
    this.initZhu3Chart()
    
    // 响应窗口大小变化
    window.addEventListener('resize', () => {
      this.bingChart && this.bingChart.resize()
      this.zhu1Chart && this.zhu1Chart.resize()
      this.zhu2Chart && this.zhu2Chart.resize()
      this.zhu3Chart && this.zhu3Chart.resize()
    })
  },
  beforeDestroy() {
    // 销毁图表
    this.bingChart && this.bingChart.dispose()
    this.zhu1Chart && this.zhu1Chart.dispose()
    this.zhu2Chart && this.zhu2Chart.dispose()
    this.zhu3Chart && this.zhu3Chart.dispose()
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    showLxCom(){
      this.showLxDialog = true
    },
    showAxCom(){
      this.showAxDialog = true
    },
    handleCurrentChangeAx(val) {
      this.currentPageAx = val
      this.showAxde()
    },
    showAxde(){
      request.get('/att/project/insurance/anze/underwriting/list',{
        params: {
          'year': this.valueQunian,
          pageNum: this.currentPageAx,
          pageSize: 10,
          name: this.searchForm.name,
          adName: this.searchForm.adName,
          insuranceCompany: this.searchForm.insuranceCompany
        }
      }).then(response => {
        this.tableDataAn = response.data.list
        this.totalAx = response.data.total
        this.dialogVisible = true
      })
    },
    resetSearch(){
      this.searchForm = {
        name: '',
        adName: '',
        insuranceCompany: ''
      }
      this.currentPageAx = 1
      this.showAxde()
    },
    async initBingChart() {
      let chartData
      await request.get('/bis/insp/anze/statistics/insurer/underwritingCount',{params:{'year':this.valueQunian}}).then(response => {
        // 处理响应数据，更新图表数据
        const data = response.data
        // 假设返回的数据格式为 { company: '中国平安', value: 335 }
        chartData = data.map(item => ({
          value: item.CNT,
          name: item.INSURANCE_COMPANY
        }))
        console.log('获取保险数据成功:', chartData)
      }).catch(error => {
        console.error('获取保险数据失败:', error)
      })
      this.bingChart = echarts.init(document.getElementById('bing1'))
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          bottom: '2%',
          left: 'center',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: 8
          }
        },
        series: [
          {
            name: '承保数量',
            type: 'pie',
            radius: ['30%', '55%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: true,
              formatter: '{b}: {d}%',
              fontSize: 8
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                fontWeight: 'bold'
              }
            },
            data: chartData
          }
        ]
      }
      this.bingChart.setOption(option)
    },
    // 初始化zhu1柱状图
    async initZhu1Chart() {
      let chartDataX
      let chartDataY
      await request.get('/bis/insp/anze/statistics/insurer/underwritingCount',{params:{'year':this.valueZhu1nian}}).then(response => {
        // 处理响应数据，更新图表数据
        const data = response.data
        // 假设返回的数据格式为 { company: '中国平安', value: 335 }
        chartDataX = data.map(item => ( item.INSURANCE_COMPANY
        ))
        chartDataY = data.map(item => ( item.CNT
        ))
        console.log('获取保险数据成功:', chartDataY)
      }).catch(error => {
        console.error('获取保险数据失败:', error)
      })
      this.zhu1Chart = echarts.init(document.getElementById('zhu1'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartDataX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '承保数量',
            type: 'bar',
            data: chartDataY,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      this.zhu1Chart.setOption(option)
    },
    // 初始化zhu2柱状图
    async initZhu2Chart() {
      var chartDataX
      var chartDataY
      await request.get('/bis/insp/anze/statistics/completion',{params:{'year':this.valueZhu2nian}}).then(response => {
        this.tableDataAnCom = response.data
        chartDataX = response.data.map(item => ( item.AD_NAME
        ))
        chartDataY = response.data.map(item => ( item.COMPLETION_CNT
        ))
      })
      this.zhu2Chart = echarts.init(document.getElementById('zhu2'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 取消图例
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis:{
          type: 'category',
          data: chartDataX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '未承保',
            type: 'bar',
            data: chartDataY,
            itemStyle: {
              color: '#ff4d4f'
            }
          }
        ]
      }
      this.zhu2Chart.setOption(option)
    },
    // 初始化zhu3柱状图
    async initZhu3Chart() {
      var chartDataX
      var chartDataY
      await request.get('/bis/insp/sixme/statistics/completion',{params:{'year':this.valueZhu3nian}}).then(response => {
        this.tableDataLiuCom = response.data
        chartDataX = response.data.map(item => ( item.AD_NAME
        ))
        chartDataY = response.data.map(item => ( item.COMPLETION_CNT
        ))
      })
      this.zhu3Chart = echarts.init(document.getElementById('zhu3'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartDataX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '保费收入',
            type: 'bar',
            data: chartDataY,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff7a45' },
                { offset: 1, color: '#ff4757' }
              ]),
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }
      this.zhu3Chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 95vh;
  display: flex;
  flex-direction: row;
}

.left-section {
  width: 20%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.middle-section {
  width: 39%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right-section {
  width: 39%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

h2 {
  margin-top: 0;
  color: #333;
}

p {
  color: #666;
}
</style>