|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<!-- 底部导航栏 -->
|
|
|
- <div class="first-right l_Dialog tablebk">
|
|
|
+ <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">
|
|
@@ -19,6 +19,7 @@
|
|
|
<div class="jc_content tablecolor">
|
|
|
<div class="jc_padding">
|
|
|
<div class="xian2 btncolor tablefocus ">
|
|
|
+ <!-- -->
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
style="width: 100%"
|
|
@@ -48,11 +49,45 @@
|
|
|
<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> -->
|
|
@@ -60,6 +95,12 @@
|
|
|
</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>
|
|
@@ -67,13 +108,20 @@ 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"
|
|
|
-let firstshow = ref(true);
|
|
|
-let activeNamesf = ref(["1"]);
|
|
|
+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: '检测点',
|
|
@@ -96,6 +144,165 @@ const tableData = [
|
|
|
|
|
|
|
|
|
]
|
|
|
-defineExpose({});
|
|
|
+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></style>
|
|
|
+<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>
|