disaster_web3/src/view/index/first-left.vue

<template>
  <!-- 底部导航栏 -->
  <div class="first-right l_Dialog tablebk"  v-show="firstshow">
    <el-aside width="340px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="firstshow">
      <div class="demo-collapse jiancedian1 asideg1 jc_header collapseeion jianstyle">
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item name="1" class="imgneon">
            <template #title>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              灾害信息展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
              <div class="zongji">
                <div class="zongjili img1">1<span>个</span></div>
                <div class="zongjili img2">12<span>个</span></div>
              </div>
              <div class="asides_content">
                <div class="jc_content tablecolor">
                  <div class="jc_padding">
                    <div class="xian2 btncolor tablefocus ">
                      <!--  -->
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                        @row-click="handleDelete($event)"
                        :max-height="tableHeight"
                      >
                        <el-table-column prop="date" label="监测点"  />
                        <el-table-column prop="name" label="水位（m）"   />
                        <el-table-column prop="name"  label="流量（m³/s）" />
                        <el-table-column   prop="state"  label="预警" >
                          <template #default="scope">
                            <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
                            <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
                            <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
                            <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 监测点 -->
              <div>
                <div class="hedse">
              <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
            </div>
            <div class="echart">
            <div id="line" style="width: 1.526rem;height:1.03rem;"></div></div>
            <div class="zongji">
                <div class="zongjili img3">50<span>m</span></div>
                <div class="zongjili img4">2024-03-20<span>14:23:00</span></div>
              </div>
            </div>
            </div>
          </div>
            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
          </el-collapse-item>
        </el-collapse>
        <el-collapse accordion v-model="activeNames" class="bganimation">
          <el-collapse-item name="1" class="imgneon">
            <template #title>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              动画展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
            
              <div class="animation_s">
              <el-slider
                :max="100"
                :min="0"
                v-model="count"
                @change="sliderchange"
              >
              </el-slider>
              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
              <div class="tanniu">
                <div><el-image :src="t1" fit="contain" ></el-image></div>
                <div><el-image :src="t2" fit="contain" ></el-image></div>
                <div><el-image :src="t3" fit="contain" ></el-image></div>
                
              </div>
            </div>
          
            
            </div>
          </div>
            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-aside>
    <!-- 动画 -->
    <!-- <el-aside width="340px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="firstshow">
      <div class="demo-collapse jiancedian1 asideg1 jc_header collapseeion jianstyle">
      
      </div>
    </el-aside> -->
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, } from "vue";
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import * as echarts from 'echarts'
import bt1 from "@/assets/img/Group1376.png"
import bt2 from "@/assets/img/Group1377.png"
import bt3 from "@/assets/img/Group1395.png"
import bt4 from "@/assets/img/Group1396.png"
import t1 from "@/assets/img/t1.png";
import t2 from "@/assets/img/t2.png";
import t3 from "@/assets/img/t3.png";
import t4 from "@/assets/img/t4.png";
let firstshow = ref(false);
let activeNames = ref(["1"]);
let tableHeight = ref(150);
;
let count=ref(60)
const tableData = [
  {
    date: '检测点',
    name: '1',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '检测点',
    name: '1',
    state: '2',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },


]
let myChart;
onMounted(() => {
  window.onresize = function() {
    // 让图表自适应大小
    myChart.resize();
};
  lineChart();
});
const tableRowClassName=()=>{

}
const handleDelete=()=>{

}
const lineChart=()=>{
 myChart = echarts.init(document.getElementById('line'));
  let option = {
     tooltip: {
       trigger: 'axis',
     },
     grid: {
       left: '0',
       right: '0',
       bottom: '10',
       top:'20',
       containLabel: true
     },
     xAxis: [
       {
         type: 'category',
         // boundaryGap: false,
         data: [0,10,20,30,40],
         splitLine: {
           show: false,
         },
         axisLine: {
           lineStyle: {
             type: 'solid',
             color: '#E6E7EC',//左边线的颜色
             width:'1'//坐标线的宽度
           }
         },
         axisLabel: {
           textStyle: {
             color: '#B8CED6',//坐标值得具体的颜色
           }
         }
       }
     ],
     yAxis: [
       {
         type: 'value',
         minInterval:1,
         max: 700,
         splitLine: {
           show: true,
           lineStyle:{
             type:'dashed'
           }
         },
         axisLine: {
           lineStyle: {
             type: 'solid',
              color: '#E6E7EC',//左边线的颜色
             width:1 //坐标线的宽度
           }
         },
         axisLabel: {
          type: 'value',
          // color: '#ACD6FF',
           textStyle: {
          //  color: 'red',//坐标值得具体的颜色
          color: function (value, index) {
            if(value >=300){
              return '#CE0000 '
            } else{
              return  '#ACD6FF'
            }
              // return value >= 120 ? '#CE0000  ': '#ACD6FF';
          }
           
           }
         }
       }
     ],
     color: 'rgba(37, 190, 171, 1)',
     series: [
       {
         name: '',
         type: 'line',
      showSymbol: false,
      smooth: true,
      data: [0,60,120,240,360],
         itemStyle:{
           normal:{
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
               {
                 offset:1, color: '#ACD6FF ' // 0% 处的颜色
               },
               {
                 offset:0.7, color: '#105CF0 '// 100% 处的颜色
               },
               {
                 offset:0.66, color: '#FF7A00 '// 100% 处的颜色
               },
               {
                 offset:0.2, color: '#FF0000 '// 100% 处的颜色
               },
               {
                 offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
               }, 
              
              ],
            
               global: false // 缺省为 false
             }
           }
         },
         lineStyle: {
                    width: 3, // 设置线条宽度
                },

       }
     ]
   }
   myChart.setOption(option);
   window.onresize = function() {
    // 让图表自适应大小
    myChart.resize();
};
 
 
// // 监听窗口大小变化
myChart.dispatchAction({ //设置激活第一个选项
     type: 'showTip',
     seriesIndex: 0,
     dataIndex: 0
   });
}
defineExpose({firstshow});
</script>
<style lang="scss" scoped>
.el-slider {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
}

.tanniu{
display: flex;
justify-content:space-between;
align-items: center;

}
</style>