dust-manage-vue.git

			@@ -1,23 +1,24 @@
			<script>
			import InputSearch from '../../sfc/InputSearch.vue';
			import ExceptionType from '../../sfc/ExceptionType.vue';
			import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
			import DustExceptionText from '../../sfc/DustExceptionText.vue';
			import { useFetch } from '../../utils/fetch.js';
			import { useCommonFunction } from '../../utils/common.js';
			import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'

			import { defineAsyncComponent } from 'vue'
			import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
			import { useCommonFunction } from '../../utils/common.js'
			import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
			import ButtonClick from '@/sfc/ButtonClick.vue'
			import index from '@/utils/exception_common_function/index.js'
			// 异常图形异步组件
			const DustLineChart = defineAsyncComponent(() =>
			import('../../sfc/DustLineChart.vue')
			);
			const DustLineChart = defineAsyncComponent(() => import('./components/DustLineChart.vue'))
			import exceptionApi from '@/api/exceptionApi.js'
			import dayjs from 'dayjs'
			import { ElMessage } from 'element-plus'
			import AnalysisCard from './components/AnalysisCard.vue'

			import dayjs from 'dayjs';
			export default {
			components: {
			TimeSelectWithShortCuts,
			DustExceptionText,
			AreaAndmonitorType
			TimeShortCuts,
			DustLineChart,
			ButtonClick,
			AreaAndmonitorType,
			AnalysisCard
			},
			data() {
			return {
			@@ -26,8 +27,7 @@
			// 站点名称
			name: '',
			// 选择的异常类型
			exceptionName: [],

			exceptionName: []
			},
			beginTime: '',
			endTime: '',
			@@ -37,15 +37,27 @@
			displayData: [],
			// 表格高度
			tableHeight: 400,
			// 表格数据
			// 表格显示
			isTableShow: false,
			// 当前页
			currentPage: 1,
			// 每页条数
			pageSize: 20,
			// 表格的总记录数
			total: 0,

			// 表格查询无数据时
			isNoData: false,

			// 查询按钮无数据时
			isNoData: {
			exception0: true,
			exception1: true,
			exception2: true,
			exception3: true,
			exception4: true,
			exception5: true,
			exception6: true,
			exception7: true
			},
			// eslint-disable-next-line no-undef
			// 对话框显示
			dialogTableVisible: false,
			// 保存异常对应的店铺名称和设备编号
			@@ -66,7 +78,6 @@
			exception6: [],
			// 滑动平均值异常
			exception7: [],


			// 该时段的异常数量
			exception0Num: 0,
			@@ -76,33 +87,27 @@
			exception4Num: 0,
			exception5Num: 0,
			exception6Num: 0,
			exception7Num: 0,
			exception7Num: 0
			},
			// 站点总数量
			siteTotal: 0,

			// 异常的站点总数量
			// exceptionSiteNum:0,

			// 选中表格当前行的数据
			tableCurrentRowData: null,
			// 选中表格当前行的索引
			selectedRowIndex:-2,
			selectedRowIndex: -2,
			// 页面上的按钮加载状态
			loading: {
			// 查询按钮
			queryButton:false,
			// 表格加载中
			tableLoading: false,
			queryButton: false,
			// 表格加载中
			tableLoading: false,
			// 上一条按钮
			preButton: false,
			// 下一条按钮
			afterButton: false,
			// 折线图
			lineChart: false,
			// 异常站点名子文本
			text:false

			lineChart: false
			},

			dialog: {
			@@ -121,216 +126,267 @@
			},

			// 标记位
			flag:{
			flag: {
			// 加载时上下条按钮不能再点击
			banTouch:0,
			banTouch: 0,
			// 0代表分页，1代表不分页
			originClick:0
			originClick: 0
			}

			};
			}
			},
			setup() {
			// provide('search',readonly(form))
			const { backData, error, request } = useFetch();
			const { isExceedOneMonth } = useCommonFunction();
			const { isExceedOneMonth } = useCommonFunction()
			return {
			backData,
			error,
			request,
			isExceedOneMonth
			};
			}
			},
			// 监听判断按钮是否可点击
			watch: {
			selectedRowIndex(newVaue) {
			// 处于表格的最后一条数据设置‘上一条’按钮不可点
			if (newVaue === this.displayData.length - 1) {
			this.dialog.isPreCantouch = true;
			// if (newVaue === this.displayData.length - 1) {
			// this.dialog.isPreCantouch = true
			// //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
			// if (this.dialog.isNextCantouch == true) {
			// this.dialog.isNextCantouch = false
			// }
			// }
			// // 处于表格第一条数据设置‘下一条’按钮不可点
			// else if (newVaue === 0) {
			// this.dialog.isNextCantouch = true
			// //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
			// if (this.dialog.isPreCantouch == true) {
			// this.dialog.isPreCantouch = false
			// }
			// }
			// // 处于表格的中间行将按钮设置为可点击状态
			// else {
			// this.dialog.isPreCantouch = false
			// this.dialog.isNextCantouch = false
			// }
			// 处于表格的最后一条数据设置‘上一条’按钮不可点
			if (newVaue === 0) {
			this.dialog.isPreCantouch = true
			//用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
			if (this.dialog.isNextCantouch == true) {
			this.dialog.isNextCantouch = false;
			this.dialog.isNextCantouch = false
			}
			}
			// 处于表格第一条数据设置‘下一条’按钮不可点
			else if (newVaue === 0) {
			this.dialog.isNextCantouch = true;
			// 处于表格第一条数据设置‘上一条’按钮不可点
			else if (newVaue === this.displayData.length - 1) {
			this.dialog.isNextCantouch = true
			//用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
			if (this.dialog.isPreCantouch == true) {
			this.dialog.isPreCantouch = false;
			this.dialog.isPreCantouch = false
			}
			}
			// 处于表格的中间行将按钮设置为可点击状态
			else {
			this.dialog.isPreCantouch = false;
			this.dialog.isNextCantouch = false;
			this.dialog.isPreCantouch = false
			this.dialog.isNextCantouch = false
			}
			},

			// 当选择的时间发生变化时，异常分析部分的异常店铺数量同步变化

			beginTime() {
			this.getShopNames();
			},
			endTime() {
			this.getShopNames();
			},
			// beginTime() {
			// this.getShopNames()
			// },
			// endTime() {
			// this.getShopNames()
			// },
			dialogTableVisible() {
			window.addEventListener('resize', this.updateChart);
			window.addEventListener('resize', this.updateChart)
			}
			},
			computed: {
			exceptionAllNum() {
			let sum =
			this.exception.exception0Num +
			this.exception.exception1Num +
			this.exception.exception2Num +
			this.exception.exception3Num +
			this.exception.exception4Num +
			this.exception.exception5Num +
			this.exception.exception6Num +
			this.exception.exception7Num
			if (sum == 0) {
			return 1
			} else {
			return sum
			}
			},
			long_time_notchange() {
			let sum =
			this.exception.exception0Num +
			this.exception.exception1Num +
			this.exception.exception2Num +
			this.exception.exception3Num +
			this.exception.exception4Num +
			this.exception.exception5Num +
			this.exception.exception6Num +
			this.exception.exception7Num
			if (sum == 0) {
			return 0
			} else {
			return (
			100 -
			(this.exception.exception0Num / this.exceptionAllNum) * 100 -
			(this.exception.exception1Num / this.exceptionAllNum) * 100 -
			(this.exception.exception2Num / this.exceptionAllNum) * 100 -
			(this.exception.exception4Num / this.exceptionAllNum) * 100 -
			(this.exception.exception5Num / this.exceptionAllNum) * 100 -
			(this.exception.exception6Num / this.exceptionAllNum) * 100 -
			(this.exception.exception7Num / this.exceptionAllNum) * 100
			).toFixed(1)
			}
			},
			// 第一排卡片
			cardRow1() {
			return [
			{
			siteName: this.exception.exception4,
			exceptionType: '4',
			exceptionName: '量级突变',
			iconSrc: '@/assets/exception/exception4.png',
			siteNum: this.exception.exception4.length,
			exceptionNum: this.exception.exception4Num,
			isNoDataStatus: this.isNoData.exception4
			},
			{
			siteName: this.exception.exception5,
			exceptionType: '5',
			exceptionName: '临近超标异常',
			iconSrc: '@/assets/exception/exception5.png',
			siteNum: this.exception.exception5.length,
			exceptionNum: this.exception.exception5Num,
			isNoDataStatus: this.isNoData.exception5
			},
			{
			siteName: this.exception.exception6,
			exceptionType: '6',
			exceptionName: '单日超标次数临界异常',
			iconSrc: '@/assets/exception/exception6.png',
			siteNum: this.exception.exception6.length,
			exceptionNum: this.exception.exception6Num,
			isNoDataStatus: this.isNoData.exception6
			},
			{
			siteName: this.exception.exception7,
			exceptionType: '7',
			exceptionName: '变化趋势异常',
			iconSrc: '@/assets/exception/exception7.png',
			siteNum: this.exception.exception7.length,
			exceptionNum: this.exception.exception7Num,
			isNoDataStatus: this.isNoData.exception7
			}
			]
			},
			cardRow2() {
			return [
			{
			siteName: this.exception.exception0,
			exceptionType: '0',
			exceptionName: '数据缺失异常',
			iconSrc: '@/assets/exception/exception0.png',
			siteNum: this.exception.exception0.length,
			exceptionNum: this.exception.exception0Num,
			isNoDataStatus: this.isNoData.exception0
			},
			{
			siteName: this.exception.exception1,
			exceptionType: '1',
			exceptionName: '数据超低',
			iconSrc: '@/assets/exception/exception1.png',
			siteNum: this.exception.exception1.length,
			exceptionNum: this.exception.exception1Num,
			isNoDataStatus: this.isNoData.exception1
			},
			{
			siteName: this.exception.exception2,
			exceptionType: '2',
			exceptionName: '超标',
			iconSrc: '@/assets/exception/exception2.png',
			siteNum: this.exception.exception2.length,
			exceptionNum: this.exception.exception2Num,
			isNoDataStatus: this.isNoData.exception2
			},
			{
			siteName: this.exception.exception3,
			exceptionType: '3',
			exceptionName: '数据长时段无波动',
			iconSrc: '@/assets/exception/exception3.png',
			siteNum: this.exception.exception3.length,
			exceptionNum: this.exception.exception3Num,
			isNoDataStatus: this.isNoData.exception3
			}
			]
			}
			},
			mounted() {
			// 测试组合式函数
			// let param = {
			// siteName: '金山区金山新城JSC1-0401单元1-11-01地块项目09',
			// beginTime: '2023-07-01 00:00:00',
			// endTime: '2023-07-10 00:00:00'
			// };
			// this.backData = this.request('/dust/history1', param);
			// console.log('历史数据为：', this.backData.value);

			this.backExceptionDataAWeekAgo();
			// this.calTableHeight();
			this.backExceptionDataAWeekAgo()
			// 查询时间段的各异常的站点，查询该时间区间的各异常数量
			this.getShopNames();
			// this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
			// console.log('异常数据为：',this.exception.exception0);
			this.getShopNames()
			this.getSiteNume()
			},

			methods: {
			getImageUrl(name) {
			return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
			},
			// 放回站点总数量
			getSiteNume() {
			exceptionApi.getSitesNum().then((res) => {
			this.siteTotal = res.data.data.length
			})
			},


			// getExceptionSiteNum(){
			// this.$http.get('/dust/exceptionsitenum').then(result => {
			// this.exceptionSiteNum = result.data.data.length
			// })
			// },
			/**
			* description：点击异常站点名字时返回的数据
			* @param：
			* @param：
			* @createTime:2023-08-17
			* @returns：
			*/
			getAbnormalDataByClick(val) {
			this.flag.originClick = 1

			// 显示表格
			this.isTableShow = true
			this.tableData = val
			this.total = this.tableData.length
			// 默认显示第一页
			this.handleCurrentChange(1);
			this.handleCurrentChange(1)
			},
			// 点击表格的行时
			selectTableRow() {
			// 点击表格的行时
			selectTableRow() {
			// 获取当前行的索引
			this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);

			},

			/**
			* description：返回时间数组，从开始时间的后15分钟到结束时间为止。
			* @param：异常的开始,异常结束时间
			* @createTime:2023-08-17
			* @returns：比如12:00:00-13:00:00 所以返回的数组元素是 12:00:00 ,12:15:00,12:30:00,12:45:00，13:00:00
			*/
			descTenTime(begin, end) {
			let time = [];
			if (begin == end) {
			time.push(begin);
			return time;
			}
			time.push(begin);
			let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
			while (temp != end) {
			time.push(temp);
			temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
			}
			// 加上异常的结束时间
			time.push(temp);
			return time;
			this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
			},
			/**
			* description：断电或断网时设置的表格数据
			*/
			setOfflineTbleData(){
			setOfflineTbleData() {
			// 无数据时的时间数组时间相差15分钟
			const abnormalTimeTenMinute = this.descTenTime(
			const abnormalTimeTenMinute = index.descFiftyTime(
			this.tableCurrentRowData.beginTime,
			this.tableCurrentRowData.endTime
			);
			)
			// 保存无数据时表格条数
			this.dialog.exceptionTotal = abnormalTimeTenMinute.length

			// 去除供电异常和掉线区间的第一个有元素的值
			this.dialog.historyData = [];
			this.dialog.historyData = []

			for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
			this.dialog.historyData.push({
			name: this.tableCurrentRowData.name,
			mnCode: this.tableCurrentRowData.mnCode,
			dutyCompany:this.tableCurrentRowData.dutyCompany,
			dutyCompany: this.tableCurrentRowData.dutyCompany,
			lst: abnormalTimeTenMinute[i],
			dustValue: ''
			});
			})
			}

			// 保存无数据时表格条数
			this.exceptionTotal = abnormalTimeTenMinute.length;
			},

			/**
			* description：返回开始时间的前45分钟的时间点，结束时间后45分钟的时间点
			* @param：异常的开始时间，异常的结束时间。
			* @returns：数组。time[0],time[1],time[2],time[3]分别代表异常区间前45分钟的时间点，前15分钟的时间点,后15分钟的时间点，后45分钟的时间点
			*/
			before45AndAfter45(begin, end) {
			let time = [];
			// 前一段的开始时间
			const before45MinBegin = dayjs(begin)
			.subtract(45, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');
			// 前一段的结束时间
			const before15MinBegin = dayjs(begin)
			.subtract(15, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');

			// 后一段的开始时间
			const after15MinBegin = dayjs(end)
			.add(15, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');
			// 往后40分钟
			const after45MinEnd = dayjs(end)
			.add(45, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');
			time.push(before45MinBegin);
			time.push(before15MinBegin);
			time.push(after15MinBegin);
			time.push(after45MinEnd);
			return time;
			},
			/**
			* description：返回某站点在该时段历史数据的get请求参数
			* @param：站点名称，开始时间，结束时间
			* @returns：对象
			*/
			requestGetParms(name, begin, end) {
			return {
			siteName: name,
			beginTime: begin,
			endTime: end
			};
			},
			/**
			* description：相差多少个15分钟计算中包括开始时间，结束时间。
			* @param：异常开始时间，异常结束时间
			* @returns：整数
			*/
			diffFiftyMinutesNum(beginNormal, endNormal) {
			// 将开始时间和结束时间转换为dayjs对象
			const start = dayjs(beginNormal).subtract(15, 'minute');
			const end = dayjs(endNormal);

			// 计算结束时间减去开始时间中间相差多少个十分钟
			const diffInMinutes = end.diff(start, 'minute');
			const diffInTenMinutes = Math.floor(diffInMinutes / 15);
			return diffInTenMinutes;
			},
			// 段电或断网区间无数据，需要补充。其他的都有数据，直接一次请求全部时段就好

			// 根据异常区间构造前后端首尾前区间中间区间后区间
			@@ -342,118 +398,58 @@
			* description：一次请求回前中后区间的数据,对数据进行分析
			* @param：前中后区间的请求参数，前中后的总区间时间，异常开始时间，一场结束时间
			*/
			otherExceptionRequest(allTimeArgs,allTime,exceptionBT,exceptionET) {
			// 折线图加载中效果
			otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
			// 折线图加载中效果
			this.loading.lineChart = true
			this.$http
			.get('/dust/history', { params: allTimeArgs })
			.then((result) => {
			this.dialog.allExceptionTimeData = result.data.data;
			// 断电或断网时重新设置表格
			if(this.tableCurrentRowData.exceptionType == '0'){
			this.setOfflineTbleData()
			this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => {
			this.dialog.allExceptionTimeData = result.data.data
			// 数据缺失异常时重新设置表格
			if (this.tableCurrentRowData.exceptionType == '0') {
			this.setOfflineTbleData()
			}

			// x轴日期时间
			let dateList = [];
			// x轴日期时间
			let dateList = []
			// y轴超标油烟浓度
			let dustValue = [];
			let timeAndValue = {};
			let dustValue = []
			let timeAndValue = {}

			// 从添加了首位区间的开始和结束时间进行遍历保证时间以10分钟为间隔
			timeAndValue = this.keepContinuousByEachFiftyMinutes(
			allTime[0],
			allTime[3],
			this.dialog.allExceptionTimeData
			);
			dateList = timeAndValue['xAxis'];
			dustValue = timeAndValue['yAxis'];

			timeAndValue = index.keepContinuousByEachFiftyMinutes(
			allTime[0],
			allTime[3],
			this.dialog.allExceptionTimeData
			)
			dateList = timeAndValue['xAxis']
			dustValue = timeAndValue['yAxis']

			// 提取异常起始时间点在整个区间内的数据索引
			let startIndex = dateList.findIndex(
			(item) => item === exceptionBT
			);
			let endIndex = dateList.findIndex((item) => item === exceptionET);
			let startIndex = dateList.findIndex((item) => item === exceptionBT)
			let endIndex = dateList.findIndex((item) => item === exceptionET)

			// 设置折线图配置项
			this.reSetChart(dateList,dustValue,exceptionBT, exceptionET,
			startIndex,
			endIndex)
			this.loading.lineChart = false
			});

			},
			/**
			* description：判断data中是否有该日期时间，存在返回该时间对应的浓度值，否则返回-1
			* @param：加上前后区间的异常数据，时间字符串
			* @returns：
			*/
			findTimeInExceptionData(data, time) {
			for (let i = 0; i < data.length; i++) {
			if (data[i] == null) {
			continue;
			}
			if (data[i]['lst'] == time) {
			return data[i]['dustValue'];
			}
			}
			return -1;
			},
			/**
			* description：根据开始和结束时间,返回以15分钟为间隔的时间和对应的值
			* @param：前区间的开始时间，后区间的结束时间, 加上前后区间的总时间段的异常数据的对象数组
			* @returns：对象。包含了折线图的x轴，y轴的配置数据
			*/
			keepContinuousByEachFiftyMinutes(
			intervalStarTime,
			intervalEndTime,
			headAndTailExceptionData
			) {
			let xAxis = [];
			let yAxis = [];
			let obj = {};
			let current = intervalStarTime;
			let tail = dayjs(intervalEndTime)
			.add(15, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');
			while (current != tail) {
			let value = this.findTimeInExceptionData(
			headAndTailExceptionData,
			current
			);
			if (value != -1) {
			xAxis.push(current);
			yAxis.push(value);
			} else {
			xAxis.push(current);
			yAxis.push(null);
			}
			current = dayjs(current)
			.add(15, 'minute')
			.format('YYYY-MM-DD HH:mm:ss');
			}
			obj['xAxis'] = xAxis;
			obj['yAxis'] = yAxis;
			return obj;
			this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
			this.loading.lineChart = false
			})
			},

			/**
			* description：绘制折线图
			* @param： x轴时间， y轴油烟浓度，异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标
			*/
			reSetChart(
			xData,
			yData,
			exceptionBeginTime,
			exceptionEndTime,
			beginIndex,
			endIndex
			) {
			this.dialog.option = {};
			reSetChart(xData, yData, exceptionBeginTime, exceptionEndTime, beginIndex, endIndex) {
			this.dialog.option = {}
			switch (this.tableCurrentRowData.exceptionType) {
			// 断电或断网时间段
			case '0':
			this.dialog.option = {
			title: {
			text: this.tableCurrentRowData.exception,
			left: '1%',
			textStyle: {
			fontSize: 14
			}
			},
			tooltip: {},
			toolbox: {
			// 工具栏
			@@ -472,7 +468,7 @@
			name: '时间',
			axisLabel: {
			formatter: function (value) {
			return value.slice(11, -3);
			return value.slice(11, -3)
			}
			}
			},
			@@ -503,11 +499,18 @@
			}
			}
			]
			};
			break;
			// 超标
			}
			break
			// 超标
			case '2':
			this.dialog.option = {
			title: {
			text: this.tableCurrentRowData.exception,
			left: '1%',
			textStyle: {
			fontSize: 14
			}
			},
			tooltip: {},
			toolbox: {
			// 工具栏
			@@ -525,7 +528,7 @@
			name: '时间',
			axisLabel: {
			formatter: function (value) {
			return value.slice(11, -3);
			return value.slice(11, -3)
			}
			}
			},
			@@ -544,9 +547,9 @@
			itemStyle: {
			color: 'red'
			}
			};
			}
			}
			return item;
			return item
			}),
			// 变换指定时间区间的背景颜色
			markArea: {
			@@ -615,11 +618,18 @@
			}
			]
			}
			};
			break;
			}
			break
			// 数据超低只有时间点
			case '1':
			this.dialog.option = {
			this.dialog.option = {
			title: {
			text: this.tableCurrentRowData.exception,
			left: '1%',
			textStyle: {
			fontSize: 14
			}
			},
			tooltip: {},
			toolbox: {
			// 工具栏
			@@ -637,7 +647,7 @@
			name: '时间',
			axisLabel: {
			formatter: function (value) {
			return value.slice(11, -3);
			return value.slice(11, -3)
			}
			}
			},
			@@ -656,11 +666,11 @@
			itemStyle: {
			color: 'red'
			}
			};
			}
			}
			return item;
			return item
			}),


			markLine: {
			symbol: 'none',
			itemStyle: {
			@@ -711,10 +721,18 @@
			}
			]
			}
			};
			break;
			case '3' :
			}
			break
			// 数据长时段无波动
			case '3':
			this.dialog.option = {
			title: {
			text: this.tableCurrentRowData.exception,
			left: '1%',
			textStyle: {
			fontSize: 14
			}
			},
			tooltip: {},
			toolbox: {
			// 工具栏
			@@ -732,7 +750,7 @@
			name: '时间',
			axisLabel: {
			formatter: function (value) {
			return value.slice(11, -3);
			return value.slice(11, -3)
			}
			}
			},
			@@ -751,9 +769,9 @@
			itemStyle: {
			color: 'red'
			}
			};
			}
			}
			return item;
			return item
			}),
			// 变换指定时间区间的背景颜色
			markArea: {
			@@ -795,10 +813,21 @@
			}
			]
			}
			};
			break;
			}
			break
			// 量级突变异常
			case '4':
			this.dialog.option = {
			case '5':
			case '6':
			case '7':
			this.dialog.option = {
			title: {
			text: this.tableCurrentRowData.exception,
			left: '1%',
			textStyle: {
			fontSize: 14
			}
			},
			tooltip: {},
			toolbox: {
			// 工具栏
			@@ -816,7 +845,7 @@
			name: '时间',
			axisLabel: {
			formatter: function (value) {
			return value.slice(11, -3);
			return value.slice(11, -3)
			}
			}
			},
			@@ -845,8 +874,7 @@
			}
			]
			]
			},

			}
			}
			],
			// 指定时间区间的线段变颜色
			@@ -870,10 +898,10 @@
			}
			]
			}
			};
			break;
			}
			break
			default:
			console.log('没有设置该异常类型！');;
			console.log('没有设置该异常类型！')
			}
			this.flag.banTouch = 0
			},
			@@ -881,96 +909,100 @@
			* description：划分出异常起始时间，构造请求前中后的参数
			*/
			timeAndDataProcessed() {

			//异常的开始时间结束时间
			let exceptionBeginTime = this.tableCurrentRowData.beginTime;
			let exceptionEndTime = this.tableCurrentRowData.endTime;
			let exceptionBeginTime = this.tableCurrentRowData.beginTime
			let exceptionEndTime = this.tableCurrentRowData.endTime

			// beforeAndAfterTime[0]:前45分钟的时间点
			// beforeAndAfterTime[1]:前15分钟的时间点
			// beforeAndAfterTime[2]:后15分钟的时间点
			// beforeAndAfterTime[3]:后45分钟的时间点
			let beforeAndAfterTime = this.before45AndAfter45(
			exceptionBeginTime,
			exceptionEndTime
			);
			let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime)

			// 构造异常时间前后区间数据请求参数(除了断网中都用到）
			let paramsAllTime = this.requestGetParms(
			let paramsAllTime = index.requestGetParms(
			this.tableCurrentRowData.name,
			beforeAndAfterTime[0],
			beforeAndAfterTime[3]
			);
			// 将异常数据进行预处理，随后将结果作为折线图的配置项
			)

			this.otherExceptionRequest(paramsAllTime,beforeAndAfterTime,exceptionBeginTime,exceptionEndTime)
			// 将异常数据进行预处理，随后将结果作为折线图的配置项
			this.otherExceptionRequest(
			paramsAllTime,
			beforeAndAfterTime,
			exceptionBeginTime,
			exceptionEndTime
			)
			},

			/**
			* description：获取下一条异常信息
			*/
			getPreviousRowData() {
			// // 不是表格的最后一行
			// // 不是表格的最后一行
			if (this.selectedRowIndex < this.displayData.length - 1) {
			// 点击过程中锁住上下条按钮在设置完图形配置项后解锁
			this.flag.banTouch = 1

			//得到上一行数据索引
			this.selectedRowIndex = this.selectedRowIndex + 1;
			this.selectedRowIndex = this.selectedRowIndex + 1

			//请求数据改变exceedingData
			// this.setinfo(this.selectedRowIndex);

			// 得到上一行的数据
			this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
			let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
			let params = index.requestGetParms(
			this.tableCurrentRowData.name,
			this.tableCurrentRowData.beginTime,
			this.tableCurrentRowData.endTime
			)
			this.loading.preButton = true
			this.$http
			.get('/dust/history', { params: params })
			.then((response) => {
			// 保存返回的超标数据
			this.dialog.historyData = response.data.data;
			this.dialog.exceptionTotal = response.data.data.length;
			// 逻辑处理
			this.timeAndDataProcessed()
			this.loading.preButton = false
			});
			this.$http.get('/dust/history', { params: params }).then((response) => {
			// 保存返回的超标数据
			this.dialog.historyData = response.data.data
			this.dialog.exceptionTotal = response.data.data.length
			// 逻辑处理
			this.timeAndDataProcessed()
			this.loading.preButton = false
			})
			}

			//得到上一行数据索引
			// this.selectedRowIndex = this.selectedRowIndex + 1;
			// this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
			// console.log('当前行数据为:',this.tableCurrentRowData);
			//得到上一行数据索引
			// this.selectedRowIndex = this.selectedRowIndex + 1;
			// this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
			},
			/**
			* description：获取下一条异常信息
			*/
			getNextRowData() {
			// 不是表格的第一行
			// 不是表格的第一行
			if (this.selectedRowIndex !== 0) {
			// 点击过程中锁住上下条按钮在设置完图形配置项后解锁
			this.flag.banTouch = 1

			//得到上一行数据索引
			this.selectedRowIndex = this.selectedRowIndex - 1;
			this.selectedRowIndex = this.selectedRowIndex - 1
			//请求数据改变exceedingData
			// this.setinfo(this.selectedRowIndex);

			// 得到上一行的数据
			this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
			// 得到上一行的数据
			this.tableCurrentRowData = this.displayData[this.selectedRowIndex]

			let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
			let params = index.requestGetParms(
			this.tableCurrentRowData.name,
			this.tableCurrentRowData.beginTime,
			this.tableCurrentRowData.endTime
			)
			this.loading.afterButton = true
			this.$http
			.get('/dust/history', { params: params })
			.then((response) => {
			// 保存返回的超标数据
			this.dialog.historyData = response.data.data;
			this.dialog.exceptionTotal = response.data.data.length;
			// 逻辑处理
			this.timeAndDataProcessed()
			this.loading.afterButton = false
			});
			this.$http.get('/dust/history', { params: params }).then((response) => {
			// 保存返回的超标数据
			this.dialog.historyData = response.data.data
			this.dialog.exceptionTotal = response.data.data.length
			// 逻辑处理
			this.timeAndDataProcessed()
			this.loading.afterButton = false
			})
			}
			},

			@@ -979,8 +1011,8 @@
			* @createTime:2023-08-18
			*/
			backExceptionData(val1, val2) {
			this.displayData = val1;
			this.total = val2;
			this.displayData = val1
			this.total = val2
			},

			/**
			@@ -989,6 +1021,7 @@
			*/
			getShopNames() {
			/* 查询异常的站点 */

			this.$http
			.get('/dust/sitenamecode', {
			params: {
			@@ -998,8 +1031,13 @@
			}
			})
			.then((result) => {
			this.exception.exception0 = result.data.data;
			});
			this.exception.exception0 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception0 = true
			return
			}
			this.isNoData.exception0 = false
			})
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			@@ -1009,8 +1047,13 @@
			}
			})
			.then((result) => {
			this.exception.exception1 = result.data.data;
			});
			this.exception.exception1 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception1 = true
			return
			}
			this.isNoData.exception1 = false
			})
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			@@ -1020,8 +1063,13 @@
			}
			})
			.then((result) => {
			this.exception.exception2 = result.data.data;
			});
			this.exception.exception2 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception2 = true
			return
			}
			this.isNoData.exception2 = false
			})

			this.$http
			.get('/dust/sitenamecode', {
			@@ -1032,10 +1080,15 @@
			}
			})
			.then((result) => {
			this.exception.exception3 = result.data.data;
			});
			this.exception.exception3 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception3 = true
			return
			}
			this.isNoData.exception3 = false
			})

			this.$http
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			exceptionType: '4',
			@@ -1044,9 +1097,14 @@
			}
			})
			.then((result) => {
			this.exception.exception4 = result.data.data;
			});
			this.$http
			this.exception.exception4 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception4 = true
			return
			}
			this.isNoData.exception4 = false
			})
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			exceptionType: '5',
			@@ -1055,9 +1113,14 @@
			}
			})
			.then((result) => {
			this.exception.exception5 = result.data.data;
			});
			this.$http
			this.exception.exception5 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception5 = true
			return
			}
			this.isNoData.exception5 = false
			})
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			exceptionType: '6',
			@@ -1066,10 +1129,29 @@
			}
			})
			.then((result) => {
			this.exception.exception6 = result.data.data;
			});


			this.exception.exception6 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception6 = true
			return
			}
			this.isNoData.exception6 = false
			})
			this.$http
			.get('/dust/sitenamecode', {
			params: {
			exceptionType: '7',
			beginTime: this.beginTime,
			endTime: this.endTime
			}
			})
			.then((result) => {
			this.exception.exception7 = result.data.data
			if (result.data.data.length == 0) {
			this.isNoData.exception7 = true
			return
			}
			this.isNoData.exception7 = false
			})

			/* 异常异常数量 */
			this.$http
			@@ -1081,8 +1163,8 @@
			}
			})
			.then((result) => {
			this.exception.exception0Num = result.data.data;
			});
			this.exception.exception0Num = result.data.data
			})
			this.$http
			.get('/dust/exceptionnum', {
			params: {
			@@ -1092,8 +1174,8 @@
			}
			})
			.then((result) => {
			this.exception.exception1Num = result.data.data;
			});
			this.exception.exception1Num = result.data.data
			})
			this.$http
			.get('/dust/exceptionnum', {
			params: {
			@@ -1103,8 +1185,8 @@
			}
			})
			.then((result) => {
			this.exception.exception2Num = result.data.data;
			});
			this.exception.exception2Num = result.data.data
			})

			this.$http
			.get('/dust/exceptionnum', {
			@@ -1115,10 +1197,10 @@
			}
			})
			.then((result) => {
			this.exception.exception3Num = result.data.data;
			});

			this.$http
			this.exception.exception3Num = result.data.data
			})

			this.$http
			.get('/dust/exceptionnum', {
			params: {
			exceptionType: '4',
			@@ -1127,9 +1209,9 @@
			}
			})
			.then((result) => {
			this.exception.exception4Num = result.data.data;
			});
			this.$http
			this.exception.exception4Num = result.data.data
			})
			this.$http
			.get('/dust/exceptionnum', {
			params: {
			exceptionType: '5',
			@@ -1138,9 +1220,9 @@
			}
			})
			.then((result) => {
			this.exception.exception5Num = result.data.data;
			});
			this.$http
			this.exception.exception5Num = result.data.data
			})
			this.$http
			.get('/dust/exceptionnum', {
			params: {
			exceptionType: '6',
			@@ -1149,14 +1231,24 @@
			}
			})
			.then((result) => {
			this.exception.exception6Num = result.data.data;
			});
			this.exception.exception6Num = result.data.data
			})
			this.$http
			.get('/dust/exceptionnum', {
			params: {
			exceptionType: '7',
			beginTime: this.beginTime,
			endTime: this.endTime
			}
			})
			.then((result) => {
			this.exception.exception7Num = result.data.data
			})
			},

			/**
			* description：请求异常的店铺名字
			* @param：异常类型，开始时间，结束时间
			* @createTime:2023-08-18
			* @returns：异常的数据
			*/
			// getSiteNameByExceptionType(exception, beginT, endT) {
			@@ -1179,36 +1271,35 @@
			*/
			showDialog(row) {
			// 打开对话框
			this.dialogTableVisible = true;

			this.dialogTableVisible = true

			// 保存当前行数据
			this.tableCurrentRowData = row;
			this.tableCurrentRowData = row

			// 获取当前行的索引
			this.selectedRowIndex = this.displayData.indexOf(row);
			this.selectedRowIndex = this.displayData.indexOf(row)

			//根据当前行的编号，起始时间来请求异常数据
			// 对请求到的数据进行首尾拼接
			// 得到前后完整数据进行绘制图形

			let params = {};
			this.loading.lineChart = true
			let params = {}
			if (row.name) {
			params['siteName'] = row.name;
			params['siteName'] = row.name
			}
			if (row.beginTime) {
			params['beginTime'] = row.beginTime;
			params['beginTime'] = row.beginTime
			}
			if (row.endTime) {
			params['endTime'] = row.endTime;
			params['endTime'] = row.endTime
			}

			this.$http.get('/dust/history', { params: params }).then((response) => {
			// 保存返回的超标数据
			this.dialog.historyData = response.data.data;
			this.dialog.exceptionTotal = response.data.data.length;
			this.dialog.historyData = response.data.data
			this.dialog.exceptionTotal = response.data.data.length
			// 逻辑处理
			this.timeAndDataProcessed()
			});
			})
			},
			/**
			* description：条件查询异常的数据
			@@ -1216,41 +1307,43 @@
			*/
			handleSubmit() {
			if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
			alert('时间跨度不能超过一个月');
			return;
			alert('时间跨度不能超过一个月')
			return
			}
			// 更新异常分析
			this.getShopNames()

			this.loading.queryButton = true
			this.flag.originClick = 0
			this.loading.tableLoading = true;
			let params = {};
			params['page'] = this.currentPage;
			params['pageSize'] = this.pageSize;
			this.loading.tableLoading = true
			let params = {}
			params['page'] = this.currentPage
			params['pageSize'] = this.pageSize
			if (this.form.name) {
			params['siteName'] = this.form.name;
			params['siteName'] = this.form.name
			}
			if (this.form.exceptionName.length != 0) {
			params['exceptionType'] = this.form.exceptionName.join();
			params['exceptionType'] = this.form.exceptionName.join()
			}
			params['beginTime'] = this.beginTime;
			params['endTime'] = this.endTime;
			params['beginTime'] = this.beginTime
			params['endTime'] = this.endTime

			this.$http
			.get('/dust/exceptiondata', { params: params })
			.then((response) => {
			// 保存返回的
			// this.tableData = response.data.data.rows;
			this.displayData = response.data.data.rows;
			this.loading.queryButton = false
			this.loading.tableLoading = false;
			if (response.data.data.total == 0) {
			ElMessage('该时段无数据');
			this.isNoData = true;
			return;
			}
			this.total = response.data.data.total;
			// 移除空数据状态
			this.isNoData = false;
			});
			this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
			// 保存返回的
			// this.tableData = response.data.data.rows;
			this.displayData = response.data.data.rows
			this.loading.queryButton = false
			this.loading.tableLoading = false

			if (response.data.data.total == 0) {
			ElMessage('该时段无数据')
			this.isTableShow = false
			return
			}
			this.isTableShow = true
			this.total = response.data.data.total
			// 移除空数据状态
			})
			},

			/**
			@@ -1258,32 +1351,30 @@
			* @createTime:2023-08-18
			*/
			backExceptionDataAWeekAgo() {
			this.loading.tableLoading = true;
			let params = {};
			this.loading.tableLoading = true
			let params = {}
			if (this.form.name) {
			params['siteName'] = this.form.name;
			params['siteName'] = this.form.name
			}
			if (this.form.exceptionName) {
			params['exceptionType'] = this.form.exceptionName;
			params['exceptionType'] = this.form.exceptionName
			}
			params['beginTime'] = this.beginTime;
			params['endTime'] = this.endTime;
			params['beginTime'] = this.beginTime
			params['endTime'] = this.endTime

			this.$http
			.get('/dust/exceptiondata', { params: params })
			.then((response) => {
			// 保存返回的
			// this.tableData = response.data.data.rows;
			this.displayData = response.data.data.rows;

			if (response.data.data.total == 0) {
			ElMessage('该时段无数据');
			this.isNoData = true;
			return;
			}
			this.total = response.data.data.total;
			this.loading.tableLoading = false;
			});
			this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
			// 保存返回的
			// this.tableData = response.data.data.rows;
			this.displayData = response.data.data.rows
			this.loading.tableLoading = false
			if (response.data.data.total == 0) {
			ElMessage('该时段无数据')
			this.isTableShow = false
			return
			}
			this.isTableShow = true
			this.total = response.data.data.total
			})
			},

			/**
			@@ -1291,26 +1382,26 @@
			* @createTime:2023-08-17
			*/
			giveTime(val) {
			this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
			this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
			this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
			this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
			},

			// 功能：表格高度根据内容自适应
			calTableHeight() {
			const h1 = this.$refs.h1.$el.offsetHeight;
			const h2 = this.$refs.h2.$el.offsetHeight;
			const h3 = this.$refs.h3.$el.offsetHeight;
			const h4 = this.$refs.h4.$el.offsetHeight;
			const h1 = this.$refs.h1.$el.offsetHeight
			const h2 = this.$refs.h2.$el.offsetHeight
			const h3 = this.$refs.h3.$el.offsetHeight
			const h4 = this.$refs.h4.$el.offsetHeight
			// 其中一个40是盒子的总外边距
			this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`;
			this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
			},

			// 页大小改变时触发
			handleSizeChange(val) {
			this.pageSize = val;
			this.pageSize = val

			// 改变每页显示数目时跳到当前页
			this.handleCurrentChange(1);
			this.handleCurrentChange(1)
			},

			// 页号改变时触发
			@@ -1321,674 +1412,415 @@
			* @returns：
			*/
			handleCurrentChange(val) {
			console.log('当前页为：', val);
			// 将当前页号给currentPage
			this.currentPage = val;

			this.currentPage = val

			// 页面变化时调用查询数据函数
			if(this.flag.originClick==0){
			this.handleSubmit();
			}else if(this.flag.originClick ==1){
			const startIndex = (val - 1) * this.pageSize;
			const endIndex = startIndex + this.pageSize;
			if (this.flag.originClick == 0) {
			this.handleSubmit()
			} else if (this.flag.originClick == 1) {
			const startIndex = (val - 1) * this.pageSize
			const endIndex = startIndex + this.pageSize

			this.displayData = this.tableData.slice(startIndex, endIndex);
			this.displayData = this.tableData.slice(startIndex, endIndex)
			}
			},
			// 表格序号递增
			indexMethod1(index) {
			return index + 1 + (this.currentPage - 1) * this.pageSize;
			return index + 1 + (this.currentPage - 1) * this.pageSize
			},
			// 表格序号递增
			indexMethod2(index) {
			return index + 1;
			return index + 1
			}
			}
			};
			}
			</script>

			<template>

			<el-row ref="h1">
			<el-col>
			<el-form :inline="true">
			<div class="head-container-text">
			<el-form-item >
			<AreaAndmonitorType ></AreaAndmonitorType>
			</el-form-item>
			<div class="all-container">
			<el-row ref="h1">
			<el-col>
			<el-form :inline="true">
			<div class="head-container-text">
			<el-form-item>
			<AreaAndmonitorType></AreaAndmonitorType>
			</el-form-item>

			<el-form-item>
			<TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
			</el-form-item>
			<el-form-item>
			<TimeShortCuts timeType="day" @submit-time="giveTime"></TimeShortCuts>
			</el-form-item>

			</div>

			<div class="head-container-search">
			<el-form-item>
			<el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">查询</el-button>
			</el-form-item>
			</div>
			</el-form>
			</el-col>
			</el-row>

			<el-row class="head-describtion-text" ref="h2">
			<el-row>
			<span> 金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span>
			<el-form-item>
			<ButtonClick
			content="风险评估"
			type="warning"
			color="rgb(12,104,165)"
			:loading="loading.queryButton"
			:havaIcon="false"
			@do-search="handleSubmit"
			><img src="@/assets/exception/riskButton.png" height="24" class="img-button"
			/></ButtonClick>
			</el-form-item>
			</div>
			</el-form>
			</el-col>
			</el-row>
			</el-row>

			<el-row ref="h3">
			<el-col>
			<el-card>
			<template #header>
			<div class="card-header">异常分析</div>
			</template>


			<el-row :gutter="20" class="card-row" >
			<el-col :span="6">
			<div class="card-content-unnormal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">量级突变异常</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>

			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception4.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception4.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>

			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception4Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num
			)) *
			100
			).toFixed(1)
			}}%</div
			>

			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text" >
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="4"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"
			@subloading="(n)=>loading.text=n"
			v-for="(item, index) in exception.exception4"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception4.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>

			<el-col :span="6">
			<div class="card-content-unnormal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">临近超标异常</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>

			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception5.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception5.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>

			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception5Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num
			)) *
			100
			).toFixed(1)
			}}%</div
			>

			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="5"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception5"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception5.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>

			<el-col :span="6">
			<div class="card-content-unnormal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">单日超标次数临界异常</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>

			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception6.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception6.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>

			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception6Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num
			)) *
			100
			).toFixed(1)
			}}%</div
			>

			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="6"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception6"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception6.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>

			<el-col :span="6">
			<div class="card-content-unnormal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">变化趋势异常</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>

			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception7.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception7.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>

			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception7Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num
			)) *
			100
			).toFixed(1)
			}}%</div
			>

			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="7"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception7"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception7.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>
			</el-row>


			<el-row :gutter="20" >
			<el-col :span="6">
			<div class="card-content-normal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">浓度超标</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>

			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception2.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception2.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>

			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception2Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num

			)) *
			100
			).toFixed(1)
			}}%</div
			>

			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="2"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception2"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception2.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>
			<el-col :span="6"
			><div class="card-content-normal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">数据缺失异常</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>
			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception0.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception0.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>
			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception0Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			).toFixed(1)
			}}%</div
			>
			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="0"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception0"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception0.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>
			<el-col :span="6">
			<div class="card-content-normal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">数据超低</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>
			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception1.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception1.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>
			<div class="card-exceptionname-text2"
			>异常数占比:{{
			(
			(exception.exception1Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			).toFixed(1)
			}}%</div
			>
			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="1"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception1"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception1.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div></el-col
			>
			<el-col :span="6"
			><div class="card-content-normal">
			<!-- 标头 -->
			<div class="card-text1">
			<image class="card-header-image"></image>
			<span class="card-header-text">数据长时段无波动</span>
			</div>

			<div class="card-content-text">
			<el-scrollbar>
			<span class="card-exceptionname-text1">异常站点占比:</span>
			<span>{{ exception.exception3.length }} /{{ siteTotal }}</span>
			<span>
			({{
			((exception.exception3.length / siteTotal) * 100).toFixed(
			1
			)
			}}%)</span
			>
			<div class="card-exceptionname-text2"
			>异常数占比:{{(100-

			((exception.exception0Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			) -
			((exception.exception1Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			) -
			((exception.exception2Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			) -
			((exception.exception4Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			)-
			((exception.exception5Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			)-
			((exception.exception6Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			)-
			((exception.exception7Num /
			(exception.exception0Num +
			exception.exception1Num +
			exception.exception2Num +
			exception.exception3Num+
			exception.exception4Num+
			exception.exception5Num+
			exception.exception6Num+
			exception.exception7Num)) *
			100
			)


			).toFixed(1)
			}}%</div
			>
			</el-scrollbar>
			</div>
			<hr />
			<!-- 异常的店铺名字 -->
			<div class="card-exception-buttom" v-loading="loading.text">
			<el-scrollbar max-height="90px">
			<DustExceptionText
			:site-name="item.name"
			exception-type="3"
			:begin-time="beginTime"
			:end-time="endTime"
			@submit-exception-data="getAbnormalDataByClick"

			v-for="(item, index) in exception.exception3"
			:key="item"
			>{{ item.name }}
			<span
			v-if="index < exception.exception3.length - 1"
			class="text-blank"
			>,</span
			>
			</DustExceptionText>
			</el-scrollbar>
			</div>
			<!-- 结束 -->
			</div>
			</el-col>
			<!-- 时间摘要 -->
			<el-row class="head-describtion-text" ref="h2">
			<el-row>
			<span> 金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span>
			</el-row>
			</el-row>

			<!-- 异常分析 -->
			<el-row ref="h3">
			<el-col>
			<el-card class="card-container">
			<template #header>
			<div class="card-header">异常分析</div>
			</template>

			<el-row :gutter="20" class="card-row">
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow1[0].siteName"
			:exception-type="cardRow1[0].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow1[0].exceptionName"
			:site-num="cardRow1[0].siteNum"
			:exception-num="cardRow1[0].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow1[0].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception4.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow1[1].siteName"
			:exception-type="cardRow1[1].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow1[1].exceptionName"
			:site-num="cardRow1[1].siteNum"
			:exception-num="cardRow1[1].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow1[1].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception5.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow1[2].siteName"
			:exception-type="cardRow1[2].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow1[2].exceptionName"
			:site-num="cardRow1[2].siteNum"
			:exception-num="cardRow1[2].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow1[2].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception6.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow1[3].siteName"
			:exception-type="cardRow1[3].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow1[3].exceptionName"
			:site-num="cardRow1[3].siteNum"
			:exception-num="cardRow1[3].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow1[3].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception7.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			</el-row>

			</el-card>
			</el-col>
			</el-row>
			<el-row :gutter="20">
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow2[0].siteName"
			:exception-type="cardRow2[0].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow2[0].exceptionName"
			:site-num="cardRow2[0].siteNum"
			:exception-num="cardRow2[0].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow2[0].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception0.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow2[1].siteName"
			:exception-type="cardRow2[1].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow2[1].exceptionName"
			:site-num="cardRow2[1].siteNum"
			:exception-num="cardRow2[1].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow2[1].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception1.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow2[2].siteName"
			:exception-type="cardRow2[2].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow2[2].exceptionName"
			:site-num="cardRow2[2].siteNum"
			:exception-num="cardRow2[2].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow2[2].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception2.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			<el-col :span="6">
			<AnalysisCard
			:site-name="cardRow2[3].siteName"
			:exception-type="cardRow2[3].exceptionType"
			:begin-time="beginTime"
			:end-time="endTime"
			:exception-name="cardRow2[3].exceptionName"
			:site-num="cardRow2[3].siteNum"
			:exception-num="cardRow2[3].exceptionNum"
			:exception-all-num="exceptionAllNum"
			:site-num-all="siteTotal"
			:isNoDataStatus="cardRow2[3].isNoDataStatus"
			@get-abnormal-data-by-click="getAbnormalDataByClick"
			>
			<img src="@/assets/exception/exception3.png" height="24" width="24" />
			</AnalysisCard>
			</el-col>
			</el-row>
			</el-card>
			</el-col>
			</el-row>

			<el-button-group>
			<el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow">
			显示异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
			</el-button>
			<el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow">
			隐藏异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
			</el-button>
			</el-button-group>

			<!-- 表格 -->
			<el-row v-show="isTableShow">
			<el-col>
			<el-table
			ref="table"
			:data="displayData"
			:height="tableHeight"
			:highlight-current-row="true"
			size="default"
			v-loading="loading.tableLoading"
			border
			>
			<el-table-column
			type="index"
			label="序号"
			width="60px"
			align="center"
			fixed
			:index="indexMethod1"
			/>
			<el-table-column prop="name" label="站点名称" show-overflow-tooltip />
			<el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
			<el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip />
			<el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
			<el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
			<el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
			<el-table-column
			prop="typename"
			label="场景"
			align="center"
			width="82"
			show-overflow-tooltip
			/>
			<el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
			<el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />

			<el-table-column label="操作" align="center">
			<template #default="{ row }">
			<el-button type="primary" class="table-button" @click="showDialog(row)"
			>查看详情</el-button
			>
			</template>
			</el-table-column>
			</el-table>

			<el-pagination
			ref="h4"
			background
			layout="total, sizes, prev, pager, next, jumper"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:total="total"
			:page-sizes="[10, 20, 50, 100]"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			>
			</el-pagination>
			</el-col>
			</el-row>

			<!-- 对话框 -->
			<el-dialog
			class="exception-dialog"
			v-model="dialogTableVisible"
			draggable
			align-center
			height="700px"
			width="700px"
			>
			<!-- 头 -->
			<template #header>
			<div class="diag-head">
			<div class="diag-head-text">
			<div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>
			<div>
			<span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}
			</div>
			<div>
			<span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}
			</div>
			<!-- <div>
			<span class="diag-head-text1">异常类型：</span>
			<span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '2'">超标</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '3'">数据长时间无波动</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '4'">量级突变异常</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '5'">临近超标异常</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '6'">单日超标次数临界异常</span>
			<span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span>
			</div> -->

			<div>
			<span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
			{{ tableCurrentRowData.endTime }}
			</div>
			</div>

			<!-- <div class="chart-jump-button">
			<el-button
			type="danger"
			:loading="loading.preButton"
			:disabled="dialog.isPreCantouch \|\| flag.banTouch"
			@click="getPreviousRowData"
			>上条异常</el-button
			>
			<el-button
			type="danger"
			:loading="loading.afterButton"
			:disabled="dialog.isNextCantouch \|\| flag.banTouch"
			@click="getNextRowData"
			>下条异常</el-button
			>
			</div> -->
			<div class="chart-jump-button">
			<el-button
			type="danger"
			:loading="loading.preButton"
			:disabled="dialog.isPreCantouch \|\| flag.banTouch"
			@click="getNextRowData"
			>上条异常</el-button
			>
			<el-button
			type="danger"
			:loading="loading.afterButton"
			:disabled="dialog.isNextCantouch \|\| flag.banTouch"
			@click="getPreviousRowData"
			>下条异常</el-button
			>
			</div>
			</div>
			</template>

			<!-- :option="dialog.option" -->

			<!-- 图形 -->
			<DustLineChart
			:option="dialog.option"
			:is-open-dialog="dialogTableVisible"
			v-loading="loading.lineChart"
			></DustLineChart>

			<!-- 表格 -->
			<div>
			<el-table :data="dialog.historyData" size="default" height="200" border>
			<el-table-column
			type="index"
			label="序号"
			width="60px"
			align="center"
			fixed
			:index="indexMethod2"
			></el-table-column>
			<!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
			<el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
			<el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> -->
			<el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
			<el-table-column
			prop="dustValue"
			label="颗粒物浓度(mg/m³)"
			align="center"
			show-overflow-tooltip
			/>
			</el-table>
			</div>
			<template #footer>
			<el-tag type="success" class="mx-1" effect="dark" round
			><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'"
			>缺失数据：
			</span>
			<span
			v-show="
			tableCurrentRowData.exceptionType == '1' \|\|
			tableCurrentRowData.exceptionType == '2' \|\|
			tableCurrentRowData.exceptionType == '3' \|\|
			tableCurrentRowData.exceptionType == '4'
			"
			>异常数据：</span
			>
			<span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
			<span v-show="tableCurrentRowData.exceptionType == '0'"> (逻辑计算)</span>
			</el-tag>
			</template>
			</el-dialog>
			</div>
			</template>

			<style lang="scss" scoped>
			@@ -1997,33 +1829,40 @@
			}

			/* 条件查询模块的样式 */
			.el-form {
			margin: 10px;
			}
			img {
			margin-right: 5px;
			}
			.head-container-search {
			// display: flex;
			// justify-content: flex-end;
			float: right;
			}

			.head-describtion-text {
			justify-content: flex-end;
			margin-bottom: 10px;
			margin-bottom: 2px;
			margin-right: 20px;
			font-size: 14px;
			color: gray;
			}
			.button-set {
			margin: 10px;
			}
			/* 条件查询模块结束 */



			/* 异常分析模块的样式 */

			.card-text1 {
			// 黑体的异常名字部分
			/* 黑体的异常名字部分 */
			margin: 10px;
			}
			.card-text1 + div {
			// 黑体的异常名字下面的
			/* 黑体的异常名字下面的 */
			margin: 12px;
			}
			.card-exception-buttom {
			// 异常站点文本按钮区域
			/* 异常站点文本按钮区域 */
			padding: 11px;
			}
			.card-header {
			@@ -2033,7 +1872,7 @@
			}
			.card-content-unnormal {
			min-height: 200px;
			border: 2px solid #FFCF8B;
			border: 2px solid #ffcf8b;
			border-radius: 20px;
			}
			.card-content-normal {
			@@ -2041,8 +1880,7 @@
			border: 2px solid red;
			border-radius: 20px;
			}
			.card-header-image {
			}

			.card-header-text {
			font-size: 16px;
			font-weight: bold;
			@@ -2053,19 +1891,18 @@
			white-space: nowrap;
			}
			.card-exceptionname-text1 {
			// 异常站点占比
			/* 异常站点占比 */
			font-size: 14px;
			white-space: nowrap;
			}

			.card-exceptionname-text2 {
			// 异常数占比的外边距
			// margin-left: 50px;
			/* 异常数占比的外边距 */
			font-size: 14px;
			white-space: nowrap;
			}
			.text-blank {
			// 逗号
			/* 逗号 */
			margin-right: 10px;
			color: #000000;
			}
			@@ -2075,33 +1912,36 @@

			/* 异常分析模块结束 */

			/* 表格模块的样式 */
			/* 隐藏表格按钮组样式 */
			.el-button-group {
			margin: 10px 0px 10px 10px;
			}
			.i-ep-Arrow {
			margin-left: 6px;
			margin-bottom: 2px;
			font-size: 1.2em;
			}
			/* 隐藏表格按钮组样式结束 */

			/* 表格模块的样式 */
			.el-table {
			color: #333333;
			}
			/* 表格模块结束 */





			/* 查看详情对话框模块的样式 */
			:deep(.el-dialog) {
			// 对话框高度
			}

			.diag-head {
			// 对话框头部区域
			/* 对话框头部区域 */
			min-height: 200px;
			// border: 1px solid #fdc2db;
			}
			.diag-head-text1 {
			// 对话框头部的属性字段加粗
			/* 对话框头部的属性字段加粗 */
			font-weight: bold;
			}
			.diag-head-text span:nth-child(2) {
			// 对话框头部‘异常类型’属性
			// margin-left: 150px;
			}

			.diag-head-text > div {
			// 对话框异常时间段
			/* 对话框异常时间段 */
			margin-top: 15px;
			}
			.diag-head-text {
			@@ -2111,25 +1951,14 @@
			border: 2px solid #7bc0fc;
			}
			.chart-jump-button {
			// ‘上一条’，‘下一条’ 按钮
			// border: 1px solid #fdc2db;
			min-height: 30px;
			width: 200px;
			float: right;
			display: flex;
			justify-content: right;
			}

			.line-chart {
			// 异常折线图
			width: 920px;
			height: 300px;
			margin-bottom: 20px;
			min-width: 600px;
			}
			.mx-1 {
			position: absolute;
			left: 10px;
			bottom: 10px;

			}
			/* 查看详情对话框模块结束 */
			</style>