样式更改

2024-02-04 17:36:43 +08:00 · 2024-02-04 17:36:43 +08:00 · 3cf1e45762
parent e1817e611f
commit 3cf1e45762
6 changed files with 532 additions and 264 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -180,8 +180,8 @@ export default {
 	height: 91vh;
 	bottom: 0;
 	top: 9vh;
-	background: #000000;
-	// background-image: url('/public/img/enp_blue/bg_enp_half.png');
+	background: rgb(11, 25, 38);
+	border-radius: 0 10px 0 0;
 	background-size: cover;
 	z-index: 1000;
 }
--- a/src/style/blue.scss
+++ b/src/style/blue.scss
@ -0,0 +1,108 @@
+@import '~element-plus/theme-chalk/src/dark/css-vars.scss';
+
+html.dark {
+	//变量
+	--el-text-color-primary: #d0d0d0;
+	--el-color-primary-dark-2: var(--el-color-primary-light-2) !important;
+	--el-color-primary-light-9: var(--el-color-primary-dark-8) !important;
+	--el-color-primary-light-8: var(--el-color-primary-dark-7) !important;
+	--el-color-primary-light-7: var(--el-color-primary-dark-6) !important;
+	--el-color-primary-light-5: var(--el-color-primary-dark-4) !important;
+	--el-color-primary-light-3: var(--el-color-primary-dark-3) !important;
+
+	//背景
+	#app {
+		background: var(--el-bg-color);
+	}
+
+	//登录背景
+	.login_bg {
+		background: var(--el-bg-color);
+	}
+
+	//框架
+	.adminui-header {
+		background: var(--el-bg-color-overlay);
+		border-bottom: 1px solid var(--el-border-color-light);
+		height: 59px;
+	}
+
+	.aminui-side-split {
+		background: var(--el-bg-color);
+	}
+
+	.aminui-side-split li {
+		color: var(--el-text-color-primary);
+	}
+
+	.aminui-side {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-side-top,
+	.adminui-side-bottom {
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-side-top h2 {
+		color: var(--el-text-color-primary);
+	}
+
+	.adminui-topbar,
+	.adminui-tags {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-main {
+		background: var(--el-bg-color);
+	}
+
+	.drawerBG {
+		background: var(--el-bg-color);
+	}
+
+	.adminui-header-menu .el-menu {
+		--el-menu-bg-color: var(--el-bg-color-overlay) !important;
+		--el-menu-hover-bg-color: #171819 !important;
+	}
+
+	.adminui-header-menu .el-menu .el-sub-menu__title {
+		background-color: transparent !important;
+	}
+
+	//全局滚动条样式
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(163, 166, 173, 0.3);
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(163, 166, 173, 0.5);
+	}
+
+	//组件
+	.el-header,
+	.el-main.nopadding,
+	.el-footer {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.el-main {
+		background: var(--el-bg-color);
+	}
+
+	.el-aside {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.el-table .el-table__body-wrapper {
+		background: var(--el-bg-color);
+	}
+
+	.el-table th.is-sortable:hover {
+		background: #111;
+	}
+}
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@ -11,32 +11,199 @@ html.dark {
 	--el-color-primary-light-3: var(--el-color-primary-dark-3) !important;

 	//背景
-	#app {background: var(--el-bg-color);}
+	#app {
+		background: var(--el-bg-color);
+	}

 	//登录背景
-	.login_bg {background: var(--el-bg-color);}
+	.login_bg {
+		background: var(--el-bg-color);
+	}

 	//框架
-	.adminui-header {background: var(--el-bg-color-overlay);border-bottom: 1px solid var(--el-border-color-light);height:59px;}
-	.aminui-side-split {background: var(--el-bg-color);}
-	.aminui-side-split li {color: var(--el-text-color-primary);}
-	.aminui-side {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
-	.adminui-side-top, .adminui-side-bottom {border-color: var(--el-border-color-light);}
-	.adminui-side-top h2 {color: var(--el-text-color-primary);}
-	.adminui-topbar, .adminui-tags {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
-	.adminui-main {background: var(--el-bg-color);}
-	.drawerBG {background: var(--el-bg-color);}
-	.adminui-header-menu .el-menu {--el-menu-bg-color:var(--el-bg-color-overlay) !important;--el-menu-hover-bg-color: #171819 !important;}
-	.adminui-header-menu .el-menu .el-sub-menu__title {background-color:transparent !important;}
+	.adminui-header {
+		background: var(--el-bg-color-overlay);
+		border-bottom: 1px solid var(--el-border-color-light);
+		height: 59px;
+	}
+
+	.aminui-side-split {
+		background: var(--el-bg-color);
+	}
+
+	.aminui-side-split li {
+		color: var(--el-text-color-primary);
+	}
+
+	.aminui-side {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-side-top,
+	.adminui-side-bottom {
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-side-top h2 {
+		color: var(--el-text-color-primary);
+	}
+
+	.adminui-topbar,
+	.adminui-tags {
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+	}
+
+	.adminui-main {
+		background: var(--el-bg-color);
+	}
+
+	.drawerBG {
+		background: var(--el-bg-color);
+	}
+
+	.adminui-header-menu .el-menu {
+		--el-menu-bg-color: var(--el-bg-color-overlay) !important;
+		--el-menu-hover-bg-color: #171819 !important;
+	}
+
+	.adminui-header-menu .el-menu .el-sub-menu__title {
+		background-color: transparent !important;
+	}

 	//全局滚动条样式
-	::-webkit-scrollbar-thumb {background-color: rgba(163, 166, 173, 0.3);}
-	::-webkit-scrollbar-thumb:hover {background-color: rgba(163, 166, 173, 0.5);}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(163, 166, 173, 0.3);
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(163, 166, 173, 0.5);
+	}
+
+	.el-main.nopadding {
+		background: transparent;
+		background-color: transparent;
+	}

 	//组件
-	.el-header, .el-main.nopadding, .el-footer {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
-	.el-main {background: var(--el-bg-color);}
-	.el-aside {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
-	.el-table .el-table__body-wrapper {background: var(--el-bg-color);}
-	.el-table th.is-sortable:hover {background: #111;}
+	.el-header,
+	.el-main.nopadding,
+	.el-footer {
+		background: transparent;
+		background-color: transparent;
+	}
+
+	.el-header {
+		border-bottom: none;
+	}
+
+	.el-header:has(> .panel_title) {
+		padding: 10px 0;
+	}
+
+	.el-header:has(> .searchWrap) {
+		padding: 0;
+	}
+
+
+
+	.el-main {
+		background: transparent;
+		background-color: transparent;
+	}
+
+	.el-main:has(> .scTable) {
+		padding: 8px 0;
+	}
+
+	.aside_one,
+	.aside_side {
+		height: 100%;
+		background: var(--el-bg-color-overlay);
+		border-color: var(--el-border-color-light);
+		border-radius: 20px;
+		background: rgb(4, 50, 83);
+		background-color: rgb(4, 50, 83);
+		box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109);
+		border: 1px solid #1279c3;
+	}
+
+	.el-aside:has(> .aside_one) {
+		padding: 8px;
+		border-right: none;
+	}
+
+	.scTable-table {
+		padding: 30px;
+		border-radius: 20px;
+		background: rgb(4, 50, 83);
+		background-color: rgb(4, 50, 83);
+		box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109);
+		border: 1px solid #1279c3;
+	}
+
+	.el-table {
+		--el-table-border-color: transparent;
+		--el-table-row-hover-bg-color: rgb(15, 59, 94);
+	}
+
+	.el-table thead {
+		color: #ffffff;
+		background: rgb(7, 79, 109);
+	}
+
+	.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+		background: rgb(15, 59, 94);
+	}
+
+	.el-table__body-wrapper tr td.el-table-fixed-column--right {
+		background: transparent;
+		background-color: transparent;
+	}
+
+	.el-table>.el-table__inner-wrapper,
+	.el-table th.el-table__cell,
+	.el-table>.el-table__inner-wrapper>.el-table__header-wrapper,
+	.el-table>.el-table__inner-wrapper>.el-table__body-wrapper {
+		background: transparent;
+		background-color: transparent;
+	}
+
+	.el-table th.is-sortable:hover {
+		background: #111;
+	}
+
+
+	////
+	/// 
+	/// 
+	//页面标题
+	.panel_title {
+		height: 3.5vh;
+		width: 100%;
+		line-height: 3.5vh;
+		color: #ffffff;
+		font-size: 1.5vh;
+		padding-left: 1vw;
+		position: relative;
+		border-left: 5px solid #1279c3;
+		background: rgb(4, 50, 83);
+	}
+
+	//条件搜索
+	.searchWrap {
+		width: 100%;
+		height: 4vh;
+		display: flex;
+		justify-content: space-between;
+		line-height: 4vh;
+		border-radius: 5px;
+		padding: 0 1vw;
+		align-items: center;
+		background: rgb(4, 50, 83);
+		background-color: rgb(4, 50, 83);
+		box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109);
+		border: 1px solid #1279c3;
+	}
 }
--- a/src/views/bigScreen/enpComponents/cemsExport.vue
+++ b/src/views/bigScreen/enpComponents/cemsExport.vue
@ -1,21 +1,26 @@
 <template>
    <el-container>
        <el-header>
-            <div class="left-panel">
            <div class="panel_title">CEMS报表导出</div>
-            </div>
        </el-header>
        <el-main class="nopadding">
-            <div style="height: 8px;"></div>
-            <div style="margin-left: 8px">
-                <el-date-picker size="large" v-model="query.time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
-                    placeholder="时间选择" style=" width: 400px" />
+            <el-container>
+                <el-header>
+                    <div class="searchWrap" style="margin-left: 8px">
+                        <div>
+                            <el-date-picker size="large" v-model="query.time" type="datetime"
+                                value-format="YYYY-MM-DD HH:mm:ss" placeholder="时间选择" style=" width: 400px" />
                            <el-select size="large" v-model="query.type" placeholder="周期" style="margin-left:4px">
-                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
                            </el-select>
                            <el-button size="large" type="primary" @click="exportExcel" style="margin-left: 4px"
                                v-loading="eLoading">导出报表</el-button>
                        </div>
+                    </div>
+                </el-header>
+                <el-main></el-main>
+            </el-container>

        </el-main>
    </el-container>
--- a/src/views/bigScreen/enpComponents/orgwryList.vue
+++ b/src/views/bigScreen/enpComponents/orgwryList.vue
@ -1,12 +1,65 @@
 <template>
+    <el-container v-if="!pfkdetail">
+        <el-header>
+            <div class="panel_title">排放口清单
+                <div class="backMap" @click="backtoMap">
+                    切换地图
+                    <el-icon>
+                        <Switch />
+                    </el-icon>
+                </div>
+            </div>
+        </el-header>
+        <el-main class="nopadding">
+            <el-container>
+                <el-header>
+                    <div class="searchWrap">
+                        <div style="font-size: 1vh;">
+                            全场总排放口：<span class="totalNumber">5</span>
+                        </div>
                        <div>
-        <el-card v-if="pfkdetail" class="enpelCard">
-            <div class="headerTitle">排放口及关联设备信息
+                            <el-select v-model="query.area" placeholder="" style="width:7vw">
+                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                            <el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
+                                placeholder=""></el-input>
+                            <el-button @click="handleQuery">查询</el-button>
+                        </div>
+
+                    </div>
+                </el-header>
+                <el-main>
+                    <scTable :data="tableData" :apiObj="apiObj" size="large" 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="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="监测设备">
+                            <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>
+                </el-main>
+            </el-container>
+        </el-main>
+    </el-container>
+    <el-container v-else>
+        <el-header>
+            <div class="panel_title">排放口及关联设备信息
                <span class="backBtn" @click="handleClick"> 返回 </span>
            </div>
-            <div style="display:flex;">
-                <!-- 设备信息 -->
-                <div class="leftCard">
+        </el-header>
+        <el-main>
+            <el-container>
+                <el-aside style="width: 35%">
+                    <div class="aside_one">
                        <div class="pageTitle">排放口及关联设备静态信息</div>
                        <div class="linesWrap">
                            <div class="typeLine">
@ -32,7 +85,8 @@
                                <el-col :span="12">
                                    <div>
                                        <span class="infotitle">生产能力：</span>
-                                    <span v-if="eqs.parameter_json && eqs.parameter_json.生产能力">{{ eqs.parameter_json.生产能力
+                                        <span v-if="eqs.parameter_json && eqs.parameter_json.生产能力">{{
+                                            eqs.parameter_json.生产能力
                                        }}</span>
                                    </div>
                                </el-col>
@ -56,25 +110,29 @@
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">过滤面积：</span>
-                                    <span v-if="eqz.parameter_json && eqz.parameter_json.过滤面积">{{ eqz.parameter_json.过滤面积
+                                        <span v-if="eqz.parameter_json && eqz.parameter_json.过滤面积">{{
+                                            eqz.parameter_json.过滤面积
                                        }} m²</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">布袋材质：</span>
-                                    <span v-if="eqz.parameter_json && eqz.parameter_json.布袋材质">{{ eqz.parameter_json.布袋材质
+                                        <span v-if="eqz.parameter_json && eqz.parameter_json.布袋材质">{{
+                                            eqz.parameter_json.布袋材质
                                        }} </span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">过滤风速：</span>
-                                    <span v-if="eqz.parameter_json && eqz.parameter_json.过滤风速">{{ eqz.parameter_json.过滤风速
+                                        <span v-if="eqz.parameter_json && eqz.parameter_json.过滤风速">{{
+                                            eqz.parameter_json.过滤风速
                                        }} </span>m/min
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">额定功率：</span>
-                                    <span v-if="eqz.parameter_json && eqz.parameter_json.额定功率">{{ eqz.parameter_json.额定功率
+                                        <span v-if="eqz.parameter_json && eqz.parameter_json.额定功率">{{
+                                            eqz.parameter_json.额定功率
                                        }} </span> Kw
                                    </div>
                                </el-col>
@ -95,7 +153,8 @@
                                    <div><span class="infotitle">排气筒高度：</span>{{ detailItem.height }} m</div>
                                </el-col>
                                <el-col :span="12">
-                                <div><span class="infotitle">废气处理量：</span> {{ detailItem.treatment_capacity }} m³/h</div>
+                                    <div><span class="infotitle">废气处理量：</span> {{ detailItem.treatment_capacity }} m³/h
+                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">PM超低排放限值： </span> {{ detailItem.pm_limit }} mg/Nm³</div>
@ -154,92 +213,18 @@
                            </el-row>
                        </div>
                    </div>
-                <!-- 表 -->
-                <div class="rightCard">
+                </el-aside>
+                <el-main>
+                    <div class="aside_side">
                        <div class="pageTitle">排放口及关联设备动态信息</div>
                        <div id="dataChart" style="width: 100%; height:500px;margin-top:1vh"></div>
                        <div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
-                    <!-- <div style="color:#ffffff;">
-                        <div class="greenBlock">
-                            <div class="greenBlockInner"></div>
-                        </div>CEMS监测设备
-                        <div class="enpCheckbox">
-                            <el-checkbox v-model="checked1" label="超低排放限值（颗粒物:5; SO₂:-; NOx:-; 含氧量:-）" size="large" />
-                            <el-checkbox v-model="checked2" label="企业预警值（颗粒物:4; SO₂:-; NOx:-; 含氧量:-）" size="large" />
-                            <el-checkbox v-model="checked3" label="颗粒物实测值" size="large" />
-                            <el-checkbox v-model="checked4" label="颗粒物折算值" size="large" />
-                            <el-checkbox v-model="checked5" label="SO₂实测值" size="large" />
-                            <el-checkbox v-model="checked6" label="SO₂折算值" size="large" />
-                            <el-checkbox v-model="checked7" label="NOx实测值" size="large" />
-                            <el-checkbox v-model="checked8" label="NOx折算值" size="large" />
-                            <el-checkbox v-model="checked9" label="含氧量" size="large" />
-                            <el-checkbox v-model="checked10" label="流量" size="large" />
-                            <el-checkbox v-model="checked11" label="压力" size="large" />
-                            <el-checkbox v-model="checked12" label="温度" size="large" />
-                            <el-checkbox v-model="checked13" label="湿度" size="large" />
-                            <el-checkbox v-model="checked14" label="流速" size="large" />
-                        </div>
-                        <div class="greenBlock">
-                        </div>生产设备-水泥磨机
-                        <div class="enpCheckbox">
-                            <el-checkbox v-model="checked15" label="水泥磨机运行信号" size="large" />
-                        </div>
-                        <div class="greenBlock">
-                            <div class="greenBlockInner"></div>
-                        </div>治理设备-磨尾除尘器
-                        <div class="enpCheckbox">
-                            <el-checkbox v-model="checked16" label="磨尾除尘器运行信号" size="large" />
-                        </div>
-                    </div> -->
-                </div>
-            </div>
-        </el-card>
-        <div class="tableBg" v-else>
-            <div class="pageTitle">排放口清单</div>
-            <div class="backMap" @click="backtoMap">
-                切换地图
-                <el-icon>
-                    <Switch />
-                </el-icon>
-            </div>
-            <el-card class="enpelCard" style="margin: 2vh 1vw">
-                <!-- 全程排放口统计 -->
-                <div class="totalWrap" style="">
-                    <div>全场</div>
-                    <div>总排放口：<span class="totalNumber">5</span></div>
                    </div>

-                <!-- 查询条件 -->
-                <div style="display:flex">
-                    <el-select v-model="query.area" placeholder="" style="width:7vw">
-                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-                        </el-option>
-                    </el-select>
-                    <el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
-                        placeholder=""></el-input>
-                    <el-button @click="handleQuery">查询</el-button>
-                </div>
-                <!-- table表格 -->
-                <div style="margin-top:2vh">
-                    <scTable :data="tableData" :apiObj="apiObj" size="large" 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="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="监测设备">
-                            <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>
-        </div>
-    </div>
+                </el-main>
+            </el-container>
+        </el-main>
+    </el-container>
 </template>
 <script>
 import * as echarts from "echarts";
@ -473,6 +458,8 @@ export default {
    background-size: 100% 100%;
 }

+
+
 .totalWrap {
    display: flex;
    justify-content: space-between;
@ -485,10 +472,10 @@ export default {

 .totalNumber {
    color: #64D2FF;
+    font-size: 1.6vh;
+    font-weight: bold;
 }

-.searchInput {}
-
 .searchBtn {
    width: 4.7vw;
    height: 3vh;
@ -497,12 +484,13 @@ export default {
 }

 .backMap {
-    height: 3vh;
-    line-height: 3vh;
+    height: 2vh;
+    line-height: 2vh;
    position: absolute;
-    right: 3vh;
-    top: 2.5vh;
+    right: 1vw;
+    top: 0.7vh;
    font-size: 1vh;
+    width: -moz-fit-content;
    width: fit-content;
    color: #ffffff;
    padding: 0 0.5vw;
--- a/src/views/bigScreen/enpComponents/pollutant.vue
+++ b/src/views/bigScreen/enpComponents/pollutant.vue
@ -8,7 +8,7 @@
                <el-main class="nopadding">
                    <el-container>
                        <el-header>
-                            <div class="left-panel">
+                            <div class="searchWrap">
                                <el-select v-model="query.cate" placeholder="污染源分类" @change="handleQuery" clearable>
                                    <el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>