diff --git a/.env.development b/.env.development
index c46feb78ace32b7aa5d1a9991fd21b22ac821735..7b13e024af9a4ee5ec0e94e911366b498bd2980c 100644
--- a/.env.development
+++ b/.env.development
@@ -14,5 +14,5 @@ VUE_APP_BASE_API = '/dev-api'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 寮€鍙戠幆澧冪殑鍚庣鎺ュ彛鍦板潃
-VUE_APP_API_TARGET = http://192.168.2.37:9091
+VUE_APP_API_TARGET = http://192.168.2.14:9091
# VUE_APP_API_TARGET = http://localhost:8080
\ No newline at end of file
diff --git a/src/api/tyler/hjjc.js b/src/api/tyler/hjjc.js
index 715c1a561caf85aee882bee7396dc7cb4b9d8087..9664b12ca6a6e57d74119d4858a940cfd4579621 100644
--- a/src/api/tyler/hjjc.js
+++ b/src/api/tyler/hjjc.js
@@ -8,7 +8,15 @@ export function getRealData(query) {
params: query,
});
}
+// 鏌ヨ璁惧25H鏁版嵁
+export function getDeviceData(query) {
+ return request({
+ url: "/business/screen/env/deviceData",
+ method: "get",
+ params: query,
+ });
+}
// 鏌ヨ鍘嗗彶鏁版嵁鍙充笂
export function getRtData(query) {
return request({
@@ -25,3 +33,12 @@ export function getRcData(query) {
params: query,
});
}
+
+// 鏌ヨ璁惧浣嶇疆
+export function getDeviceStatus(query) {
+ return request({
+ url: "/business/screen/env/deviceStatus",
+ method: "get",
+ params: query,
+ });
+}
diff --git a/src/assets/images/screen/hjjc/popup.png b/src/assets/images/screen/hjjc/popup.png
new file mode 100644
index 0000000000000000000000000000000000000000..eeee60b157d3d140e9f9d35964ebe772d0ae3ad9
Binary files /dev/null and b/src/assets/images/screen/hjjc/popup.png differ
diff --git a/src/assets/images/screen/hjjc/title-popup.png b/src/assets/images/screen/hjjc/title-popup.png
new file mode 100644
index 0000000000000000000000000000000000000000..931d2031f5bd8d6864310127474e436cde1754fa
Binary files /dev/null and b/src/assets/images/screen/hjjc/title-popup.png differ
diff --git a/src/assets/images/screen/psxt/bg1.png b/src/assets/images/screen/psxt/bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebbdea91421fdfed510d9204e728e0d3f8b59f49
Binary files /dev/null and b/src/assets/images/screen/psxt/bg1.png differ
diff --git a/src/views/Screen/items/hjjc.vue b/src/views/Screen/items/hjjc.vue
index a45a19d8dd8218e72708f3fa49757769fb34ccc3..69030be1f9991ac1bd0c4ddce5f50e1107736d14 100644
--- a/src/views/Screen/items/hjjc.vue
+++ b/src/views/Screen/items/hjjc.vue
@@ -8,34 +8,42 @@
<div class="sub-title por"><span>鐜鐩戞祴瀹炴椂鏁版嵁 </span></div>
<div class="table-box">
<vue-seamless-scroll
- ref="vueSeamlessScroll"
+ ref="sssjControl"
:data="tableData1"
:class-option="classOption"
@mousewheel.native="handleScroll"
class="warp"
>
<ul class="item">
- <li class="table-item" v-for="(item, i) in tableData1" :key="i">
- <el-row :gutter="16">
- <el-col :span="6" class="jz">
- <img
- class="img-class"
- :src="
- require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
- "
- />
- </el-col>
- <el-col :span="10">
- <p class="device-name">{{ item.tpName }}</p>
- <p class="device-time">{{ item.time }}</p>
- </el-col>
- <el-col :span="8">
- <p class="device-value">
- {{ item.value | capitalize }}{{ item.unit }}
- </p>
- </el-col>
- </el-row>
- </li>
+ <div
+ :class="upWindowData.upWindowActive === i ? 'active' : ''"
+ style="cursor: pointer"
+ v-for="(item, i) in tableData1"
+ :key="i"
+ @click="lookRealData(item, i)"
+ >
+ <li class="table-item">
+ <el-row :gutter="16">
+ <el-col :span="6" class="jz">
+ <img
+ class="img-class"
+ :src="
+ require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
+ "
+ />
+ </el-col>
+ <el-col :span="10">
+ <p class="device-name">{{ item.tpName }}</p>
+ <p class="device-time">{{ item.time }}</p>
+ </el-col>
+ <el-col :span="8">
+ <p class="device-value">
+ {{ item.value | capitalize }}{{ item.unit }}
+ </p>
+ </el-col>
+ </el-row>
+ </li>
+ </div>
</ul>
</vue-seamless-scroll>
</div>
@@ -44,15 +52,23 @@
<!-- 涓棿 -->
<div class="main-area">
<!-- 璁惧鐐逛綅 -->
- <div class="dot">
+ <div
+ class="dot"
+ v-for="(item, i) in equipmentList"
+ :key="i"
+ :class="item.isWarning == 1 ? 'active' : ''"
+ :style="{ left: item.x + 'px', top: item.y + 'px' }"
+ >
<div class="dot1" @click="">
<div class="tip-box">
- <p>涓€涓伩闄╃瀹ゆ哀姘�</p>
- <p class="active">
- 涓€涓伩闄╃瀹や竴姘у寲纰�
+ <p
+ v-for="(iitem, l) in item.monitorPositionList"
+ :key="l"
+ :class="iitem.isWarning == 1 ? 'active' : ''"
+ >
+ {{ iitem.equipmentName }}
<span></span>
</p>
- <p>涓€涓伩闄╃瀹ゆ哀姘�</p>
</div>
</div>
</div>
@@ -119,7 +135,8 @@
class="warp"
:data="tableData2"
:class-option="classOption2"
- ref="vueSeamlessScroll"
+ @mousewheel.native="handleScrollR"
+ ref="RightScroll"
>
<ul class="item">
<li
@@ -142,17 +159,29 @@
</div>
</div>
</div>
+ <!-- 寮圭獥鍐呭 -->
+ <transition name="el-fade-in">
+ <div v-show="upWindowData.upWindowVisible" class="up-window">
+ <p><span></span>鍥涗腑娓╁害璁惧涓€</p>
+ <i class="el-icon-close close-button" @click="closeUpWindow"></i>
+ <p class="date-title">2025-3-13</p>
+ <div class="chart-box" id="chartBox"></div>
+ </div>
+ </transition>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
-import { getRealData, getRtData } from "@/api/tyler/hjjc";
+import {
+ getRealData,
+ getRtData,
+ getDeviceStatus,
+ getDeviceData,
+} from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll";
-{
-}
export default {
name: "cockpit",
components: {
@@ -161,16 +190,27 @@ export default {
},
data() {
return {
+ // 璁惧瀹炴柦鏁版嵁寮圭獥
+ upWindowData: {
+ upWindowActive: "",
+ upWindowVisible: false,
+ },
+ // 宸﹁竟鍒楄〃鏁版嵁
tableData1: [],
+ // 宸︿晶婊氬姩 鍙傛暟
classOption: {
singleHeight: 110,
- openTouch: true,
+ hoverStop: true,
+ autoPlay: true,
},
+ // 璁惧瀹氫綅鍒嗙被寮€鍏�
checkList: ["1", "2"],
+ // 鍙充笅婊氬姩 鍙傛暟
classOption2: {
singleHeight: 47,
- openTouch: true,
+ hoverStop: true,
},
+ // 宸︿晶瀹炴柦鏁版嵁鍒楄〃
sssjData: [
{
name: "",
@@ -188,8 +228,11 @@ export default {
],
},
],
+ // 鍙充笂璁惧杞挱涓嬫爣
sssjMark: 0,
+ // 鍙充笂璁惧杞挱鍚嶇О
sssjName: "",
+ // 鍙充笅 鍒楄〃鏁版嵁
tableData2: [
{
name: "闄堢帀寮�",
@@ -234,6 +277,218 @@ export default {
alertLocation: "鍥涗腑杞﹀満",
},
],
+ // 涓棿鍥剧墖鏁版嵁鍒楄〃
+ equipmentList: [
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 85,
+ y: 233,
+ name: "涓€涓伩闄╃瀹�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 145,
+ y: 253,
+ name: "涓€涓鏈�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 185,
+ y: 258,
+ name: "涓€涓富杩愯緭娓�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 270,
+ y: 270,
+ name: "涓€涓繍杈撴腐",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 237,
+ y: 280,
+ name: "涓€涓タ閲囧尯",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 816,
+ y: 221,
+ name: "涓滈浜�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 75,
+ y: 331,
+ name: "浜屼腑閬块櫓纭愬",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 153,
+ y: 357,
+ name: "浜屼腑涓昏繍杈撴腐",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 217,
+ y: 366,
+ name: "浜屼腑涓繍杈撴腐",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 317,
+ y: 379,
+ name: "浜屼腑杩愯緭娓�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ {
+ isWarning: 0, //鏄惁鎶ヨ
+ x: 128,
+ y: 396,
+ name: "浜屼腑瑗块噰鍖�",
+ // 鐩戞祴鐐�
+ monitorPositionList: [
+ {
+ equipmentName: "涓€涓伩闄╃瀹ゆ哀姘�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ {
+ equipmentName: "涓€涓伩闄╃瀹や竴姘у寲纰�", //璁惧鍚嶇О
+ equipmentTy: "", //璁惧绫诲瀷
+ isWarning: 0, //鏄惁鎶ヨ
+ },
+ ],
+ },
+ ],
};
},
mounted() {
@@ -247,6 +502,9 @@ export default {
this.sssjData = res.data;
this.playFun(this.sssjData);
});
+ getDeviceStatus().then((res) => {
+ console.log(res, "涓棿鍥剧墖");
+ });
},
created() {},
methods: {
@@ -261,26 +519,11 @@ export default {
});
},
// 鍒濆鍖杄ChartDOM
- initEchartBox(id, xData = [], yData = [], mkData = 28) {
+ initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
let that = this;
let myChart = echarts.init(document.getElementById(id));
let option = {
- grid: {
- left: "4%",
- right: "5%",
- bottom: "4%",
- top: "7%",
- containLabel: true,
- },
- // tooltip: {
- // trigger: "axis",
- // axisPointer: {
- // type: "none",
- // },
- // formatter: function (params) {
- // return params[0].name + " : " + params[0].value;
- // },
- // },
+ grid: grid,
xAxis: {
show: true,
type: "category",
@@ -288,7 +531,7 @@ export default {
data: xData,
axisLabel: {
show: true,
- interval: 4,
+ interval: step,
textStyle: {
color: "#FFFFFF", //鏇存敼鍧愭爣杞存枃瀛楅鑹�
fontSize: 16, //鏇存敼鍧愭爣杞存枃瀛楀ぇ灏�
@@ -385,16 +628,25 @@ export default {
// 鍚姩瀹氭椂鍣紝姣忛殧 3 绉掓墽琛屼竴娆�
let i = 0;
let l = 0;
+ let grid = {
+ left: "4%",
+ right: "5%",
+ bottom: "4%",
+ top: "7%",
+ containLabel: true,
+ };
const timer = setInterval(() => {
if (i < list.length) {
if (Array.isArray(list[i].value) && l < list[i].value.length) {
this.sssjMark = i;
this.sssjName = list[i].value[l].tpName;
- this.initEchartBox(
- "sssj",
- list[i].value[l].data.xData.data,
- list[i].value[l].data.yData.data
- );
+ // this.initEchartBox(
+ // "sssj",
+ // list[i].value[l].data.xData.data,
+ // list[i].value[l].data.yData.data,
+ // "",
+ // grid
+ // );
l++;
} else {
i++;
@@ -422,11 +674,59 @@ export default {
this.autoScroll.bind(this)
);
},
- //鍋滄婊氬姩
- cancelScroll() {
- window.cancelAnimationFrame(this.scrolltimer3);
- },
+ // 鏌ョ湅璁惧24H瀹炴椂鏁版嵁
+ lookRealData(item, i) {
+ this.upWindowData.upWindowActive = i;
+ this.upWindowData.upWindowVisible = true;
+ this.classOption.autoPlay = false;
+ console.log(item);
+ getDeviceData({ tpName: item.tpName }).then((res) => {});
+ let a = [
+ "01:00",
+ "02:00",
+ "03:00",
+ "04:00",
+ "05:00",
+ "06:00",
+ "07:00",
+ "08:00",
+ "09:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "17:00",
+ "18:00",
+ "19:00",
+ "20:00",
+ "21:00",
+ "22:00",
+ "23:00",
+ ];
+ let b = [
+ 29.1, 28, 27, 26, 25, 24, 29, 25, 28, 26, 28, 27, 26, 24, 28, 21, 29,
+ 28, 24, 26, 28, 24, 24, 26,
+ ];
+ let grid = {
+ left: 0,
+ right: "1.7%",
+ bottom: "4%",
+ top: "7%",
+ containLabel: true,
+ };
+ this.initEchartBox("chartBox", a, b, 25, 0, grid);
+ },
+ // 鍏抽棴寮圭獥
+ closeUpWindow() {
+ this.upWindowData.upWindowActive = "";
+ this.upWindowData.upWindowVisible = false;
+ this.classOption.autoPlay = true;
+ this.$refs.sssjControl._startMove();
+ },
goToSys() {
var link = this.$router.resolve({
path: "/",
@@ -434,24 +734,42 @@ export default {
window.open(link.href);
return;
},
- // 榧犳爣婊氬姩浠ｇ爜
+ // 宸︿晶 榧犳爣婊氬姩浠ｇ爜
handleScroll(e) {
// 鏀瑰彉缁勪欢鍐呴儴 yPos 鐨勫€硷紝杩欐牱html鐨則ranslate(0, yPos)灏变細闅忎箣鏀瑰彉
// e.deltaY鏄粴鍔ㄧ殑璺濈
- this.$refs.vueSeamlessScroll.yPos =
- this.$refs.vueSeamlessScroll.yPos - e.deltaY;
+ this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY;
+ // 濡傛灉鏄鏁� 璇存槑鏄線涓婃粴
+ if (this.$refs.sssjControl.yPos > 0) {
+ this.$refs.sssjControl.yPos = 0;
+ return;
+ }
+ // 濡傛灉yPos瓒呰繃鍐呴儴瀹為檯楂樺害鐨勪竴鍗婂垯閲嶆柊鍒伴《閮ㄦ粴鍔�
+ // 涓€鍗婄殑鍘熷洜鏄洜涓虹粍浠跺疄闄呬笂鍒涘缓浜嗕袱涓猟om锛屼互杈惧埌鏃犵紳琛旀帴鐨勬晥鏋�
+ if (
+ Math.abs(this.$refs.sssjControl.yPos) >
+ this.$refs.sssjControl.realBoxHeight / 2
+ ) {
+ this.$refs.sssjControl.yPos = 0;
+ }
+ },
+ // 鍙充晶 榧犳爣婊氬姩浠ｇ爜
+ handleScrollR(e) {
+ // 鏀瑰彉缁勪欢鍐呴儴 yPos 鐨勫€硷紝杩欐牱html鐨則ranslate(0, yPos)灏变細闅忎箣鏀瑰彉
+ // e.deltaY鏄粴鍔ㄧ殑璺濈
+ this.$refs.RightScroll.yPos = this.$refs.RightScroll.yPos - e.deltaY;
// 濡傛灉鏄鏁� 璇存槑鏄線涓婃粴
- if (this.$refs.vueSeamlessScroll.yPos > 0) {
- this.$refs.vueSeamlessScroll.yPos = 0;
+ if (this.$refs.RightScroll.yPos > 0) {
+ this.$refs.RightScroll.yPos = 0;
return;
}
// 濡傛灉yPos瓒呰繃鍐呴儴瀹為檯楂樺害鐨勪竴鍗婂垯閲嶆柊鍒伴《閮ㄦ粴鍔�
// 涓€鍗婄殑鍘熷洜鏄洜涓虹粍浠跺疄闄呬笂鍒涘缓浜嗕袱涓猟om锛屼互杈惧埌鏃犵紳琛旀帴鐨勬晥鏋�
if (
- Math.abs(this.$refs.vueSeamlessScroll.yPos) >
- this.$refs.vueSeamlessScroll.realBoxHeight / 2
+ Math.abs(this.$refs.RightScroll.yPos) >
+ this.$refs.RightScroll.realBoxHeight / 2
) {
- this.$refs.vueSeamlessScroll.yPos = 0;
+ this.$refs.RightScroll.yPos = 0;
}
},
},
@@ -557,10 +875,10 @@ export default {
.table-box {
height: 866px;
width: calc(100% - 4px);
- padding: 0px 23px;
.table-item {
height: 110px;
- width: 100%;
+ width: calc(100% - 46px);
+ margin: 0 auto;
border-bottom: 2px dashed rgba(100, 194, 255, 0.3);
padding-top: 9px;
.img-class {
@@ -605,8 +923,11 @@ export default {
overflow: hidden;
ul {
list-style: none;
- padding: 0;
margin: 0 auto;
+ .active {
+ // width: 100%;
+ background: RGBA(2, 87, 149, 1);
+ }
}
}
}
@@ -847,4 +1168,60 @@ export default {
}
}
}
+.up-window {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1360px;
+ height: 480px;
+ transform: translate(-50%, -50%);
+ background: url("~@/assets/images/screen/hjjc/popup.png") no-repeat;
+ background-size: 1377px 501px;
+ box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
+ padding: 28px 37px;
+ p {
+ width: 1271px;
+ height: 37px;
+ margin: 0px;
+ background: url("~@/assets/images/screen/hjjc/title-popup.png") no-repeat
+ center;
+ background-size: 100%;
+ font-weight: 500;
+ font-size: 22px;
+ color: #ffffff;
+ height: 37px;
+ background-position-y: 9px;
+ span {
+ width: 27px;
+ display: inline-block;
+ }
+ }
+ .close-button {
+ font-size: 30px;
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ cursor: pointer;
+ &:hover {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ -webkit-transition: -webkit-transform 1s linear;
+ transition: transform 1s linear;
+ }
+ }
+ .date-title {
+ width: 108px;
+ height: 18px;
+ font-weight: 500;
+ font-size: 22px;
+ color: #15f1ff;
+ background: none;
+ margin-left: 56px;
+ margin-top: 5px;
+ }
+ .chart-box {
+ width: 100%;
+ height: 355px;
+ }
+}
</style>
diff --git a/src/views/Screen/items/psxt.vue b/src/views/Screen/items/psxt.vue
index 5828a320abe67ab0942c104a89536531ce52e244..ae103afea29afb12803da64c96826dd85bbde979 100644
--- a/src/views/Screen/items/psxt.vue
+++ b/src/views/Screen/items/psxt.vue
@@ -1,6 +1,125 @@
<template>
<div class="app-container home">
- <div id="cesiumContainer"></div>
+ <div id="cesiumContainer">
+ <div class="center-title-box">
+ <div class="control-state">
+ <p>
+ <span class="icon-img"></span>
+ <span>宸插紑鍚櫤鑳芥帶鍒�</span>
+ </p>
+ </div>
+ <div class="title-box top">
+ <p class="title">娑蹭綋楂樺害:10m</p>
+ <p class="name">钃勬按姹�</p>
+ </div>
+ <div class="title-box center">
+ <p class="title">娑蹭綋楂樺害:10m</p>
+ <p class="name">浜屼腑姘翠粨</p>
+ </div>
+ <div class="title-box bottom">
+ <p class="title">娑蹭綋楂樺害:10m</p>
+ <p class="name">浜斾腑姘翠粨</p>
+ </div>
+ </div>
+ <div class="water-pump pst1">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-left"></div>
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-left"></div>
+ <p>5#姘存车</p>
+ </div>
+ </div>
+ </div>
+ <div class="water-pump pst2">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-left"></div>
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-left"></div>
+ <p>5#姘存车</p>
+ </div>
+ </div>
+ </div>
+ <div class="water-pump pst3">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-right"></div>
+ <p>5#姘存车</p>
+ </div>
+ <div class="phd-left"></div>
+ </div>
+ </div>
+ <div class="water-pump pst4">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-left"></div>
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-left"></div>
+ <p>5#姘存车</p>
+ </div>
+ </div>
+ </div>
+ <div class="water-pump pst5">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-left"></div>
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-left"></div>
+ <p>5#姘存车</p>
+ </div>
+ </div>
+ </div>
+ <div class="water-pump pst6">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-right"></div>
+ <p>5#姘存车</p>
+ </div>
+ <div class="phd-left"></div>
+ </div>
+ </div>
+ <div class="water-pump pst7">
+ <div class="H36">
+ <div class="button on">寮€鍚�</div>
+ <div class="button off">鍏抽棴</div>
+ </div>
+ <div class="H164">
+ <div class="phd-right">
+ <div class="phd-top"></div>
+ <div class="water-pump-img-right"></div>
+ <p>5#姘存车</p>
+ </div>
+ <div class="phd-left"></div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
@@ -27,6 +146,165 @@ export default {
height: 745px;
background: url("~@/assets/images/screen/psxt/gd.png") no-repeat center;
background-size: 1800px 745px;
+ position: relative;
+ .center-title-box {
+ width: 200px;
+ height: 100%;
+ margin: auto;
+ position: relative;
+ .control-state {
+ width: 260px;
+ height: 44px;
+ background: url("~@/assets/images/screen/psxt/bg1.png") no-repeat center;
+ background-size: 100% 100%;
+ position: absolute;
+ top: 33px;
+ left: 342px;
+ p {
+ font-weight: 400;
+ font-size: 20px;
+ color: #ffd929;
+ line-height: 44px;
+ margin: 0px;
+ text-align: center;
+ .icon-img {
+ background: url("~@/assets/images/screen/psxt/icon1.png") no-repeat
+ center;
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ margin-bottom: -4px;
+ margin-right: 10px;
+ }
+ }
+ }
+ .title-box {
+ text-align: center;
+ .title {
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ font-size: 18px;
+ color: #11e0ff;
+ }
+ .name {
+ font-weight: 400;
+ font-size: 20px;
+ color: #ffffff;
+ }
+ }
+ .top {
+ margin-top: -35px;
+ }
+ .center {
+ margin-top: 273px;
+ }
+ .bottom {
+ margin-top: 270px;
+ }
+ }
+ .water-pump {
+ position: absolute;
+ width: 172px;
+ height: 200px;
+ // background: #ffffff;
+ .H36 {
+ height: 36px;
+ .button {
+ width: 86px;
+ height: 36px;
+ float: left;
+ line-height: 36px;
+ text-align: center;
+ font-weight: bold;
+ font-size: 18px;
+ color: #96aeba;
+ line-height: 32px;
+ text-shadow: 0px 1px 4px rgba(5, 38, 68, 0.73);
+ border: 2px solid #d8efff;
+ border-radius: 2px;
+ background: RGBA(0, 26, 49, 1);
+ }
+ .on {
+ &.active {
+ background: url("~@/assets/images/screen/psxt/button.png") no-repeat
+ center;
+ color: #ffffff;
+ }
+ }
+ .off {
+ border-left: none;
+ &.active {
+ background: url("~@/assets/images/screen/psxt/button2.png")
+ no-repeat center;
+ color: #ffffff;
+ }
+ }
+ }
+ .H164 {
+ height: calc(100% - 36px);
+ .phd-left {
+ width: 50px;
+ height: calc(100% - 36px);
+ float: left;
+ }
+ .phd-right {
+ width: 122px;
+ height: calc(100% - 36px);
+ float: left;
+ .phd-top {
+ height: 40px;
+ }
+ .water-pump-img-left {
+ width: 122px;
+ height: 70px;
+ background: url("~@/assets/images/screen/psxt/item.png") no-repeat
+ center;
+ }
+ .water-pump-img-right {
+ width: 122px;
+ height: 70px;
+ background: url("~@/assets/images/screen/psxt/item1.png") no-repeat
+ center;
+ }
+ p {
+ font-weight: 400;
+ font-size: 20px;
+ color: #ffffff;
+ line-height: 30px;
+ text-align: center;
+ margin-top: 3px;
+ }
+ }
+ }
+ &.pst1 {
+ top: 139px;
+ left: 143px;
+ }
+ &.pst2 {
+ top: 139px;
+ left: 582px;
+ }
+ &.pst3 {
+ top: 139px;
+ left: 1408px;
+ }
+ &.pst4 {
+ top: 480px;
+ left: 0px;
+ }
+ &.pst5 {
+ top: 480px;
+ left: 440px;
+ }
+ &.pst6 {
+ top: 480px;
+ left: 1188px;
+ }
+ &.pst7 {
+ top: 480px;
+ left: 1630px;
+ }
+ }
}
}
</style>