Merge branch 'dev1.0' of http://42.193.1.25:9521/r/sccg_ui into dev1.0

zhanghua

2023-11-10 67cc1463320874211a09fee5c1b3b1fecf6d5a7c

Merge branch 'dev1.0' of http://42.193.1.25:9521/r/sccg_ui into dev1.0

 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>
}
.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>

 vue.config.js

@@ -39,8 +39,8 @@
    proxy: {
      // 跨域配置
      "/sccg": {
        // target: `http://42.193.1.25/`,      //测试环境
        target: `http://127.0.0.1:8082/`,
        target: `http://42.193.1.25/`,      //测试环境
        // target: `http://127.0.0.1:8082/`,
        changeOrigin: true
      }
    },