wry

src/views/bigScreen/enpComponents/orgwryList.vue

@@ -1,6 +1,9 @@
 <template>
     <div>
         <el-card v-if="pfkdetail" class="enpelCard">
+            <div class="headerTitle">排放口及关联设备信息
+                <span class="backBtn" @click="handleClick"> 返回 </span>
+            </div>
             <div style="display:flex;">
                 <!-- 设备信息 -->
                 <div class="leftCard">
@@ -79,6 +82,7 @@
                 <!-- 表 -->
                 <div class="rightCard">
                     <div class="pageTitle">排放口及关联设备动态信息</div>
+                    <div id="cChart" style="width: 100%; height:400px"></div>
                 </div>
             </div>
         </el-card>
@@ -109,13 +113,20 @@
                 </div>
                 <!-- table表格 -->
                 <div style="margin-top:2vh" id="enpTable">
-                    <scTable :data="tableData" calss="enpTable" style="" @row-click="rowClick">
+                    <scTable :data="tableData" :apiObj="apiObj" calss="enpTable" style="" @row-click="rowClick">
                         <el-table-column prop="index" label="序号"></el-table-column>
                         <el-table-column prop="number" label="排放口编号"></el-table-column>
                         <el-table-column prop="name" label="排放口名称"></el-table-column>
-                        <el-table-column prop="type" label="排放口类型"></el-table-column>
+                        <el-table-column prop="level" label="排放口等级">
+                            <template #default="scope">
+                                <span>{{ level_[scope.row.level] }}</span>
+                            </template>
+                        </el-table-column>
                         <el-table-column prop="mgroup" label="所属工段"></el-table-column>
-                        <el-table-column prop="eqpment" label="检测设备"></el-table-column>
+                        <el-table-column prop="eqpment" label="监测设备">
+                            <span
+                                style="width:0.6vh;height:0.6vh;border-radius:0.35vh;background:green;display:inline-block;margin-right:5px"></span>达标
+                        </el-table-column>
                     </scTable>
                 </div>
             </el-card>
@@ -126,6 +137,8 @@
 export default {
     data() {
         return {
+            apiObj: this.$API.enp.drain.list,
+            params: { type: 10 },
             options: [],
             query: {
                 area: '',
@@ -134,25 +147,63 @@ export default {
             searchInputStyle: {
                 color: '#fff',
             },
+            level_: {
+                10: '主要排放口',
+                20: '次要排放口'
+            },
             pfkdetail: false,
-            tableData: [
+            tableData: [],
-                { index: 1, number: '20240130', name: '排放口1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口2', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口3', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口4', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口5', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口6', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口7', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口8', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-                { index: 1, number: '20240130', name: '排放口9', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
-            ],
             detailItem: {},
+            basicOption: {
+                title: {
+                    text: '设备名称'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {},
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                dataset: {
+                    source: []
+                },
+                xAxis: { type: 'category' },
+                yAxis: {},
+                series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
+            },
+            detailForm: {
+                day: 18,
+                year: 2024,
+                month: 1
+            },
         }
     },
     methods: {
+        initTimeNow() {
+            var now = new Date();
+            let year = now.getFullYear(); // 年份
+            let month = now.getMonth() + 1; // 月份
+            let day = now.getDate(); // 日期
+            this.detailForm.year = year;
+            this.detailForm.month = month;
+            this.detailForm.day = day;
+        },
         backtoMap() {
             this.$emit('close')
         },
+        handleClick() {
+            this.pfkdetail = false;
+            this.detailItem = {};
+        },
         rowClick(row) {
             this.pfkdetail = true;
             this.detailItem = row;
@@ -235,6 +286,22 @@ export default {
 }
 
 /*  */
+.headerTitle {
+    color: #ffffff;
+    height: 4vh;
+    line-height: 4vh;
+    font-size: 2vh;
+    position: relative
+}
+
+.backBtn {
+    font-size: 1vh;
+    position: absolute;
+    top: 1vh;
+    right: 1vh;
+    line-height: 2vh
+}
+
 .greenBlock {
     width: 0.6vw;
     height: 0.6vw;