From 28c552b1eb7942e03bec6ded2f9b36cf966eba5f Mon Sep 17 00:00:00 2001
From: wangyanshen <3154583358@qq.com>
Date: 星期三, 11 一月 2023 17:32:35 +0800
Subject: [PATCH] 页面小调整
---
src/views/main/istation/overview/preview.vue | 2531 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 2,022 insertions(+), 509 deletions(-)
diff --git a/src/views/main/istation/overview/preview.vue b/src/views/main/istation/overview/preview.vue
index 582fd48..96b6c85 100644
--- a/src/views/main/istation/overview/preview.vue
+++ b/src/views/main/istation/overview/preview.vue
@@ -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:"椹卞姩绔疿鏂瑰悜鎸姩",
- signal:"鏈夋晥鍊�",
- earlyWarnModel:"涓�闃跺钩婊戝垎鏋�",
- occurrenceTime:"2023-1-11",
- recordTime:"2023-1-1",
- },
- {
- point:"椹卞姩绔疿鏂瑰悜鎸姩",
- signal:"宄害",
- earlyWarnModel:"闃诲凹瓒嬪娍棰勬祴鍒嗘瀽",
- occurrenceTime:"2023-1-11",
- recordTime:"2023-1-1",
- },
- {
- point:"椹卞姩绔疿鏂瑰悜鎸姩",
- signal:"姝害",
- earlyWarnModel:"浜岄樁骞虫粦鍒嗘瀽",
- occurrenceTime:"2023-1-11",
- recordTime:"2023-1-1",
- },
- ],
- expertTrendsTableData:[
- {
- point:"椹卞姩绔疿鏂瑰悜鎸姩",
- signal:"鏈夋晥鍊�",
- analysisMethod:"涓�闃跺钩婊戝垎鏋�",
- direction:"姝ｅ悜",
- threshold:"0.6",
- analyst:"涓撳",
- occurrenceTime:"2023-1-11",
- recordTime:"2023-1-1",
- },
- {
- point:"椹卞姩绔疿鏂瑰悜鎸姩",
- signal:"宄害",
- analysisMethod:"闃诲凹瓒嬪娍棰勬祴鍒嗘瀽",
- direction:"姝ｅ悜",
- threshold:"0.6",
- analyst:"涓撳",
- occurrenceTime:"2023-1-11",
- recordTime:"2023-1-1",
- },
- {
- point:"椹卞姩绔疿鏂瑰悜鎸姩",
- 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: "椹卞姩绔疿鏂瑰悜鎸姩",
+ signal: "鏈夋晥鍊�",
+ model: "涓�闃跺钩婊戝垎鏋�",
+ startDate: "2023-1-11",
+ endDate: "2023-1-11",
+ value: "0.6",
+ time: "30澶�",
+ fangxiang: "姝ｅ悜",
+ },
+ {
+ id: 2,
+ name: "閲戝垰娌辨车绔�",
+ product: "1#娉�",
+ point: "椹卞姩绔疿鏂瑰悜鎸姩",
+ signal: "宄害",
+ model: "闃诲凹瓒嬪娍棰勬祴鍒嗘瀽",
+ startDate: "2023-1-11",
+ endDate: "2023-1-11",
+ value: "0.6",
+ time: "30澶�",
+ fangxiang: "姝ｅ悜",
+ },
+ {
+ id: 3,
+ name: "閲戝垰娌辨车绔�",
+ product: "1#娉�",
+ point: "椹卞姩绔疿鏂瑰悜鎸姩",
+ signal: "姝害",
+ model: "浜岄樁骞虫粦鍒嗘瀽",
+ startDate: "2023-1-11",
+ endDate: "2023-1-11",
+ value: "0.6",
+ time: "30澶�",
+ fangxiang: "姝ｅ悜",
+ },
+ ],
+ expertTrendsTableData: [
+ {
+ id: 1,
+ name: "閲戝垰娌辨车绔�",
+ product: "1#娉�",
+ point: "椹卞姩绔疿鏂瑰悜鎸姩",
+ signal: "鏈夋晥鍊�",
+ model: "涓�闃跺钩婊戝垎鏋�",
+ startDate: "2023-1-11",
+ endDate: "2023-1-11",
+ value: "0.6",
+ time: "30澶�",
+ fangxiang: "姝ｅ悜",
+ userName: "涓撳",
+ },
+ {
+ id: 2,
+ name: "閲戝垰娌辨车绔�",
+ product: "1#娉�",
+ point: "椹卞姩绔疿鏂瑰悜鎸姩",
+ signal: "宄害",
+ model: "闃诲凹瓒嬪娍棰勬祴鍒嗘瀽",
+ startDate: "2023-1-11",
+ endDate: "2023-1-11",
+ value: "0.6",
+ time: "30澶�",
+ fangxiang: "姝ｅ悜",
+ userName: "涓撳",
+ },
+ {
+ id: 3,
+ name: "閲戝垰娌辨车绔�",
+ product: "1#娉�",
+ point: "椹卞姩绔疿鏂瑰悜鎸姩",
+ 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", //闃村奖鍚慩鍋忕Щ
+ textShadowOffsetY: "-70", //闃村奖鍚慪鍋忕Щ
+ },
+ },
+ 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", //闃村奖鍚慩鍋忕Щ
+ textShadowOffsetY: "-70", //闃村奖鍚慪鍋忕Щ
+ },
+ },
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3