弹框内容修改

chenzeping

2021-04-09 6f4d139abf9f1932833dac0dfe4caab5ab520c1a

弹框内容修改

 package.json

@@ -16,7 +16,7 @@
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.9.6",
    "dayjs": "^1.10.4",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "esri-leaflet": "^3.0.1",

 src/api/mapApi.js

@@ -50,5 +50,8 @@
  },
  getCompany (data) {
    return axios.get(mapUrl.getCompany, data)
  },
  DataItems (data) {
    return axios.get(mapUrl.DataItems, data)
  }
}

 src/api/mapUrl.js

@@ -12,6 +12,7 @@

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const DataItems = $HOST + '/wasteWater/RTDB/DataItems'

export const getWasteWater = $HOST + '/wasteWater/getWasteWater'
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring'

 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue

New file
@@ -0,0 +1,196 @@
<template>
  <div style="width:100%;height:2rem;" ref="echarts"></div>
</template>

<script>

import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  data () {
    return {
      myChart: [],
      dataDate: [],
      value: '',
      seriesData: [],
      aseries: '',
      result: [],
      days: dayjs(new Date()).format('YYYYMMDDHHmmss')
    }
  },
  methods: {
    drawChart (result) {
      // const result = this.result
      this.myChart = this.$echarts.init(this.$refs.echarts)

      // setInterval(function () {
      // }, 3000)
      const option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: seriesData,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      this.myChart.setOption(option)
    },
    async echartsData () {
      const addDays = dayjs().add(300, 'day')
      const data = {
        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
        $startTime: this.dayjs,
        $endTime: addDays,
        $step: 15
      }
      const result = await mapApi.DataItems(data)
      this.result = result.data
    },
    // 数据的请求
    requestEcharts () {
      setInterval(async () => {
        const addDays = dayjs().add(300, 'day')
        const data = {
          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
          $startTime: this.dayjs,
          $endTime: addDays,
          $step: 15
        }
        const result = await mapApi.DataItems(data)
        this.result = result.data
        for (let i = 0; i < result.length; i++) {
          //   // console.log(result[i])

          const seriesData = []
          const aseries = []
          // let nameData = ''

          seriesData.push(result[i].ReadTime)
          aseries.push(result[i].TagValue)
          // nameData = result[i].UnionTagCode
          this.aseries = result[i].UnionTagCode
        }
        this.myChart.setOption({
          series: [{
            data: data
          }]
        })
      }, 3000)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.requestEcharts()
      this.drawChart()
    })
  }
}
</script>

<style scoped lang="less">
.Infomation {
  margin-left: 10px;
  height: 0.2rem;
}

.el-tag {
  height: 25px;
  width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  height: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue

@@ -46,10 +46,10 @@

.win {
  position: relative;
  margin-bottom: 13px;
  /*margin-bottom: 13px;*/
  background-color: rgba(33, 41, 69, 0.9);
  border: 0.8px solid #396d83;
  height: 1.5rem;
  /*height: 1.5rem;*/
}

.border_corner {

 src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue

@@ -27,11 +27,12 @@
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  //height: 2rem;
  width: 3rem;
}

.main {
  border: 1px solid #396d83;
  padding: 5px;
  //padding: 5px;
  height: 2rem;

  video {

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,5 +1,6 @@
<template>
  <div class="public-bounced" v-drag v-if="flag">
    <!--    <Echarts></Echarts>-->
    <div class="public-bounced-title">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
@@ -26,6 +27,8 @@

<script>

// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'

import '@/components/BaseNav/SolidWaste/directive/dir'
import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
@@ -35,6 +38,7 @@
export default {
  name: 'PublicBounced',
  components: {
    // Echarts
    PublicTabs,
    PublicTable,
    PublicChart,
@@ -93,16 +97,10 @@

<style lang="less" scoped>
.public-bounced {
  width: 8rem;
  //height: 2.6rem;
  //width: 70vw;
  //height: 30vh;
  z-index: 999;
  position: absolute;
  //bottom: 2rem;
  //left: 5rem;
  top: 15%;
  left: 15%;
  left: 20%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

@@ -129,17 +127,18 @@
  }

  .public-bounced-content {
    margin: 0.2rem auto !important;
    padding: 0.1rem;
    display: flex;
    //align-items: center;
    justify-content: space-around;
    //justify-content: space-around;

    .public-bounced-content-left {
      width: 4.8rem;
      //width: 4.8rem;
    }

    .public-bounced-content-right {
      width: 3rem;
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}