From 50ad0a40d942624f7fcdfa8af3bc67d656a747a3 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 11 一月 2023 10:34:08 +0800
Subject: [PATCH] 添加预览菜单表格详情弹框
---
src/views/main/istation/overview/preview.vue | 456 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 449 insertions(+), 7 deletions(-)
diff --git a/src/views/main/istation/overview/preview.vue b/src/views/main/istation/overview/preview.vue
index 4217e08..582fd48 100644
--- a/src/views/main/istation/overview/preview.vue
+++ b/src/views/main/istation/overview/preview.vue
@@ -1,7 +1,7 @@
<template>
<div class="preview-page">
<fks-row :gutter="20" style="width:100%;height:100%;">
- <fks-col :span="4" style="height:100%">
+ <fks-col :span="4" style="height:100%">
<div class="model-binding-left-box">
<titleBox title="娉电珯鍒楄〃"></titleBox>
<fks-tree
@@ -26,25 +26,246 @@
</div>
<div class="bottom-tabs-div">
<fks-tabs type="border-card">
- <fks-tab-pane label="鍋ュ悍璇勪环">鍋ュ悍璇勪环</fks-tab-pane>
- <fks-tab-pane label="鏁呴殰璇婃柇">鏁呴殰璇婃柇</fks-tab-pane>
- <fks-tab-pane label="鏃跺簭瓒嬪娍鍒嗘瀽">鏃跺簭瓒嬪娍鍒嗘瀽</fks-tab-pane>
- <fks-tab-pane label="涓撳瓒嬪娍鍒嗘瀽">涓撳瓒嬪娍鍒嗘瀽</fks-tab-pane>
+ <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>
</fks-row>
+ <!-- 鏁呴殰璇婃柇鎶ュ憡璇︽儏 -->
+ <fks-dialog
+ title="娴嬭瘯01"
+ :visible.sync="brokenDownDialog"
+ >
+
+ <div slot="footer" class="dialog-footer">
+ <fks-button @click="brokenDownDialog = false">鍙� 娑�</fks-button>
+ <fks-button type="primary" @click="brokenDownDialog = false">纭� 瀹�</fks-button>
+ </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>
+ </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>
+ </div>
+ </fks-dialog>
</div>
</template>
<script>
+import * as echarts from 'echarts';
import titleBox from "@/views/main/components/titleBox.vue"
+
+let healthRateObj = {
+ chartDom: "",
+ myChart: "",
+ option: ""
+}
export default {
components:{titleBox},
data(){
return {
+ date1:"",
+ date2:"",
+ date3:"",
+ date4:"",
+ brokenDownDialog:false,
+ sequentialDialog:false,
+ expertTrendsDialog:false,
treeData:[
{
label: "閲戝垰娌辨车绔�",
@@ -67,12 +288,216 @@
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",
+ },
+ ]
}
- }
+ },
+ 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
+ }
+ },
+
}
</script>
-<style scoped>
+<style>
.preview-page{
width: 100%;
height: 100%;
@@ -105,4 +530,21 @@
height: 45%;
margin-top: 1%;
}
+.bottom-tabs-div .fks-tabs--border-card{
+ height: 100%;
+}
+.fks-tabs--border-card>.fks-tabs__content{
+ height: calc(100% - 39px);
+}
+.time-pick-div{
+ width: 100%;
+ height: 36px;
+}
+.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