IStation/Web.PHM.V1.git

			@@ -1,550 +1,2063 @@
			<template>
			<div class="preview-page">
			<fks-row :gutter="20" style="width:100%;height:100%;">
			<fks-col :span="4" style="height:100%">
			<div class="model-binding-left-box">
			<titleBox title="泵站列表"></titleBox>
			<fks-tree
			ref="tree"
			:data="treeData"
			:props="defaultProps"
			:show-icon="true"
			default-expand-all
			node-key="id"
			current-node-key="1"
			:highlight-current="true"
			<fks-row :gutter="20" style="width: 100%; height: 100%">
			<fks-col :span="4" style="height: 100%">
			<div class="model-binding-left-box">
			<titleBox title="泵站列表"></titleBox>
			<fks-tree
			ref="tree"
			:data="treeData"
			:props="defaultProps"
			:show-icon="true"
			default-expand-all
			node-key="id"
			current-node-key="1"
			:highlight-current="true"
			>
			</fks-tree>
			</div>
			</fks-col>
			<fks-col :span="20" style="height: 100%">
			<div class="model-binding-right-box">
			<titleBox title="金刚沱泵站"></titleBox>
			<div style="width: 100%; height: calc(100% - 40px)">
			<div class="bimface-model">
			<div
			style="width: 100%; height: 100%"
			id="bimContainer"
			ref="bfContainer"
			></div>
			</div>
			<div class="bottom-tabs-div">
			<fks-tabs type="border-card">
			<fks-tab-pane label="健康评价">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date1"
			type="date"
			placeholder="选择日期"
			>
			</fks-tree>
			</fks-date-picker>
			<fks-button type="primary" style="margin-left: 10px"
			>加载</fks-button
			>
			</div>
			<div id="healthRate" class="health-rate-chart"></div>
			</fks-tab-pane>
			<fks-tab-pane label="故障诊断">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date2"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			>
			</fks-date-picker>
			<fks-button
			type="primary"
			icon="fks-icon-search"
			style="margin-left: 10px"
			>搜索</fks-button
			>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="brokenTableData"
			style="width: 100%; margin-top: 15px"
			>
			<fks-table-column prop="name" label="名称" width="180">
			</fks-table-column>
			<fks-table-column prop="broken" label="故障" width="180">
			</fks-table-column>
			<fks-table-column prop="version" label="故障树版本">
			</fks-table-column>
			<fks-table-column prop="diagnosticModel" label="诊断模型">
			</fks-table-column>
			<fks-table-column prop="diagnoser" label="诊断人">
			</fks-table-column>
			<fks-table-column prop="desc" label="说明">
			</fks-table-column>
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="text"
			size="mini"
			@click="
			handleDetailByBroken(scope.$index, scope.row)
			"
			>详细</fks-button
			>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			<fks-tab-pane label="时序趋势分析">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date3"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			>
			</fks-date-picker>
			<fks-button
			type="primary"
			icon="fks-icon-search"
			style="margin-left: 10px"
			>搜索</fks-button
			>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="sequentialTableData"
			style="width: 100%; margin-top: 15px"
			>
			<fks-table-column prop="point" label="测点" width="180">
			</fks-table-column>
			<fks-table-column prop="signal" label="信号" width="180">
			</fks-table-column>
			<fks-table-column prop="model" label="预警模型">
			</fks-table-column>
			<fks-table-column prop="startDate" label="发生时间">
			</fks-table-column>
			<fks-table-column prop="endDate" label="记录时间">
			</fks-table-column>
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="text"
			size="mini"
			@click="
			handleDetailBySequential(scope.$index, scope.row)
			"
			>详细</fks-button
			>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			<fks-tab-pane label="专家趋势分析">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date4"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			>
			</fks-date-picker>
			<fks-button
			type="primary"
			icon="fks-icon-search"
			style="margin-left: 10px"
			>搜索</fks-button
			>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="expertTrendsTableData"
			style="width: 100%; margin-top: 15px"
			>
			<fks-table-column prop="point" label="测点">
			</fks-table-column>
			<fks-table-column prop="signal" label="信号">
			</fks-table-column>
			<fks-table-column prop="model" label="预警模型">
			</fks-table-column>
			<fks-table-column prop="value" label="阀值">
			</fks-table-column>
			<fks-table-column prop="userName" label="分析人">
			</fks-table-column>
			<fks-table-column prop="startDate" label="发生时间">
			</fks-table-column>
			<fks-table-column prop="endDate" label="记录时间">
			</fks-table-column>
			<!-- <fks-table-column prop="note" label="说明"> </fks-table-column> -->
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="text"
			size="mini"
			@click="
			handleDetailByExpertTrends(
			scope.$index,
			scope.row
			)
			"
			>详细</fks-button
			>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			</fks-tabs>
			</div>
			</fks-col>
			<fks-col :span="20" style="height:100%;">
			<div class="model-binding-right-box">
			<titleBox title="金刚沱泵站"></titleBox>
			<div style="width:100%;height: calc(100% - 40px);">
			<div class="bimface-model">
			<img src="@/assets/images/BIM.jpg">
			</div>
			<div class="bottom-tabs-div">
			<fks-tabs type="border-card">
			<fks-tab-pane label="健康评价">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date1"
			type="date"
			placeholder="选择日期">
			</fks-date-picker>
			<fks-button type="primary" style="margin-left:10px;">加载</fks-button>
			</div>
			<div id="healthRate" class="health-rate-chart"></div>
			</fks-tab-pane>
			<fks-tab-pane label="故障诊断">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date2"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</fks-date-picker>
			<fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="brokenTableData"
			style="width: 100%;margin-top:15px;">
			<fks-table-column
			prop="name"
			label="名称"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="broken"
			label="故障"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="version"
			label="故障树版本">
			</fks-table-column>
			<fks-table-column
			prop="diagnosticModel"
			label="诊断模型">
			</fks-table-column>
			<fks-table-column
			prop="diagnoser"
			label="诊断人">
			</fks-table-column>
			<fks-table-column
			prop="desc"
			label="说明">
			</fks-table-column>
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="primary"
			size="mini"
			@click="handleDetailByBroken(scope.$index, scope.row)">详细</fks-button>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			<fks-tab-pane label="时序趋势分析">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date3"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</fks-date-picker>
			<fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="sequentialTableData"
			style="width: 100%;margin-top:15px;">
			<fks-table-column
			prop="point"
			label="测点"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="signal"
			label="信号"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="earlyWarnModel"
			label="预警时间">
			</fks-table-column>
			<fks-table-column
			prop="occurrenceTime"
			label="发生时间">
			</fks-table-column>
			<fks-table-column
			prop="recordTime"
			label="记录时间">
			</fks-table-column>
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="primary"
			size="mini"
			@click="handleDetailBySequential(scope.$index, scope.row)">详细</fks-button>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			<fks-tab-pane label="专家趋势分析">
			<div class="time-pick-div">
			<label>开始时间：</label>
			<fks-date-picker
			v-model="date4"
			type="daterange"
			range-separator="~"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</fks-date-picker>
			<fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
			</div>
			<div class="table-box-div">
			<fks-table
			border
			:data="expertTrendsTableData"
			style="width: 100%;margin-top:15px;">
			<fks-table-column
			prop="point"
			label="测点"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="signal"
			label="信号"
			width="180">
			</fks-table-column>
			<fks-table-column
			prop="analysisMethod"
			label="分析方法">
			</fks-table-column>
			<fks-table-column
			prop="direction"
			label="方向">
			</fks-table-column>
			<fks-table-column
			prop="threshold"
			label="阀值">
			</fks-table-column>
			<fks-table-column
			prop="analyst"
			label="分析人">
			</fks-table-column>
			<fks-table-column
			prop="occurrenceTime"
			label="发生时间">
			</fks-table-column>
			<fks-table-column
			prop="recordTime"
			label="记录时间">
			</fks-table-column>
			<fks-table-column label="操作">
			<template slot-scope="scope">
			<fks-button
			type="primary"
			size="mini"
			@click="handleDetailByExpertTrends(scope.$index, scope.row)">详细</fks-button>
			</template>
			</fks-table-column>
			</fks-table>
			</div>
			</fks-tab-pane>
			</fks-tabs>
			</div>
			</div>
			</div>
			</fks-col>
			</div>
			</div>
			</fks-col>
			</fks-row>
			<!-- 故障诊断报告详情 -->
			<fks-dialog
			title="测试01"
			:visible.sync="brokenDownDialog"
			>
			title="测试01"
			width="80%"
			:visible.sync="detailFaultReportVisible"
			class="reportDialog"
			>
			<div style="width: 100%; height: 100%">
			<div class="baogaotopbox">
			<div class="baogaotopboxleft">
			<titleBoxVue title="故障诊断报告概况"> </titleBoxVue>

			<div slot="footer" class="dialog-footer">
			<fks-button @click="brokenDownDialog = false">取消</fks-button>
			<fks-button type="primary" @click="brokenDownDialog = false">确定</fks-button>
			<fks-form
			style="width: 100%; height: calc(100% - 40px)"
			:model="FaultReportForm"
			label-width="80px"
			>
			<fks-form-item label="名称">
			<fks-input
			v-model="FaultReportForm.name"
			autocomplete="off"
			></fks-input>
			</fks-form-item>

			<fks-row :gutter="10">
			<fks-col :span="12">
			<fks-form-item label="泵站">
			<fks-input
			v-model="FaultReportForm.station"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="12">
			<fks-form-item label="设备">
			<fks-input
			v-model="FaultReportForm.product"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="10">
			<fks-col :span="12">
			<fks-form-item label="故障">
			<fks-input
			v-model="FaultReportForm.fault"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="12">
			<fks-form-item label="诊断模型">
			<fks-input
			v-model="FaultReportForm.model"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="10">
			<fks-col :span="12">
			<fks-form-item label="诊断人">
			<fks-input
			v-model="FaultReportForm.username"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="12">
			<fks-form-item label="诊断事件">
			<fks-input
			v-model="FaultReportForm.date"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-form-item label="说明">
			<fks-input
			type="textarea"
			:rows="3"
			autocomplete="off"
			v-model="FaultReportForm.note"
			>
			</fks-input>
			</fks-form-item>
			</fks-form>
			</div>
			<div class="baogaotopboxright">
			<titleBoxVue title="故障诊断结果"> </titleBoxVue>
			<fks-table
			stripe
			ref="table"
			:data.sync="tableData5"
			style="width: 100%; height: calc(100% - 40px)"
			row-key="id"
			>
			<fks-table-column prop="name" label="最小割集">
			</fks-table-column>
			<fks-table-column prop="zhibiao" label="发生原因">
			</fks-table-column>
			<fks-table-column prop="fangfa" label="处理建议">
			</fks-table-column>
			<fks-table-column prop="gailv" label="发生概率">
			</fks-table-column>
			</fks-table>
			</div>
			</div>
			<div class="baogaobottombox">
			<div class="baogaobottomboxleft">
			<titleBoxVue title="故障树底部重要事件"> </titleBoxVue>
			<fks-table
			stripe
			ref="table"
			:data.sync="tableData6"
			style="width: 100%; height: calc(100% - 40px)"
			row-key="id"
			>
			<fks-table-column prop="name" label="底事件"> </fks-table-column>
			<fks-table-column prop="gailv" label="发生概率">
			</fks-table-column>
			</fks-table>
			</div>
			<div class="baogaobottomboxright">
			<titleBoxVue title="诊断项"> </titleBoxVue>
			<fks-table
			stripe
			ref="table"
			:data.sync="tableData4"
			style="width: 100%; height: calc(100% - 40px)"
			row-key="id"
			>
			<fks-table-column prop="name" label="故障事件" width="120">
			</fks-table-column>
			<fks-table-column prop="zhibiao" label="指标" width="100">
			</fks-table-column>

			<fks-table-column prop="fangfa" label="计算方法" width="120">
			</fks-table-column>
			<fks-table-column prop="canshu" label="判断参数" width="320">
			</fks-table-column>
			<fks-table-column prop="note" label="说明"> </fks-table-column>
			<fks-table-column prop="gailv" label="发生概率" width="100">
			</fks-table-column>
			</fks-table>
			</div>
			</div>
			</div>
			</fks-dialog>
			<!-- 故障诊断报告详情 -->
			<fks-dialog
			title="时序趋势预警记录详细"
			:visible.sync="sequentialDialog"
			>

			<div slot="footer" class="dialog-footer">
			<fks-button @click="sequentialDialog = false">取消</fks-button>
			<fks-button type="primary" @click="sequentialDialog = false">确定</fks-button>
			<!-- 时序趋势预警记录详细 -->
			<fks-dialog
			title="时序趋势预警记录详细"
			width="80%"
			top="100px"
			:visible.sync="editTrendFunVisible"
			class="reportDialog"
			>
			<div>
			<titleBoxVue style="background-color: #fff" title="概况"> </titleBoxVue>
			<fks-form
			style="
			width: 100%;
			height: calc(100% - 50px);
			margin: 10px 0 0 0;
			background-color: #fff;
			padding-top: 10px;
			"
			:model="editTrendFunFrom"
			label-width="80px"
			>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="泵站">
			<fks-input
			v-model="editTrendFunFrom.name"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="设备">
			<fks-input
			v-model="editTrendFunFrom.product"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="测点">
			<fks-input
			v-model="editTrendFunFrom.point"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="指标">
			<fks-input
			v-model="editTrendFunFrom.signal"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="分析方法">
			<fks-input
			v-model="editTrendFunFrom.model"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="方向">
			<fks-input
			v-model="editTrendFunFrom.fangxiang"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="阀值">
			<fks-input
			v-model="editTrendFunFrom.value"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="分析时间">
			<fks-input
			v-model="editTrendFunFrom.time"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="记录时间">
			<fks-input
			v-model="editTrendFunFrom.endDate"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="预测时间">
			<fks-input
			v-model="editTrendFunFrom.startDate"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>

			<fks-form-item label="说明">
			<fks-input
			type="textarea"
			:rows="2"
			autocomplete="off"
			v-model="editTrendFunFrom.note"
			>
			</fks-input>
			</fks-form-item>
			</fks-form>
			</div>

			<div class="dialogBottom">
			<div class="dialogBottomLeft">
			<titleBoxVue style="background-color: #fff" title="历史数据图">
			</titleBoxVue>
			<div
			id="chartLeftRecordPreview"
			style="height: calc(100% - 40px)"
			></div>
			</div>
			<div class="dialogBottomRight">
			<titleBoxVue style="background-color: #fff" title="趋势预警图">
			</titleBoxVue>
			<div
			id="chartRightRecordPreview"
			style="height: calc(100% - 40px)"
			></div>
			</div>
			</div>
			</fks-dialog>
			<!-- 故障诊断报告详情 -->
			<fks-dialog
			title="专家趋势分析预警记录详细"
			:visible.sync="expertTrendsDialog"
			>

			<div slot="footer" class="dialog-footer">
			<fks-button @click="expertTrendsDialog = false">取消</fks-button>
			<fks-button type="primary" @click="expertTrendsDialog = false">确定</fks-button>
			<!-- 专家趋势预警记录详细-->
			<fks-dialog
			title="专家趋势预警记录详细"
			width="80%"
			top="100px"
			:visible.sync="editTrendFunVisible2"
			class="reportDialog"
			>
			<div>
			<titleBoxVue style="background-color: #fff" title="概况"> </titleBoxVue>
			<fks-form
			style="
			width: 100%;
			height: calc(100% - 50px);
			margin: 10px 0 0 0;
			background-color: #fff;
			padding-top: 10px;
			"
			:model="editTrendFunFrom2"
			label-width="80px"
			>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="泵站">
			<fks-input
			v-model="editTrendFunFrom2.name"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="设备">
			<fks-input
			v-model="editTrendFunFrom2.product"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="测点">
			<fks-input
			v-model="editTrendFunFrom2.point"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="指标">
			<fks-input
			v-model="editTrendFunFrom2.signal"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="分析方法">
			<fks-input
			v-model="editTrendFunFrom2.model"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="方向">
			<fks-input
			v-model="editTrendFunFrom2.fangxiang"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="阀值">
			<fks-input
			v-model="editTrendFunFrom2.value"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="分析人">
			<fks-input
			v-model="editTrendFunFrom2.userName"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			<fks-col :span="8">
			<fks-form-item label="记录时间">
			<fks-input
			v-model="editTrendFunFrom2.endDate"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>
			<fks-row :gutter="20">
			<fks-col :span="8">
			<fks-form-item label="预测时间">
			<fks-input
			v-model="editTrendFunFrom2.startDate"
			autocomplete="off"
			></fks-input>
			</fks-form-item>
			</fks-col>
			</fks-row>

			<fks-form-item label="说明">
			<fks-input
			type="textarea"
			:rows="2"
			autocomplete="off"
			v-model="editTrendFunFrom2.note"
			>
			</fks-input>
			</fks-form-item>
			</fks-form>
			</div>

			<div class="dialogBottom">
			<div class="dialogBottomLeft">
			<titleBoxVue style="background-color: #fff" title="历史数据图">
			</titleBoxVue>
			<div
			id="chartLeftRecordPreview2"
			style="height: calc(100% - 40px)"
			></div>
			</div>
			<div class="dialogBottomRight">
			<titleBoxVue style="background-color: #fff" title="趋势预警图">
			</titleBoxVue>
			<div
			id="chartRightRecordPreview2"
			style="height: calc(100% - 40px)"
			></div>
			</div>
			</div>
			</fks-dialog>
			</div>
			</template>

			<script>
			import * as echarts from 'echarts';
			import titleBox from "@/views/main/components/titleBox.vue"
			import * as echarts from "echarts";
			import titleBox from "@/views/main/components/titleBox.vue";
			import titleBoxVue from "@/views/main/components/titleBox.vue";
			import testData from "@/testData/testData";
			import bfHelper from "@/utils/istation/bfHelper";
			import { getBimAccessToken } from "@/api/bim";

			const bfHelperPump = new bfHelper();
			let healthRateObj = {
			chartDom: "",
			myChart: "",
			option: ""
			}
			chartDom: "",
			myChart: "",
			option: "",
			};

			let m_chartQH;
			let m_chartMain;
			let m_chartQH2;
			let m_chartMain2;
			export default {
			components:{titleBox},
			data(){
			return {
			date1:"",
			date2:"",
			date3:"",
			date4:"",
			brokenDownDialog:false,
			sequentialDialog:false,
			expertTrendsDialog:false,
			treeData:[
			{
			label: "金刚沱泵站",
			id:'1',
			},
			{
			label: "嘉陵江草街泵站",
			id:'2',
			},
			{
			label: "江律德感加压泵站",
			id:'3',
			},
			{
			label: "永川临江加压站",
			id:'4',
			},
			],
			defaultProps: {
			children: "children",
			label: "label",
			},
			healthRateChartData:[
			{
			DataTime: "2023-01-05 23:54:52",
			DataValue: "10",
			},
			{
			DataTime: "2023-01-04 22:30:52",
			DataValue: "11",
			},{
			DataTime: "2023-01-02 21:50:52",
			DataValue: "13",
			},{
			DataTime: "2023-01-01 20:44:52",
			DataValue: "12",
			},{
			DataTime: "2023-01-02 19:44:52",
			DataValue: "14",
			},{
			DataTime: "2023-01-01 09:04:52",
			DataValue: "16",
			},{
			DataTime: "2023-01-02 07:04:52",
			DataValue: "18",
			},{
			DataTime: "2023-01-03 06:51:52",
			DataValue: "20",
			},{
			DataTime: "2023-01-04 10:14:52",
			DataValue: "21",
			},{
			DataTime: "2023-01-05 20:33:52",
			DataValue: "24",
			},{
			DataTime: "2023-01-05 23:15:52",
			DataValue: "22",
			},{
			DataTime: "2023-01-05 23:54:52",
			DataValue: "22",
			},{
			DataTime: "2023-01-05 03:12:52",
			DataValue: "23",
			},{
			DataTime: "2023-01-05 09:21:52",
			DataValue: "21",
			},{
			DataTime: "2023-01-05 20:48:52",
			DataValue: "15",
			},{
			DataTime: "2023-01-05 19:54:52",
			DataValue: "16",
			},{
			DataTime: "2023-01-05 19:36:52",
			DataValue: "18",
			},{
			DataTime: "2023-01-05 19:22:52",
			DataValue: "15",
			},
			],
			brokenTableData:[
			{
			name:"测试01",
			broken:"水泵无法启动",
			version:"版本01",
			diagnosticModel:"模型01",
			diagnoser:"管理员",
			desc:""
			},
			{
			name:"测试02",
			broken:"水泵出口压力过低",
			version:"版本01",
			diagnosticModel:"模型01",
			diagnoser:"管理员",
			desc:""
			},
			{
			name:"测试03",
			broken:"水泵不吸水",
			version:"版本01",
			diagnosticModel:"模型01",
			diagnoser:"管理员",
			desc:""
			},
			],
			sequentialTableData:[
			{
			point:"驱动端X方向振动",
			signal:"有效值",
			earlyWarnModel:"一阶平滑分析",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			{
			point:"驱动端X方向振动",
			signal:"峭度",
			earlyWarnModel:"阻尼趋势预测分析",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			{
			point:"驱动端X方向振动",
			signal:"歪度",
			earlyWarnModel:"二阶平滑分析",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			],
			expertTrendsTableData:[
			{
			point:"驱动端X方向振动",
			signal:"有效值",
			analysisMethod:"一阶平滑分析",
			direction:"正向",
			threshold:"0.6",
			analyst:"专家",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			{
			point:"驱动端X方向振动",
			signal:"峭度",
			analysisMethod:"阻尼趋势预测分析",
			direction:"正向",
			threshold:"0.6",
			analyst:"专家",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			{
			point:"驱动端X方向振动",
			signal:"歪度",
			analysisMethod:"自定义",
			direction:"正向",
			threshold:"0.6",
			analyst:"专家",
			occurrenceTime:"2023-1-11",
			recordTime:"2023-1-1",
			},
			]
			components: { titleBox, titleBoxVue },
			data() {
			return {
			date1: "",
			date2: "",
			date3: "",
			date4: "",
			detailFaultReportVisible: false,
			sequentialDialog: false,
			expertTrendsDialog: false,
			treeData: [
			{
			label: "金刚沱泵站",
			id: "1",
			},
			{
			label: "嘉陵江草街泵站",
			id: "2",
			},
			{
			label: "江律德感加压泵站",
			id: "3",
			},
			{
			label: "永川临江加压站",
			id: "4",
			},
			],
			defaultProps: {
			children: "children",
			label: "label",
			},
			healthRateChartData: [
			{
			DataTime: "2023-01-05 23:54:52",
			DataValue: "10",
			},
			{
			DataTime: "2023-01-04 22:30:52",
			DataValue: "11",
			},
			{
			DataTime: "2023-01-02 21:50:52",
			DataValue: "13",
			},
			{
			DataTime: "2023-01-01 20:44:52",
			DataValue: "12",
			},
			{
			DataTime: "2023-01-02 19:44:52",
			DataValue: "14",
			},
			{
			DataTime: "2023-01-01 09:04:52",
			DataValue: "16",
			},
			{
			DataTime: "2023-01-02 07:04:52",
			DataValue: "18",
			},
			{
			DataTime: "2023-01-03 06:51:52",
			DataValue: "20",
			},
			{
			DataTime: "2023-01-04 10:14:52",
			DataValue: "21",
			},
			{
			DataTime: "2023-01-05 20:33:52",
			DataValue: "24",
			},
			{
			DataTime: "2023-01-05 23:15:52",
			DataValue: "22",
			},
			{
			DataTime: "2023-01-05 23:54:52",
			DataValue: "22",
			},
			{
			DataTime: "2023-01-05 03:12:52",
			DataValue: "23",
			},
			{
			DataTime: "2023-01-05 09:21:52",
			DataValue: "21",
			},
			{
			DataTime: "2023-01-05 20:48:52",
			DataValue: "15",
			},
			{
			DataTime: "2023-01-05 19:54:52",
			DataValue: "16",
			},
			{
			DataTime: "2023-01-05 19:36:52",
			DataValue: "18",
			},
			{
			DataTime: "2023-01-05 19:22:52",
			DataValue: "15",
			},
			],
			brokenTableData: [
			{
			name: "测试01",
			broken: "水泵无法启动",
			version: "版本01",
			diagnosticModel: "模型01",
			diagnoser: "管理员",
			desc: "",
			},
			{
			name: "测试02",
			broken: "水泵出口压力过低",
			version: "版本01",
			diagnosticModel: "模型01",
			diagnoser: "管理员",
			desc: "",
			},
			{
			name: "测试03",
			broken: "水泵不吸水",
			version: "版本01",
			diagnosticModel: "模型01",
			diagnoser: "管理员",
			desc: "",
			},
			],
			sequentialTableData: [
			{
			id: 1,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "有效值",
			model: "一阶平滑分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			},
			{
			id: 2,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "峭度",
			model: "阻尼趋势预测分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			},
			{
			id: 3,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "歪度",
			model: "二阶平滑分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			},
			],
			expertTrendsTableData: [
			{
			id: 1,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "有效值",
			model: "一阶平滑分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			userName: "专家",
			},
			{
			id: 2,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "峭度",
			model: "阻尼趋势预测分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			userName: "专家",
			},
			{
			id: 3,
			name: "金刚沱泵站",
			product: "1#泵",
			point: "驱动端X方向振动",
			signal: "歪度",
			model: "二阶平滑分析",
			startDate: "2023-1-11",
			endDate: "2023-1-11",
			value: "0.6",
			time: "30天",
			fangxiang: "正向",
			userName: "专家",
			},
			],
			editTrendFunVisible: false,
			editTrendFunVisible2: false,
			editTrendFunFrom: {
			name: "",
			product: "",
			point: "",
			signal: "",
			model: "",
			startDate: "",
			endDate: "",
			value: "",
			time: "",
			fangxiang: "",
			note: "",
			},
			editTrendFunFrom2: {
			name: "",
			product: "",
			point: "",
			signal: "",
			model: "",
			startDate: "",
			endDate: "",
			value: "",
			time: "",
			fangxiang: "",
			userName: "",
			note: "",
			},
			FaultReportForm: {
			name: "测试01",
			station: "测试01",
			product: "1#泵",
			fault: "水泵无法启动",
			model: "模型01",
			username: "管理员",
			date: "2023-1-1",
			note: "",
			},
			tableData4: [
			{
			name: "弹簧力不足",
			zhibiao: "压力",
			fangfa: "自动",
			canshu: "1.<0.2MPa=0.3;2.<0.1=0.7",
			gailv: 0.3,
			note: "",
			},
			{
			name: "接触面有异物",
			zhibiao: "表面光滑度",
			fangfa: "人工",
			canshu: "1.有较少杂物=0.1；2.有较多杂物=0.5",
			gailv: 0.6,
			note: "",
			},
			],
			tableData5: [
			{
			name: "弹簧压力、表面光滑度",
			zhibiao: "压力不足，有异物",
			fangfa: "更换弹簧，清理异常",
			gailv: 0.6,
			},
			{
			name: "轴承故障、绕组破损",
			zhibiao: "轴承、绕组出现问题",
			fangfa: "更换轴承、绕组",
			gailv: 0.5,
			},
			],
			tableData6: [
			{
			name: "弹簧力不足",
			gailv: 0.3,
			},
			{
			name: "表面有异物",
			gailv: 0.5,
			},
			],
			bimLoading: false,
			};
			},
			mounted() {
			setTimeout(() => {
			this.initHealthRateChart();
			this.getBimAccessToken();
			}, 100);
			},
			methods: {
			getBimAccessToken(fileid) {
			fileid = "2023011525093568";
			let _this = this;

			getBimAccessToken({ BimfaceID: fileid })
			.then((res) => {
			let resData = res;
			// console.log(resData,res, 586);
			if (resData.Code != 0) {
			_this.$message(resData.Message);
			return;
			}
			var tokendata = resData.Data;

			if (tokendata != null) {
			var bim_token = tokendata;

			const domElement = this.$refs.bfContainer;
			bfHelperPump.loadModel(bim_token, domElement, () => {
			_this.bimLoading = false;
			bfHelperPump.setUIHide([
			"#bimContainer div[title='目录树']",
			"#bimContainer .gld-bf-settings",
			"#bimContainer .gld-bf-properties",
			"#bimContainer .gld-bf-map",
			"#bimContainer .gld-bf-firstperson",
			"#bimContainer .gld-bf-sectionbox",
			"#bimContainer .gld-bf-measure",
			"#bimContainer .gld-bf-information",
			"#bimContainer .gld-bf-zoomrect",
			"#bimContainer .gld-bf-maximize",
			"#bimContainer .viewButton",
			"#bimContainer .gld-bf-section-axial",
			"#bimContainer .btn-bimCmd-CalcInfo",
			"#bimContainer .gld-bf-home",
			"#bimContainer .bf-toolbar.bf-toolbar-bottom",
			]);

			var tempArr = [];
			bfHelperPump.onClick((d) => {
			console.log(d, "objectdata");
			});

			//设置外墙半透明状态
			bfHelperPump.setTransparentComponentsById([
			"433049",
			"580665",
			"432971",
			"432877",
			"433138",
			"437250",
			"585904",
			"590920",
			"595541",
			"589948",
			"587307",
			"588471",
			"543682",
			"598808",
			]);
			});
			}
			})
			.catch((error) => {});
			},
			initHealthRateChart() {
			healthRateObj.chartDom = document.getElementById("healthRate");
			healthRateObj.myChart = echarts.init(healthRateObj.chartDom);
			let xData = [];
			let yData = [];
			this.healthRateChartData.forEach((item) => {
			xData.push(item.DataTime);
			yData.push(item.DataValue);
			});
			healthRateObj.option = {
			xAxis: {
			type: "category",
			boundaryGap: false,
			name: "时间",
			data: xData,
			},
			grid: {
			top: 20,
			bottom: 20,
			left: 60,
			right: 40,
			},
			yAxis: {
			type: "value",
			min: 0,
			max: 100,
			name: "扣分",
			nameGap: 35,
			nameLocation: "center",
			// boundaryGap: x.boundaryGap,
			scale: true,
			axisLine: {
			show: true,
			},
			},
			series: [
			{
			data: yData,
			type: "line",
			smooth: true,
			},
			],
			};
			healthRateObj.option &&
			healthRateObj.myChart.setOption(healthRateObj.option);
			},
			//故障诊断详情
			handleDetailByBroken(index, item) {
			this.detailFaultReportVisible = true;
			},
			//时序趋势分析详情
			handleDetailBySequential(index, row) {
			this.editTrendFunVisible = true;
			this.editTrendFunFrom.name = row.name;
			this.editTrendFunFrom.product = row.product;
			this.editTrendFunFrom.point = row.point;
			this.editTrendFunFrom.signal = row.signal;
			this.editTrendFunFrom.model = row.model;
			this.editTrendFunFrom.value = row.value;
			this.editTrendFunFrom.startDate = row.startDate;
			this.editTrendFunFrom.endDate = row.endDate;
			this.editTrendFunFrom.time = row.time;
			this.editTrendFunFrom.fangxiang = row.fangxiang;
			this.editTrendFunFrom.note = row.note;

			setTimeout(() => {
			this.initChartLeft(testData.recordData.Data);
			this.initChartRight();
			}, 10);
			},
			//专家趋势分析详情
			handleDetailByExpertTrends(index, row) {
			this.editTrendFunVisible2 = true;
			this.editTrendFunFrom2.name = row.name;
			this.editTrendFunFrom2.product = row.product;
			this.editTrendFunFrom2.point = row.point;
			this.editTrendFunFrom2.signal = row.signal;
			this.editTrendFunFrom2.model = row.model;
			this.editTrendFunFrom2.value = row.value;
			this.editTrendFunFrom2.startDate = row.startDate;
			this.editTrendFunFrom2.endDate = row.endDate;
			this.editTrendFunFrom2.time = row.time;
			this.editTrendFunFrom2.fangxiang = row.fangxiang;
			this.editTrendFunFrom2.userName = row.userName;
			this.editTrendFunFrom2.note = row.note;

			setTimeout(() => {
			this.initChartLeft2(testData.recordData.Data);
			this.initChartRight2();
			}, 10);
			},
			initChartLeft(recordList_ds) {
			if (m_chartMain) {
			m_chartMain.clear();
			}
			m_chartMain = echarts.init(
			document.getElementById("chartLeftRecordPreview")
			);

			let m_unitName = "MPa";
			let m_recordName = "压力";

			let m_chartRecordList = [];
			let m_alarmList = [];
			var series_arr = [];
			var yaxisName = "";
			var legendData = [];
			var tipUnitName = "";
			if (recordList_ds == null \|\| recordList_ds.length == 0) return;

			yaxisName = m_recordName + "(" + m_unitName + ")";
			tipUnitName = m_unitName;
			//console.log(recordList_ds, 243)
			let baseDate =
			new Date(recordList_ds[0].DataTime).getFullYear() +
			"-" +
			(new Date(recordList_ds[0].DataTime).getMonth() + 1) +
			"-" +
			new Date(recordList_ds[0].DataTime).getDate();

			var lastTime = null;
			var ignore_time = 1000 * 60 * 10;

			var chart_series_record_arr = [];
			var chart_series_alarm_arr = [];

			let m_chartValueSeriesList = [];
			let teShuDian = ["3053", "3054", "3055", "3056", "3057", "3058"];
			var nn = recordList_ds.length;
			for (var i = 0; i < nn; i++) {
			var record = recordList_ds[i];
			var real_time = record.DataTime;
			var real_value = record.DataValue;

			var dataValue = { value: [real_time, real_value] };
			var alarmValue = null;
			if ((record.RecordStatus & 2) == 2) {
			alarmValue = { value: real_value, coord: [real_time, real_value] };
			// m_alarmList.push(alarmValue)
			}
			},
			mounted(){
			setTimeout(() => {
			this.initHealthRateChart()
			}, 100);
			},
			methods:{
			initHealthRateChart(){
			healthRateObj.chartDom = document.getElementById('healthRate')
			healthRateObj.myChart = echarts.init(healthRateObj.chartDom);
			let xData = []
			let yData = []
			this.healthRateChartData.forEach(item=>{
			xData.push(item.DataTime)
			yData.push(item.DataValue)
			})
			healthRateObj.option = {
			xAxis: {
			type: 'category',
			boundaryGap: false,
			name: "时间",
			data:xData
			},
			grid:{
			top:20,
			bottom:20,
			left:50,
			right:40
			},
			yAxis: {
			type: 'value',
			min:0,
			max:100,
			name: "扣分",
			nameGap: 35,
			nameLocation: "center",
			// boundaryGap: x.boundaryGap,
			scale: true,
			axisLine: {
			show: true,
			},
			},
			series: [
			{
			data: yData,
			type: 'line',
			smooth: true
			}
			]
			};
			healthRateObj.option && healthRateObj.myChart.setOption(healthRateObj.option);
			},
			//故障诊断详情
			handleDetailByBroken(index,item){
			this.brokenDownDialog = true
			},
			//时序趋势分析详情
			handleDetailBySequential(index,item){
			this.sequentialDialog = true
			},
			//专家趋势分析详情
			handleDetailByExpertTrends(index,item){
			this.expertTrendsDialog = true

			if (lastTime == null) {
			lastTime = new Date(real_time).getTime();
			}
			if (new Date(real_time).getTime() - lastTime > ignore_time) {
			if (chart_series_record_arr.length > 3) {
			m_chartValueSeriesList.push({
			record: chart_series_record_arr,
			alarm: chart_series_alarm_arr,
			});
			}
			chart_series_record_arr = [];
			chart_series_alarm_arr = [];
			}

			chart_series_record_arr.push(dataValue);
			if (alarmValue != null) {
			chart_series_alarm_arr.push(alarmValue);
			}

			lastTime = new Date(real_time).getTime();
			}
			m_chartValueSeriesList.push({
			record: chart_series_record_arr,
			alarm: chart_series_alarm_arr,
			});

			var color_curve = "#4169E1";
			let showSymbol = false;
			let min = null;
			let max = null;
			let interval = null;

			min = baseDate + " 00:00:00";
			max = baseDate + " 23:59:59";
			interval = 1000 * 60 * 60 * 2;
			//console.log(m_chartValueSeriesList)
			for (var i = 0; i < m_chartValueSeriesList.length; i++) {
			series_arr.push({
			name: m_recordName,
			type: "line",
			showSymbol: showSymbol,
			hoverAnimation: false,
			data: m_chartValueSeriesList[i].record,
			itemStyle: {
			color: color_curve,
			},
			});
			}

			var main_chart_option = {
			title: {
			text: "",
			},
			legend: {
			data: legendData,
			top: 30,
			right: 50,
			},
			tooltip: {
			trigger: "axis",
			formatter: function (params) {
			//console.log(params);
			var tip = "";
			var date = new Date(params[0].value[0]);
			tip += date.getHours() + ":" + date.getMinutes() + " <br/>";
			for (var i = 0; i < params.length; i++) {
			var node = params[i];
			if (i == params.length - 1) {
			tip +=
			node.marker +
			node.seriesName +
			"：" +
			(node.value[1] - 0) +
			" " +
			tipUnitName;
			} else {
			tip +=
			node.marker +
			node.seriesName +
			"：" +
			(node.value[1] - 0) +
			" " +
			tipUnitName +
			" <br/>";
			}
			}
			return tip;
			//var params_record = params[0];
			//var date = new Date(params_record.value[0]);
			//return date.getHours() + ':' + date.getMinutes() + ' <br/>值: ' + (params_record.value[1] - 0) + " " + tipUnitName;
			},
			axisPointer: {
			animation: false,
			},
			},
			grid: {
			containLabel: true,
			x: "25",
			y: "65",
			x2: "30",
			y2: "50",
			},
			toolbox: {
			show: true,
			top: 0,
			right: 40,
			iconStyle: {
			normal: {
			color: "#87CEFA",
			},
			},
			emphasis: {
			//iconStyle: {
			// textFill: '#fff',
			// color: '#fff',
			// borderColor: '#ccc',
			//},
			},
			feature: {
			mark: { show: true },
			dataZoom: {
			show: true,
			yAxisIndex: "none",
			},
			dataView: {
			show: true,
			readOnly: true,
			optionToContent: function (opt) {
			var series_list = opt.series;
			var table =
			'<table contenteditable="true"><tbody><tr>' +
			'<td style="padding:2px 30px;text-align:center;">时间</td>' +
			'<td style="padding:2px 30px;text-align:center;">监控值</td>' +
			"</tr>";

			for (var i = 0; i < series_list.length; i++) {
			var series = series_list[i];
			for (var i = 0, l = series.data.length; i < l; i++) {
			table +=
			"<tr>" +
			'<td style="padding:2px 30px;text-align:center;">' +
			series.data[i].value[0] +
			"</td>" +
			'<td style="padding:2px 30px;text-align:center;">' +
			series.data[i].value[1] +
			"</td>" +
			"</tr>";
			}
			}

			table += "</tbody></table>";
			return table;
			},
			},
			magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
			restore: { show: true },
			saveAsImage: { name: "picture", show: true },
			// myTool1: {
			// show: true,
			// title: "设置Y轴坐标",
			// icon: "path://M962.92864 602.1888c-9.09824 48.42496-43.42272 80.96256-85.41696 80.96256h-4.8128a54.66624 54.66624 0 0 0-54.0672 55.08096 49.7408 49.7408 0 0 0 2.4576 12.96896q1.08544 3.69664 2.50368 7.2704a100.53632 100.53632 0 0 1-34.78528 122.7776l-3.072 1.9968c-0.54784 0.3584-1.11616 0.70144-1.6896 1.024l-104.14592 58.368a28.672 28.672 0 0 1-2.56 1.2288l-1.024 0.512a100.65408 100.65408 0 0 1-40.61696 8.35072 105.01632 105.01632 0 0 1-75.81184-31.7696 141.89056 141.89056 0 0 0-33.75616-25.72288 26.39872 26.39872 0 0 0-12.288-3.072 23.38304 23.38304 0 0 0-12.17024 3.33312 145.88928 145.88928 0 0 0-33.76128 26.112 104.73984 104.73984 0 0 1-76.31872 32.3328 99.79392 99.79392 0 0 1-39.89504-8.09984l-0.87552-0.35328-3.22048-1.536q-0.88064-0.43008-1.7408-0.9216l-107.8272-59.95008a28.38016 28.38016 0 0 1-2.56-1.64352l-1.024-0.7168a100.52096 100.52096 0 0 1-34.01728-122.46016q1.3312-3.456 2.35008-7.01952a50.04288 50.04288 0 0 0 2.5088-13.02016 54.66624 54.66624 0 0 0-54.04672-55.05536h-4.34688c-42.30656 0-76.8-32.5376-85.888-80.96256a531.18464 531.18464 0 0 1-9.41056-90.50112 520.84736 520.84736 0 0 1 9.46176-90.54208c9.05728-48.41984 43.58144-80.96256 85.98528-80.96256h4.1984A54.66112 54.66112 0 0 0 205.312 285.11744a80.73216 80.73216 0 0 0-4.96128-20.23936 100.6336 100.6336 0 0 1 33.86368-122.15808l0.81408-0.5632 2.9696-1.95072c0.56832-0.3584 1.14688-0.70144 1.7408-1.024l102.16448-57.64608a30.6688 30.6688 0 0 1 2.50368-1.23392l1.024-0.512a99.584 99.584 0 0 1 40.70912-8.46336 103.7568 103.7568 0 0 1 76.88192 33.31072 150.1184 150.1184 0 0 0 35.80416 28.07808 23.35232 23.35232 0 0 0 21.73952 0.1536 148.08064 148.08064 0 0 0 36.46976-28.99968 103.69536 103.69536 0 0 1 77.34272-33.82272 99.6352 99.6352 0 0 1 40.00256 8.192l0.9216 0.41472 3.11808 1.47968q0.86016 0.4352 1.6896 0.92672l105.88672 59.28448a28.55936 28.55936 0 0 1 2.45248 1.536l1.024 0.7168a100.67968 100.67968 0 0 1 34.01728 122.46016c0 0.0512-1.1264 2.82112-2.3552 7.01952a49.92 49.92 0 0 0-2.50368 13.02016 54.67648 54.67648 0 0 0 54.0672 55.08096h4.24448c42.35776 0 76.88704 32.54272 85.9392 80.96256a525.312 525.312 0 0 1 9.46176 90.48576v0.05632a534.3744 534.3744 0 0 1-9.41568 90.50624z m-49.46432-173.92128c-2.96448-15.83104-12.63616-34.35008-30.00832-34.35008h-4.27008a113.96096 113.96096 0 0 1-113.44384-114.176 106.22464 106.22464 0 0 1 4.9408-29.696 133.4016 133.4016 0 0 1 4.94592-14.12096 43.87328 43.87328 0 0 0-14.15168-52.40832l-0.26112-0.1536-0.2048-0.1536-106.74176-59.33568-0.2048-0.1536-0.26112-0.10752a47.77984 47.77984 0 0 0-52.0192 11.72992c-16.69632 18.36544-57.2672 53.13536-91.5456 53.13536-13.824 0-31.05792-6.22592-49.664-18.00704a213.08928 213.08928 0 0 1-41.20576-34.11968 47.77984 47.77984 0 0 0-52.1728-11.3152l-0.256 0.1024-0.20992 0.1536-102.99392 57.94304-0.20992 0.10752-0.26112 0.2048a43.99616 43.99616 0 0 0-14.10048 52.40832 142.47424 142.47424 0 0 1 4.9408 14.12096 105.6256 105.6256 0 0 1 4.9408 29.696 113.98656 113.98656 0 0 1-113.50016 114.176h-4.34688c-17.26976 0.1024-26.89024 18.57536-29.85472 34.35008a466.432 466.432 0 0 0-8.58624 80.896 466.8672 466.8672 0 0 0 8.58624 80.95232c2.96448 15.82592 12.58496 34.35008 29.90592 34.35008h4.352a113.96096 113.96096 0 0 1 113.44896 114.176 105.3952 105.3952 0 0 1-4.9408 29.696 117.02784 117.02784 0 0 1-4.9408 14.11072 43.84256 43.84256 0 0 0 14.20288 52.41344l0.26112 0.1536 0.26112 0.15872 108.544 60.0832 0.256 0.10752 0.31232 0.1024a48.71168 48.71168 0 0 0 52.0192-11.15648c16.384-17.3312 56.22784-50.0224 89.46688-50.0224 32.97792 0 72.61696 32.06656 88.94464 49.03936a48.7936 48.7936 0 0 0 52.17792 10.79296l0.20992-0.1024 0.256-0.15872 104.86272-58.68544 0.26112-0.15872 0.20992-0.1536a43.93984 43.93984 0 0 0 14.14656-52.41344 142.18752 142.18752 0 0 1-4.992-14.11072 107.33056 107.33056 0 0 1-4.8896-29.696 113.98144 113.98144 0 0 1 113.49504-114.176h4.7872c10.61376 0 24.65792-8.97536 29.44512-34.35008h0.04608a478.67392 478.67392 0 0 0 8.58624-80.896 466.65216 466.65216 0 0 0-8.576-80.98304z m-203.8784 142.848a23.95136 23.95136 0 0 1-1.024 8.75008 189.58336 189.58336 0 0 1-73.07264 95.38048 185.856 185.856 0 0 1-107.28448 34.03264 189.48608 189.48608 0 0 1-178.51904-128.8448 24.15104 24.15104 0 0 1-1.024-7.59808 192.12288 192.12288 0 0 1 4.37248-124.21632 24.09472 24.09472 0 0 1 1.39776-6.82496 188.928 188.928 0 0 1 173.76768-116.49024 185.344 185.344 0 0 1 79.04768 17.664 189.29664 189.29664 0 0 1 96.54784 98.9952 23.94112 23.94112 0 0 1 1.536 8.38656 194.41152 194.41152 0 0 1 4.25472 120.75008z m-179.8656-196.98176a142.94016 142.94016 0 1 0 68.29056 267.89888 144.60928 144.60928 0 0 0-26.84416-261.57568 140.98944 140.98944 0 0 0-41.4464-6.33856z",
			// onclick: setChartyAxis,
			// },
			},
			},
			dataZoom: [
			{
			id: "dataZoomX",
			type: "slider",
			xAxisIndex: [0],
			start: 0,
			end: 100,
			bottom: 10,
			filterMode: "filter",
			handleIcon:
			"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
			handleSize: "80%",
			handleStyle: {
			color: "#fff",
			shadowBlur: 3,
			shadowColor: "rgba(0, 0, 0, 0.9)", //rgba(0, 0, 0, 0.9)
			shadowOffsetX: 2,
			shadowOffsetY: 2,
			},
			backgroundColor: "#eee",
			borderColor: "#ccc",
			dataBackground: {
			lineStyle: {
			//color:'red',
			},
			},
			},
			{
			// 这个dataZoom组件，也控制x轴。
			type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
			start: 0, // 左边在 24% 的位置。
			end: 100, // 右边在 100% 的位置。
			},
			],
			xAxis: {
			type: "time",
			splitLine: {
			show: true,
			lineStyle: {
			type: "dashed",
			},
			},
			axisLabel: {
			//color: '#fff',
			formatter: function (v, index) {
			//.log(value, index);
			var date = new Date(v);
			//console.log(date);
			var texts = [date.getHours(), date.getMinutes()];
			//var texts = [date.getHours(),"00"];
			return texts.join(":");
			},
			},
			axisLine: {
			lineStyle: {
			// color: '#fff'
			},
			},
			min: min,
			max: max,
			interval: interval,
			},
			yAxis: {
			name: yaxisName,
			nameLocation: "end",
			nameTextStyle: {
			align: "left",
			},
			type: "value",
			boundaryGap: [0, "100%"],
			splitLine: {
			show: true,
			lineStyle: {
			type: "dashed",
			},
			},
			axisLabel: {
			//color: '#fff',
			},
			axisLine: {
			lineStyle: {
			//color: '#fff'
			},
			},
			scale: true,
			},
			series: series_arr,
			};

			m_chartMain.setOption(main_chart_option);
			},

			}
			initChartRight() {
			if (m_chartQH) {
			m_chartQH.clear();
			}
			m_chartQH = echarts.init(
			document.getElementById("chartRightRecordPreview")
			);

			let QH = [];
			let data = testData.QH;
			for (var i = 0; i < data.length; i++) {
			let item = data[i];
			item.id = i;
			QH.push({ value: [data[i].X, data[i].Y], id: item.id });
			}

			var option = {
			title: {
			text: "",
			top: "5%",
			right: "4%",
			textStyle: {
			fontWeight: "lighter", //lighter //normal
			fontSize: 12,
			textShadowColor: "#C28D21", //阴影颜色
			textShadowBlur: "2", //阴影的宽度
			textShadowOffsetX: "-0", //阴影向X偏移
			textShadowOffsetY: "-70", //阴影向Y偏移
			},
			},
			grid: {
			top: "5%",
			left: "2%",
			right: "4%",
			bottom: "5%",
			containLabel: true,
			},
			tooltip: {
			trigger: "item",
			axisPointer: {
			type: "cross",
			},
			formatter: function (params) {
			//console.log(params);
			if (!params) {
			return;
			}
			var data = params.value;
			return "流量:" + data[0] + ",扬程" + data[1] + "m";
			//return h+date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 : ' + params.value[1];
			},
			},
			xAxis: [
			{
			name: "", //流量(m³/h)
			nameLocation: "middle",
			nameGap: 29,
			nameTextStyle: {
			color: "#d4ce55",
			},
			splitLine: {
			show: true,
			},
			axisLine: {
			onZero: false,
			lineStyle: {
			//color: GlobalParas.chartTextColor
			},
			},
			type: "value",
			},
			],
			yAxis: [
			{
			name: "", //"扬程(m)",
			nameLocation: "middle",
			nameGap: 39,
			nameTextStyle: {
			color: "#d4ce55",
			},
			axisLine: {
			onZero: false,
			lineStyle: {
			//color: GlobalParas.chartTextColor
			},
			},
			boundaryGap: ["20%", "20%"],
			type: "value",
			},
			],
			series: [
			{
			itemStyle: {
			normal: {
			color: "#48dcd7",
			},
			},
			showSymbol: false,
			data: QH,
			type: "line",
			smooth: true,
			},
			],
			};
			// 使用刚指定的配置项和数据显示图表。
			m_chartQH.setOption(option);
			},
			initChartLeft2(recordList_ds) {
			if (m_chartMain2) {
			m_chartMain2.clear();
			}
			m_chartMain2 = echarts.init(
			document.getElementById("chartLeftRecordPreview2")
			);

			let m_unitName = "MPa";
			let m_recordName = "压力";

			let m_chartRecordList = [];
			let m_alarmList = [];
			var series_arr = [];
			var yaxisName = "";
			var legendData = [];
			var tipUnitName = "";
			if (recordList_ds == null \|\| recordList_ds.length == 0) return;

			yaxisName = m_recordName + "(" + m_unitName + ")";
			tipUnitName = m_unitName;
			//console.log(recordList_ds, 243)
			let baseDate =
			new Date(recordList_ds[0].DataTime).getFullYear() +
			"-" +
			(new Date(recordList_ds[0].DataTime).getMonth() + 1) +
			"-" +
			new Date(recordList_ds[0].DataTime).getDate();

			var lastTime = null;
			var ignore_time = 1000 * 60 * 10;

			var chart_series_record_arr = [];
			var chart_series_alarm_arr = [];

			let m_chartValueSeriesList = [];
			let teShuDian = ["3053", "3054", "3055", "3056", "3057", "3058"];
			var nn = recordList_ds.length;
			for (var i = 0; i < nn; i++) {
			var record = recordList_ds[i];
			var real_time = record.DataTime;
			var real_value = record.DataValue;

			var dataValue = { value: [real_time, real_value] };
			var alarmValue = null;
			if ((record.RecordStatus & 2) == 2) {
			alarmValue = { value: real_value, coord: [real_time, real_value] };
			// m_alarmList.push(alarmValue)
			}

			if (lastTime == null) {
			lastTime = new Date(real_time).getTime();
			}
			if (new Date(real_time).getTime() - lastTime > ignore_time) {
			if (chart_series_record_arr.length > 3) {
			m_chartValueSeriesList.push({
			record: chart_series_record_arr,
			alarm: chart_series_alarm_arr,
			});
			}
			chart_series_record_arr = [];
			chart_series_alarm_arr = [];
			}

			chart_series_record_arr.push(dataValue);
			if (alarmValue != null) {
			chart_series_alarm_arr.push(alarmValue);
			}

			lastTime = new Date(real_time).getTime();
			}
			m_chartValueSeriesList.push({
			record: chart_series_record_arr,
			alarm: chart_series_alarm_arr,
			});

			var color_curve = "#4169E1";
			let showSymbol = false;
			let min = null;
			let max = null;
			let interval = null;

			min = baseDate + " 00:00:00";
			max = baseDate + " 23:59:59";
			interval = 1000 * 60 * 60 * 2;
			//console.log(m_chartValueSeriesList)
			for (var i = 0; i < m_chartValueSeriesList.length; i++) {
			series_arr.push({
			name: m_recordName,
			type: "line",
			showSymbol: showSymbol,
			hoverAnimation: false,
			data: m_chartValueSeriesList[i].record,
			itemStyle: {
			color: color_curve,
			},
			});
			}

			var main_chart_option = {
			title: {
			text: "",
			},
			legend: {
			data: legendData,
			top: 30,
			right: 50,
			},
			tooltip: {
			trigger: "axis",
			formatter: function (params) {
			//console.log(params);
			var tip = "";
			var date = new Date(params[0].value[0]);
			tip += date.getHours() + ":" + date.getMinutes() + " <br/>";
			for (var i = 0; i < params.length; i++) {
			var node = params[i];
			if (i == params.length - 1) {
			tip +=
			node.marker +
			node.seriesName +
			"：" +
			(node.value[1] - 0) +
			" " +
			tipUnitName;
			} else {
			tip +=
			node.marker +
			node.seriesName +
			"：" +
			(node.value[1] - 0) +
			" " +
			tipUnitName +
			" <br/>";
			}
			}
			return tip;
			//var params_record = params[0];
			//var date = new Date(params_record.value[0]);
			//return date.getHours() + ':' + date.getMinutes() + ' <br/>值: ' + (params_record.value[1] - 0) + " " + tipUnitName;
			},
			axisPointer: {
			animation: false,
			},
			},
			grid: {
			containLabel: true,
			x: "25",
			y: "65",
			x2: "30",
			y2: "50",
			},
			toolbox: {
			show: true,
			top: 0,
			right: 40,
			iconStyle: {
			normal: {
			color: "#87CEFA",
			},
			},
			emphasis: {
			//iconStyle: {
			// textFill: '#fff',
			// color: '#fff',
			// borderColor: '#ccc',
			//},
			},
			feature: {
			mark: { show: true },
			dataZoom: {
			show: true,
			yAxisIndex: "none",
			},
			dataView: {
			show: true,
			readOnly: true,
			optionToContent: function (opt) {
			var series_list = opt.series;
			var table =
			'<table contenteditable="true"><tbody><tr>' +
			'<td style="padding:2px 30px;text-align:center;">时间</td>' +
			'<td style="padding:2px 30px;text-align:center;">监控值</td>' +
			"</tr>";

			for (var i = 0; i < series_list.length; i++) {
			var series = series_list[i];
			for (var i = 0, l = series.data.length; i < l; i++) {
			table +=
			"<tr>" +
			'<td style="padding:2px 30px;text-align:center;">' +
			series.data[i].value[0] +
			"</td>" +
			'<td style="padding:2px 30px;text-align:center;">' +
			series.data[i].value[1] +
			"</td>" +
			"</tr>";
			}
			}

			table += "</tbody></table>";
			return table;
			},
			},
			magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
			restore: { show: true },
			saveAsImage: { name: "picture", show: true },
			// myTool1: {
			// show: true,
			// title: "设置Y轴坐标",
			// icon: "path://M962.92864 602.1888c-9.09824 48.42496-43.42272 80.96256-85.41696 80.96256h-4.8128a54.66624 54.66624 0 0 0-54.0672 55.08096 49.7408 49.7408 0 0 0 2.4576 12.96896q1.08544 3.69664 2.50368 7.2704a100.53632 100.53632 0 0 1-34.78528 122.7776l-3.072 1.9968c-0.54784 0.3584-1.11616 0.70144-1.6896 1.024l-104.14592 58.368a28.672 28.672 0 0 1-2.56 1.2288l-1.024 0.512a100.65408 100.65408 0 0 1-40.61696 8.35072 105.01632 105.01632 0 0 1-75.81184-31.7696 141.89056 141.89056 0 0 0-33.75616-25.72288 26.39872 26.39872 0 0 0-12.288-3.072 23.38304 23.38304 0 0 0-12.17024 3.33312 145.88928 145.88928 0 0 0-33.76128 26.112 104.73984 104.73984 0 0 1-76.31872 32.3328 99.79392 99.79392 0 0 1-39.89504-8.09984l-0.87552-0.35328-3.22048-1.536q-0.88064-0.43008-1.7408-0.9216l-107.8272-59.95008a28.38016 28.38016 0 0 1-2.56-1.64352l-1.024-0.7168a100.52096 100.52096 0 0 1-34.01728-122.46016q1.3312-3.456 2.35008-7.01952a50.04288 50.04288 0 0 0 2.5088-13.02016 54.66624 54.66624 0 0 0-54.04672-55.05536h-4.34688c-42.30656 0-76.8-32.5376-85.888-80.96256a531.18464 531.18464 0 0 1-9.41056-90.50112 520.84736 520.84736 0 0 1 9.46176-90.54208c9.05728-48.41984 43.58144-80.96256 85.98528-80.96256h4.1984A54.66112 54.66112 0 0 0 205.312 285.11744a80.73216 80.73216 0 0 0-4.96128-20.23936 100.6336 100.6336 0 0 1 33.86368-122.15808l0.81408-0.5632 2.9696-1.95072c0.56832-0.3584 1.14688-0.70144 1.7408-1.024l102.16448-57.64608a30.6688 30.6688 0 0 1 2.50368-1.23392l1.024-0.512a99.584 99.584 0 0 1 40.70912-8.46336 103.7568 103.7568 0 0 1 76.88192 33.31072 150.1184 150.1184 0 0 0 35.80416 28.07808 23.35232 23.35232 0 0 0 21.73952 0.1536 148.08064 148.08064 0 0 0 36.46976-28.99968 103.69536 103.69536 0 0 1 77.34272-33.82272 99.6352 99.6352 0 0 1 40.00256 8.192l0.9216 0.41472 3.11808 1.47968q0.86016 0.4352 1.6896 0.92672l105.88672 59.28448a28.55936 28.55936 0 0 1 2.45248 1.536l1.024 0.7168a100.67968 100.67968 0 0 1 34.01728 122.46016c0 0.0512-1.1264 2.82112-2.3552 7.01952a49.92 49.92 0 0 0-2.50368 13.02016 54.67648 54.67648 0 0 0 54.0672 55.08096h4.24448c42.35776 0 76.88704 32.54272 85.9392 80.96256a525.312 525.312 0 0 1 9.46176 90.48576v0.05632a534.3744 534.3744 0 0 1-9.41568 90.50624z m-49.46432-173.92128c-2.96448-15.83104-12.63616-34.35008-30.00832-34.35008h-4.27008a113.96096 113.96096 0 0 1-113.44384-114.176 106.22464 106.22464 0 0 1 4.9408-29.696 133.4016 133.4016 0 0 1 4.94592-14.12096 43.87328 43.87328 0 0 0-14.15168-52.40832l-0.26112-0.1536-0.2048-0.1536-106.74176-59.33568-0.2048-0.1536-0.26112-0.10752a47.77984 47.77984 0 0 0-52.0192 11.72992c-16.69632 18.36544-57.2672 53.13536-91.5456 53.13536-13.824 0-31.05792-6.22592-49.664-18.00704a213.08928 213.08928 0 0 1-41.20576-34.11968 47.77984 47.77984 0 0 0-52.1728-11.3152l-0.256 0.1024-0.20992 0.1536-102.99392 57.94304-0.20992 0.10752-0.26112 0.2048a43.99616 43.99616 0 0 0-14.10048 52.40832 142.47424 142.47424 0 0 1 4.9408 14.12096 105.6256 105.6256 0 0 1 4.9408 29.696 113.98656 113.98656 0 0 1-113.50016 114.176h-4.34688c-17.26976 0.1024-26.89024 18.57536-29.85472 34.35008a466.432 466.432 0 0 0-8.58624 80.896 466.8672 466.8672 0 0 0 8.58624 80.95232c2.96448 15.82592 12.58496 34.35008 29.90592 34.35008h4.352a113.96096 113.96096 0 0 1 113.44896 114.176 105.3952 105.3952 0 0 1-4.9408 29.696 117.02784 117.02784 0 0 1-4.9408 14.11072 43.84256 43.84256 0 0 0 14.20288 52.41344l0.26112 0.1536 0.26112 0.15872 108.544 60.0832 0.256 0.10752 0.31232 0.1024a48.71168 48.71168 0 0 0 52.0192-11.15648c16.384-17.3312 56.22784-50.0224 89.46688-50.0224 32.97792 0 72.61696 32.06656 88.94464 49.03936a48.7936 48.7936 0 0 0 52.17792 10.79296l0.20992-0.1024 0.256-0.15872 104.86272-58.68544 0.26112-0.15872 0.20992-0.1536a43.93984 43.93984 0 0 0 14.14656-52.41344 142.18752 142.18752 0 0 1-4.992-14.11072 107.33056 107.33056 0 0 1-4.8896-29.696 113.98144 113.98144 0 0 1 113.49504-114.176h4.7872c10.61376 0 24.65792-8.97536 29.44512-34.35008h0.04608a478.67392 478.67392 0 0 0 8.58624-80.896 466.65216 466.65216 0 0 0-8.576-80.98304z m-203.8784 142.848a23.95136 23.95136 0 0 1-1.024 8.75008 189.58336 189.58336 0 0 1-73.07264 95.38048 185.856 185.856 0 0 1-107.28448 34.03264 189.48608 189.48608 0 0 1-178.51904-128.8448 24.15104 24.15104 0 0 1-1.024-7.59808 192.12288 192.12288 0 0 1 4.37248-124.21632 24.09472 24.09472 0 0 1 1.39776-6.82496 188.928 188.928 0 0 1 173.76768-116.49024 185.344 185.344 0 0 1 79.04768 17.664 189.29664 189.29664 0 0 1 96.54784 98.9952 23.94112 23.94112 0 0 1 1.536 8.38656 194.41152 194.41152 0 0 1 4.25472 120.75008z m-179.8656-196.98176a142.94016 142.94016 0 1 0 68.29056 267.89888 144.60928 144.60928 0 0 0-26.84416-261.57568 140.98944 140.98944 0 0 0-41.4464-6.33856z",
			// onclick: setChartyAxis,
			// },
			},
			},
			dataZoom: [
			{
			id: "dataZoomX",
			type: "slider",
			xAxisIndex: [0],
			start: 0,
			end: 100,
			bottom: 10,
			filterMode: "filter",
			handleIcon:
			"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
			handleSize: "80%",
			handleStyle: {
			color: "#fff",
			shadowBlur: 3,
			shadowColor: "rgba(0, 0, 0, 0.9)", //rgba(0, 0, 0, 0.9)
			shadowOffsetX: 2,
			shadowOffsetY: 2,
			},
			backgroundColor: "#eee",
			borderColor: "#ccc",
			dataBackground: {
			lineStyle: {
			//color:'red',
			},
			},
			},
			{
			// 这个dataZoom组件，也控制x轴。
			type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
			start: 0, // 左边在 24% 的位置。
			end: 100, // 右边在 100% 的位置。
			},
			],
			xAxis: {
			type: "time",
			splitLine: {
			show: true,
			lineStyle: {
			type: "dashed",
			},
			},
			axisLabel: {
			//color: '#fff',
			formatter: function (v, index) {
			//.log(value, index);
			var date = new Date(v);
			//console.log(date);
			var texts = [date.getHours(), date.getMinutes()];
			//var texts = [date.getHours(),"00"];
			return texts.join(":");
			},
			},
			axisLine: {
			lineStyle: {
			// color: '#fff'
			},
			},
			min: min,
			max: max,
			interval: interval,
			},
			yAxis: {
			name: yaxisName,
			nameLocation: "end",
			nameTextStyle: {
			align: "left",
			},
			type: "value",
			boundaryGap: [0, "100%"],
			splitLine: {
			show: true,
			lineStyle: {
			type: "dashed",
			},
			},
			axisLabel: {
			//color: '#fff',
			},
			axisLine: {
			lineStyle: {
			//color: '#fff'
			},
			},
			scale: true,
			},
			series: series_arr,
			};

			m_chartMain2.setOption(main_chart_option);
			},
			initChartRight2() {
			if (m_chartQH2) {
			m_chartQH2.clear();
			}
			m_chartQH2 = echarts.init(
			document.getElementById("chartRightRecordPreview2")
			);

			let QH = [];
			let data = testData.QH;
			for (var i = 0; i < data.length; i++) {
			let item = data[i];
			item.id = i;
			QH.push({ value: [data[i].X, data[i].Y], id: item.id });
			}

			var option = {
			title: {
			text: "",
			top: "5%",
			right: "4%",
			textStyle: {
			fontWeight: "lighter", //lighter //normal
			fontSize: 12,
			textShadowColor: "#C28D21", //阴影颜色
			textShadowBlur: "2", //阴影的宽度
			textShadowOffsetX: "-0", //阴影向X偏移
			textShadowOffsetY: "-70", //阴影向Y偏移
			},
			},
			grid: {
			top: "5%",
			left: "2%",
			right: "4%",
			bottom: "5%",
			containLabel: true,
			},
			tooltip: {
			trigger: "item",
			axisPointer: {
			type: "cross",
			},
			formatter: function (params) {
			//console.log(params);
			if (!params) {
			return;
			}
			var data = params.value;
			return "流量:" + data[0] + ",扬程" + data[1] + "m";
			//return h+date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 : ' + params.value[1];
			},
			},
			xAxis: [
			{
			name: "", //流量(m³/h)
			nameLocation: "middle",
			nameGap: 29,
			nameTextStyle: {
			color: "#d4ce55",
			},
			splitLine: {
			show: true,
			},
			axisLine: {
			onZero: false,
			lineStyle: {
			//color: GlobalParas.chartTextColor
			},
			},
			type: "value",
			},
			],
			yAxis: [
			{
			name: "", //"扬程(m)",
			nameLocation: "middle",
			nameGap: 39,
			nameTextStyle: {
			color: "#d4ce55",
			},
			axisLine: {
			onZero: false,
			lineStyle: {
			//color: GlobalParas.chartTextColor
			},
			},
			boundaryGap: ["20%", "20%"],
			type: "value",
			},
			],
			series: [
			{
			itemStyle: {
			normal: {
			color: "#48dcd7",
			},
			},
			showSymbol: false,
			data: QH,
			type: "line",
			smooth: true,
			},
			],
			};
			// 使用刚指定的配置项和数据显示图表。
			m_chartQH2.setOption(option);
			},
			},
			};
			</script>

			<style scoped>
			.dialogBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;
			}
			.dialogBottomLeft {
			width: 50%;
			height: 300px;
			background-color: #fff;
			}
			.dialogBottomRight {
			width: calc(50% - 10px);
			height: 300px;
			margin-left: 10px;
			background-color: #fff;
			}

			.baogaotopbox,
			.baogaobottombox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 360px;
			}
			.baogaobottombox {
			height: 220px;
			margin-top: 10px;
			}
			.baogaotopboxleft,
			.baogaobottomboxleft {
			width: 40%;
			height: 100%;
			overflow: auto;
			background-color: #fff;
			}
			.baogaotopboxright,
			.baogaobottomboxright {
			width: calc(60% - 10px);
			height: 100%;
			overflow: auto;
			margin-left: 10px;
			background-color: #fff;
			}
			</style>

			<style>
			.preview-page{
			width: 100%;
			height: 100%;
			.reportDialog .fks-dialog__body {
			padding: 20px;
			background-color: rgb(241, 242, 246);
			}
			.model-binding-left-box{
			width: 100%;
			height: 100%;
			background: #fff;
			.preview-page {
			width: 100%;
			height: 100%;
			}
			.model-binding-right-box{
			width:100%;
			height: 100%;
			background: #fff;
			.model-binding-left-box {
			width: 100%;
			height: 100%;
			background: #fff;
			}
			.bimface-model{
			width: 100%;
			height: 54%;
			display: flex;
			justify-content: center;
			align-items: center;
			.model-binding-right-box {
			width: 100%;
			height: 100%;
			background: #fff;
			}
			.bimface-model img{
			max-height: 100%;
			max-width: 100%;
			height: auto;
			width: auto;
			.bimface-model {
			width: 100%;
			height: 55%;
			display: flex;
			justify-content: center;
			align-items: center;
			}
			.bottom-tabs-div{
			width: 100%;
			height: 45%;
			margin-top: 1%;
			.bimface-model img {
			max-height: 100%;
			max-width: 100%;
			height: auto;
			width: auto;
			}
			.bottom-tabs-div .fks-tabs--border-card{
			height: 100%;
			.bottom-tabs-div {
			width: 100%;
			height: calc(45% - 10px);
			margin-top: 10px;
			}
			.fks-tabs--border-card>.fks-tabs__content{
			height: calc(100% - 39px);
			.bottom-tabs-div .fks-tabs--border-card {
			height: 100%;
			}
			.time-pick-div{
			width: 100%;
			height: 36px;
			.fks-tabs--border-card > .fks-tabs__content {
			height: calc(100% - 39px);
			}
			.bottom-tabs-div .fks-tab-pane{
			height: calc(100% - 36px);
			.time-pick-div {
			width: 100%;
			height: 36px;
			}
			.health-rate-chart{
			width: 100%;
			height:100%;
			.bottom-tabs-div .fks-tab-pane {
			height: calc(100% - 36px);
			}
			.health-rate-chart {
			width: 100%;
			height: 100%;
			}
			</style>