<template>
  <div style="background-color:  #F7F7F7;padding-top:1% ;">
    <div style="margin-left: 1%;width: 98%;display: flex;" :style="{'height':heightAll*0.3+'px'}">
      <div style="width: 40%;height: 100%;">
        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
          <div style="display: flex;align-items: center;font-weight: bold;">
            <div style="">今日模型服务调度次数</div>
            <div style="color: #79bbff;margin-left: 1%;"> 356 </div>
            <div style="margin-left: 1%;"> 次 </div>
          </div>
          <div id="top1" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">

          </div>
        </el-card>
      </div>
      <div style="width: 30%;height: 100%;margin-left: 1%;">
        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
          <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
            <div style="">模型服务调用次数</div>
            <div style="width: 50%;margin-left: 20%;">
              <el-select
                v-model="value"
                class="m-2"
                placeholder="长江水利委员会"
                style="width: 100%;;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div id="top2"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">

          </div>
        </el-card>
      </div>
      <div style="width: 30%;height: 100%;;margin-left: 1%">
        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
          <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
            <div style="">模型服务类型总数 </div>
            <div style="color: #79bbff;margin-left: 1%;"> 123 </div>
            <div style="margin-left: 1%;"> 次 </div>
          </div>
          <div id="top3"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.25+'px'}">

          </div>
        </el-card>
      </div>
    </div>
    <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;" :style="{'height':heightAll*0.13+'px'}">
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #477ACF;;height: 70%">
          358
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #477ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          当前服务在线总数
        </div>
      </div>
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
          78%
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          服务在线比率
        </div>
      </div>
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #2DBEA2;;height: 70%">
          良
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #2DBEA2;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          模型服务支撑健康指数
        </div>
      </div>
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #487ACF;;height: 70%">
          新安江模型
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #487ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          当月热点服务
        </div>
      </div>
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
          一维水动力
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          最常配置服务
        </div>
      </div>
      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #4BBA9B;;height: 70%">
          78%
        </div>
        <div style="display: flex;align-items: center;justify-content: center;background-color: #4BBA9B;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
          服务在线比率
        </div>
      </div>
    </div>
    <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%" :style="{'height':heightAll*0.38+'px'}">
      <el-card shadow="always" class="box-card" style="width:60%;height: 100%;">
        <div style="width: 100%;display: flex;justify-content: flex-end;">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="今日"
            style="width: 20%;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="bt1"  style="width: 100%;margin-left: 0%;margin-top: 1%;;" :style="{'height':heightAll*0.3+'px'}">

        </div>
      </el-card>
      <el-card shadow="always" class="box-card" style="width:39%;height: 100%;margin-left: 1%;">
        <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
          <div style="">预报服务综合评价 </div>
        </div>
        <div id="bt2"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.3+'px'}">

        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const listHelp = [
]
const heightAll = window.innerHeight
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']

function inintChartTop1(){
  var chartDom = document.getElementById('top1');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {
      data: ['长江委', '黄河委', '珠江委', '中国水科院', '淮河委'],
      top:'90%'
    },
    xAxis: {
      splitLine: { show: false }
      // type: 'category',
      // data: ['长江委 ', '黄河委', '珠江委', '中国水科院', '淮河委']
    },
    yAxis: {
      type: 'value',
      splitLine: { show: false }
    },
    series: [
      {
      name: '长江委',
      type: 'line',
      color:'#337ecc',
      data: [[0,10],[2,13],[4,20],[6,12],[8,12.5],[10,18],[12,58],[14,21],[16,12]],
      smooth: true
    },
    {
      name: '黄河委',
      type: 'line',
      smooth: true,
      color:'#79bbff',
      data: [[0,10],[2,15],[4,25],[6,16],[8,18],[10,8],[12,55],[14,60],[16,54]]
    },
    {
      name: '珠江委',
      type: 'line',
      color:'#a0cfff',
      smooth: true,
      data:[[0,10],[2,20],[4,20],[6,12],[8,17],[10,25],[12,15],[14,45],[16,5]]
    },
    {
      name: '中国水科院',
      type: 'line',
      smooth: true,
      color:"#95d475",
      data: [[0,10],[2,44],[4,20],[6,12],[8,14],[10,10],[12,34],[14,13],[16,45]]
    },
    {
      name: '淮河委',
      smooth: true,
      type: 'line',
      color:'#e1f3d8',
      data: [[0,10],[2,31],[4,20],[6,12],[8,20],[10,20],[12,45],[14,75],[16,11]]
    }
    ]
  };
  
  option && myChart.setOption(option);

}
function initChartTop2(){
  var chartDom = document.getElementById('top2');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '90%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{c}',
        },  
        labelLine: {
          show: true
        },
        color:['#80D0F8','#3384C2','#14D3D4','#69F3C0'],
        data: [
          { value: 200, name: '新安江' },
          { value: 250, name: '陕北模型' },
          { value: 30, name: '需水模型' },
          { value: 300, name: '一维水动力' },
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
function initChartTop3(){
  var chartDom = document.getElementById('top3');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '90%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{c}',
        },  
        labelLine: {
          show: true
        },
        color:['#529b2e','#95d475','#b3e19d','#d1edc4'],
        data: [
          { value: 200, name: '洪水演进' },
          { value: 250, name: '工程' },
          { value: 30, name: '需水模型' },
          { value: 300, name: '一维水动力' },
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
function initChartBottom1(){
  var chartDom = document.getElementById('bt1');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      splitLine: { show: false },
      data: ['新安江模型', '一维水动力模型', '二维水动力模型', '降雨预报模型', 'API模型', '大数据洪涝预报模型']
    },
    yAxis: {
      type: 'value',
      splitLine: { show: false }
    },
    series: [
      {
        data: [123, 103, 89, 89, 56, 46],
        type: 'bar',
        label: { 
      show: true,   // 启用标签
      position: 'top' // 位置：顶部（可选 'inside'、'bottom' 等）
    }
      }
    ]
  };

  option && myChart.setOption(option);
}
function initChartBottom2(){
  var chartDom = document.getElementById('bt2');
var myChart = echarts.init(chartDom);
var option;

option = {
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};

option && myChart.setOption(option);
}
onMounted(() => {
  inintChartTop1()
  initChartTop2()
  initChartTop3()
  initChartBottom1()
  initChartBottom2()
});
</script>
<style scoped lang="scss">
.boxShadow{
  box-shadow: 
    -8px 0 15px -10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
    8px 0 15px -10px rgba(0, 0, 0, 0.1);  /* 右侧阴影 */
  transition: box-shadow 0.3s ease;

}
</style>