From 67cc1463320874211a09fee5c1b3b1fecf6d5a7c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 10 十一月 2023 13:40:57 +0800
Subject: [PATCH] Merge branch 'dev1.0' of http://42.193.1.25:9521/r/sccg_ui into dev1.0
---
src/views/smoke/cockpit/index.vue | 500 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 497 insertions(+), 3 deletions(-)
diff --git a/src/views/smoke/cockpit/index.vue b/src/views/smoke/cockpit/index.vue
index 6b89f78..e5fdcbe 100644
--- a/src/views/smoke/cockpit/index.vue
+++ b/src/views/smoke/cockpit/index.vue
@@ -1,13 +1,507 @@
<template>
- <div>娌圭儫椹鹃┒鑸�</div>
+ <div class="smoke-cockpit">
+ <el-dialog title="琛楅亾鏁版嵁灞曠ず" :visible.sync="dialogStreetData" width="80%">
+ <el-table :data="gridData" stripe border highlight-current-row>
+ <el-table-column property="date" label="琛楅亾鍚�" width="150"></el-table-column>
+ <el-table-column property="name" label="鐩戞祴鐐规暟" width="200"></el-table-column>
+ <el-table-column property="address" label="鍦ㄧ嚎鏁�"></el-table-column>
+ <el-table-column property="address" label="鍦ㄧ嚎鐜�"></el-table-column>
+ <el-table-column property="address" label="杈炬爣鏁�"></el-table-column>
+ <el-table-column property="address" label="杈炬爣鐜�"></el-table-column>
+ <el-table-column property="address" label="瓒呮爣鏁�"></el-table-column>
+ <el-table-column property="address" label="瓒呮爣鐜�"></el-table-column>
+ <el-table-column property="address" label="鎵ф硶宸ュ崟娲鹃仯鎬绘暟"></el-table-column>
+ <el-table-column property="address" label="宸叉暣鏀瑰晢鎴锋暟鐩�"></el-table-column>
+ <el-table-column property="address" label="鍟嗘埛鏁存敼鐜�"></el-table-column>
+
+ </el-table>
+ <div class="pagination">
+ <el-pagination
+ background
+ :current-page="currentPage"
+ layout="prev, pager, next"
+ :total="totalNum"
+ :page-size="pageSize"
+ @current-change="changeCurrentPage"
+ >
+ </el-pagination>
+ </div>
+ </el-dialog>
+ <div class="smoke-title">
+ 閬傛槍鍘挎櫤鎱ф墽娉曞簲鐢�
+ </div>
+ <div class="smoke-cockpit-body">
+ <div class="smoke-echarts-title">
+ <div v-for="(item,index) in indexList" :key="index" class="smoke-echarts">
+ <div id="mychart" class="echart"></div>
+ </div>
+ </div>
+
+ <div class="smoke-map">
+ <div class="smoke-map-title">
+ <div>
+ <p> 鐩戞祴鐐规暟锛堜釜锛�</p>
+ 5
+ </div>
+ <div>
+ <p> 鍦ㄧ嚎鏁帮紙鍙帮級</p>
+ 5
+ </div>
+ <div>
+ <p> 杈炬爣鏁帮紙鍙帮級</p>
+ 5
+ </div>
+ <div>
+ <p> 瓒呮爣鏁帮紙鍙帮級</p>
+ 5
+ </div>
+ <div>
+ <p> PM2.5骞村噺鎺抂kgs]</p>
+ 5
+ </div>
+ <div>
+ <p> PM10骞村噺鎺抂kgs]</p>
+ 5
+ </div>
+ <div>
+ <p> 闈炵敳鐑锋�荤儍骞村噺鎺抂kgs]</p>
+ 5
+ </div>
+ <div>
+ <p> 娌圭儫骞村噺鎺抂kgs]</p>
+ 5
+ </div>
+ </div>
+ <div class="Mymap">
+ <MyMap
+ :point="point"
+ :zoom="zoom"
+ :mark="mark"
+ @fatherMethod="fatherMethod"
+ >
+
+ </MyMap>
+ <div class="Mymap-foot" @click="batStreetData">
+ <span>琛楅亾鏁版嵁灞曠ず</span>
+ <span>鐐瑰嚮灞曞紑</span>
+ </div>
+ </div>
+ <div class="smoke-echarts-foot-t">
+ <div v-for="(item,index) in indexLists" :key="index" class="smoke-echarts-foot">
+ <div id="mychart2" class="echart-foot"></div>
+ </div>
+ </div>
+ </div>
+ <div class="smoke-information">
+
+ <div class="smoke-information-title">
+ 鎶ヨ淇℃伅
+ </div>
+ <ul v-for="(item,index) in alarmInformation " :key="index" class="smoke-information-ul">
+ <li>鎶ヨ绫诲瀷锛歿{item.alarmType}}</li>
+ <li>鎶ヨ鐐癸細{{item.alarmPoint}}</li>
+ <li>鎶ヨ鏃堕棿锛歿{item.alarmTime}}</li>
+ <li>鎶ヨ鍦板潃锛歿{item.alarmAddress}}</li>
+ </ul>
+
+ </div>
+ </div>
+
+
+ </div>
</template>
<script>
+import * as echarts from "echarts";
+import MyMap from "@/components/map/leafletMap.vue";
+
export default {
+ components: {MyMap},
+ data() {
+ return {
+ totalNum: 1,
+ pageSize: 10,
+ currentPage: 1,
+ gridData: [{
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }],
+ xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //妯潗鏍�
+ yData: [23, 24, 18, 25, 27, 28, 25], //鏁版嵁
+ myChartStyle: {float: "left", width: "100%", height: "400px"}, //鍥捐〃鏍峰紡
+ indexList: [
+ {id: 0, name: "杩戝叚涓湀瓒呮爣鎶ヨ娆℃暟"},
+ {id: 1, name: "杩戝叚涓湀娌圭儫閿帓閲�"}
+ ],
+ indexLists:[
+ {id: 0, name: "姣忔棩鍦ㄧ嚎鐜�(%)"},
+ {id: 1, name: "姣忔棩杈炬爣鐜�(%)"}
+ ],
+ point: { x: "119.27179890", y: "28.59027084" },
+ mark: null,
+ zoom: 13,
+ alarmInformation:[
+ {id: 0, alarmType: "瓒呮爣鎶ヨ1",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ2",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ3",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ4",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ5",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ6",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ {id: 0, alarmType: "瓒呮爣鎶ヨ7",alarmPoint:"姹ゅ叕閰掑簵",alarmTime:"2023-09-18",alarmAddress:"涓芥按甯傞亗鏄屽幙榫欓璺�10鍙�"},
+ ],
+ dialogStreetData:false,
+ };
+ },
+ mounted() {
+ this.initEcharts();
+ this.initEcharts2()
+ },
+ methods: {
+ changeCurrentPage(page) {
+ this.currentPage = page;
+ // this.getTableData();
+ },
+ batStreetData(){
+ this.dialogStreetData = true
+ },
+ fatherMethod() {
+ console.log('fatjer<emtj')
+ },
+ initEcharts2() {
+ let roseCharts = document.getElementsByClassName('echart-foot')
+ for (let i = 0; i < roseCharts.length; i++) {
+ // 鍩烘湰鏌辩姸鍥�
+ console.log(i)
+ let myChart = echarts.init(roseCharts[i])
+ let option = {
+ xAxis: {
+ data: this.xData,
+ axisLabel: {
+ interval: 0,
+ formatter: ' {value}',//Y杞村乏渚ф枃瀛楃殑鍗犱綅
+ textStyle: {
+ fontSize: 15,
+ color: "#FFF" //Y杞存枃瀛楅鑹�
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#01FCE3'
+ }
+ },
+
+ },
+ // 鍥句緥
+ legend: {
+ data: [this.indexLists[i].name],
+ top: "0%",
+ left: "5%",
+ textStyle: {//鍥句緥鏂囧瓧鐨勬牱寮�
+ color: '#25FCF2',
+ fontSize: 16
+ }
+ },
+ yAxis: {
+ axisLabel: {
+ interval: 0,
+ formatter: ' {value}',//Y杞村乏渚ф枃瀛楃殑鍗犱綅
+ textStyle: {
+ fontSize: 15,
+ color: "#FFF" //Y杞存枃瀛楅鑹�
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#01FCE3'
+ }
+ },
+
+ },
+
+ series: [
+ {
+ type: "line", //褰㈢姸涓烘煴鐘跺浘
+ data: this.yData,
+ // 鍚岀郴鍒楁煴鏉℃牱寮�
+ itemStyle: {
+ barBorderRadius: 5,
+ borderWidth: 1,
+ borderType: "solid",
+ borderColor: "#73c0de",
+ shadowColor: "#5470c6",
+ shadowBlur: 3,
+ color: "#25FCF2"
+ },
+ name: this.indexLists[i].name, // legend灞炴��
+ label: {
+ // 鏌辩姸鍥句笂鏂规枃鏈爣绛撅紝榛樿灞曠ず鏁板�间俊鎭�
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 13,
+ color: "#fff" //Y杞存枃瀛楅鑹�
+ }
+
+ }
+ }
+ ]
+ };
+ // const myChart = echarts.init(document.getElementById("mychart"));
+ myChart.setOption(option);
+ //闅忕潃灞忓箷澶у皬璋冭妭鍥捐〃
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+
+ }
+
+ },
+ initEcharts() {
+ let roseCharts = document.getElementsByClassName('echart')
+ for (let i = 0; i < roseCharts.length; i++) {
+ // 鍩烘湰鏌辩姸鍥�
+ console.log(i)
+ let myChart = echarts.init(roseCharts[i])
+ let option = {
+ xAxis: {
+ data: this.xData,
+ axisLabel: {
+ interval: 0,
+ formatter: ' {value}',//Y杞村乏渚ф枃瀛楃殑鍗犱綅
+ textStyle: {
+ fontSize: 15,
+ color: "#FFF" //Y杞存枃瀛楅鑹�
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#01FCE3'
+ }
+ },
+
+ },
+ // 鍥句緥
+ legend: {
+ data: [this.indexList[i].name],
+ top: "0%",
+ left: "5%",
+ textStyle: {//鍥句緥鏂囧瓧鐨勬牱寮�
+ color: '#25FCF2',
+ fontSize: 16
+ }
+ },
+ yAxis: {
+ axisLabel: {
+ interval: 0,
+ formatter: ' {value}',//Y杞村乏渚ф枃瀛楃殑鍗犱綅
+ textStyle: {
+ fontSize: 15,
+ color: "#FFF" //Y杞存枃瀛楅鑹�
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#01FCE3'
+ }
+ },
+
+ },
+
+ series: [
+ {
+ type: "bar", //褰㈢姸涓烘煴鐘跺浘
+ data: this.yData,
+ // 鍚岀郴鍒楁煴鏉℃牱寮�
+ itemStyle: {
+ barBorderRadius: 5,
+ borderWidth: 1,
+ borderType: "solid",
+ borderColor: "#73c0de",
+ shadowColor: "#5470c6",
+ shadowBlur: 3,
+ color: "#25FCF2"
+ },
+ name: this.indexList[i].name, // legend灞炴��
+ label: {
+ // 鏌辩姸鍥句笂鏂规枃鏈爣绛撅紝榛樿灞曠ず鏁板�间俊鎭�
+ show: true,
+ position: "top",
+ textStyle: {
+ fontSize: 13,
+ color: "#fff" //Y杞存枃瀛楅鑹�
+ }
+
+ }
+ }
+ ]
+ };
+ // const myChart = echarts.init(document.getElementById("mychart"));
+ myChart.setOption(option);
+ //闅忕潃灞忓箷澶у皬璋冭妭鍥捐〃
+ window.addEventListener("resize", () => {
+ myChart.resize();
+ });
+
+ }
+
+ }
+ }
}
</script>
-<style>
+<style lang="scss" scoped>
+.smoke-cockpit{
+ height: calc(100vh - 90px);
-</style>
\ No newline at end of file
+}
+.pagination{
+ line-height: normal;
+ text-align: right;
+}
+.smoke-cockpit ::v-deep .el-dialog__header{
+ color: #96D7ED!important;
+ background-color: #01242F!important;
+ span{
+ color: #96D7ED!important;
+ }
+}
+.smoke-cockpit ::v-deep .el-dialog__body{
+ overflow: auto;
+ background-color: #405E68;
+ padding: 10px;
+ .el-table__header{
+ line-height: normal;
+ }
+ // 鏇存敼琛ㄥご鑳屾櫙棰滆壊
+ .el-table thead tr>th{
+ background-color: #00191F;
+ color: #96D7ED;
+ }
+ // 鏇存敼琛ㄦ牸姣忚鑳屾櫙棰滆壊
+ .el-table tbody tr>td{
+ background-color: #00191F;
+ color: #96D7ED;
+ }
+}
+.smoke-title {
+ line-height: 60px;
+ font-size: 18px;
+ font-weight: 400;
+}
+
+.smoke-cockpit-body {
+ display: flex;
+ height: 93%;
+ .smoke-echarts-title {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .smoke-echarts {
+
+ background-color: #011E24;
+ height: 46%;
+ .echart {
+ height: 350px;
+ width: 350px;
+ }
+ }
+
+ }
+
+ .smoke-map {
+ flex: 2;
+ border: 1px solid black;
+ margin: 0 10px;
+ padding: 0 10px;
+ .smoke-map-title{
+ display: flex;
+ line-height: normal;
+ }
+ .Mymap {
+ height: 60%;
+ width: 100%;
+ margin: 7px 0;
+ position: relative;
+ .Mymap-foot{
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ right: 10px;
+ width: 270px;
+ height: 35px;
+ background-color: #01242F;
+ bottom: 10px;
+ line-height: 35px;
+ padding: 0 5px;
+ cursor: pointer;
+ span{
+ color: #80DFE8;
+ }
+ }
+ }
+ .smoke-echarts-foot-t{
+ display: flex;
+ justify-content: space-between;
+ .smoke-echarts-foot{
+ background-color: #011E24;
+ .echart-foot{
+ height: 200px;
+ width: 400px;
+ }
+ }
+ }
+ }
+
+ .smoke-information {
+ flex: 1;
+ border: 1px solid black;
+ overflow: auto;
+ line-height: normal;
+ .smoke-information-title{
+ line-height: 35px;
+ }
+ .smoke-information-ul{
+ border-bottom:1px solid black;
+ border-top:1px solid black;
+ list-style-type: none;
+ text-align: left;
+ margin-block-start: 0;
+ margin-block-end: 0;
+ li{
+ margin: 5px 0;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0