1、新增站点数据页面
2、修改监测因子趋势显示bug
3、修改监测因子趋势和监测因子对比页面的时间控件
| | |
| | | "vue-amap": "^0.5.10", |
| | | "vue-amp": "^0.0.1", |
| | | "vue-baidu-map": "^0.21.22", |
| | | "vue-json-excel": "^0.3.0", |
| | | "vue-mapvgl": "^0.0.32", |
| | | "vue-router": "3.0.6", |
| | | "vuex": "3.1.0", |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| | | <link rel="icon" href="<%= BASE_URL %>LOGO.ico"> |
| | | <!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> --> |
| | | <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> --> |
| | | <script src="https://webapi.amap.com/maps?v=1.4.15&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> |
| | | <script src="https://webapi.amap.com/loca?v=1.3.2&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> |
| | | <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />--> |
| | | <!-- <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>--> |
| | | <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=U2SoSp52BoVW6bAEMsxQ7Zfe0tuB6VDp"></script> |
| | | <script src="http://api.map.baidu.com/api?v=3.0&ak=U2SoSp52BoVW6bAEMsxQ7Zfe0tuB6VDp"></script> |
| | | <script src="https://mapv.baidu.com/build/mapv.min.js"></script> |
| | | <script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script> |
| | | <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script> |
| | | <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.97/dist/mapvgl.min.js"></script> |
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --> |
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script> --> |
| | | |
| | | <title><%= webpackConfig.name %></title> |
| | | <style> |
| | | body { |
| | | margin: 0px; |
| | | padding: 0px; |
| | | height: 100%; |
| | | } |
| | | html { |
| | | overflow-y: hidden; |
| | | } |
| | | |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| | | <link rel="icon" href="<%= BASE_URL %>LOGO.ico"> |
| | | <!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> --> |
| | | <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> --> |
| | | <script |
| | | src="https://webapi.amap.com/maps?v=1.4.15&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> |
| | | <script |
| | | src="https://webapi.amap.com/loca?v=1.3.2&key=be57d4add7dc10fb7f7924763a2179ae&plugin=AMap.MarkerClusterer"></script> |
| | | <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />--> |
| | | <!-- <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>--> |
| | | <script type="text/javascript" |
| | | src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=U2SoSp52BoVW6bAEMsxQ7Zfe0tuB6VDp"></script> |
| | | <script src="http://api.map.baidu.com/api?v=3.0&ak=U2SoSp52BoVW6bAEMsxQ7Zfe0tuB6VDp"></script> |
| | | <script src="https://mapv.baidu.com/build/mapv.min.js"></script> |
| | | <script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script> |
| | | <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script> |
| | | <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.97/dist/mapvgl.min.js"></script> |
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --> |
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script> --> |
| | | |
| | | <title> |
| | | <%= webpackConfig.name %> |
| | | </title> |
| | | <style> |
| | | body { |
| | | margin: 0px; |
| | | padding: 0px; |
| | | height: 100%; |
| | | } |
| | | |
| | | html { |
| | | overflow-y: hidden; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <noscript> |
| | | <strong><%= webpackConfig.name %> 不支持无javaScript环境</strong> |
| | | </noscript> |
| | | <div id="app"></div> |
| | | </body> |
| | | </html> |
| | | </head> |
| | | |
| | | <body> |
| | | <noscript> |
| | | <strong> |
| | | <%= webpackConfig.name %> 不支持无javaScript环境 |
| | | </strong> |
| | | </noscript> |
| | | <div id="app"></div> |
| | | </body> |
| | | <script> |
| | | var docEl = document.documentElement, |
| | | //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时, |
| | | //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 |
| | | //总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值 |
| | | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', |
| | | recalc = function () { |
| | | //设置根字体大小1:50适用于375的设计稿,需要变更,就更改基础字体的数值 |
| | | docEl.style.fontSize = docEl.clientWidth / 100 + 'px'; |
| | | }; |
| | | window.addEventListener(resizeEvt, recalc, false); |
| | | document.addEventListener('DOMContentLoaded', recalc, false); |
| | | </script> |
| | | |
| | | </html> |
| | |
| | | <template> |
| | | <!-- <div> --> |
| | | <!-- <div>1111111111111111111111111111111111111111</div> --> |
| | | <div :class="className" :style="{height:height,width:width}" /> |
| | | <!-- </div> --> |
| | | <div :class="className" :style="{ height: height, width: width }" /> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | props: { |
| | | className: { |
| | | type: String, |
| | | default: 'chart' |
| | | default: 'chart', |
| | | }, |
| | | width: { |
| | | type: String, |
| | | default: '100%' |
| | | default: '100%', |
| | | }, |
| | | height: { |
| | | type: String, |
| | | default: '350px' |
| | | default: '350px', |
| | | }, |
| | | autoResize: { |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | chartData: { |
| | | type: Object, |
| | | required: true |
| | | required: true, |
| | | }, |
| | | interval: { |
| | | type: Number, |
| | | default: 1 |
| | | } |
| | | default: 1, |
| | | }, |
| | | // xdata: { |
| | | // type: Array, |
| | | // required: true |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | chart: null |
| | | chart: null, |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | deep: true, |
| | | handler(val) { |
| | | this.setOptions(val) |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | // xdata: { |
| | | // deep: true, |
| | | // handler(val) { |
| | |
| | | // } |
| | | }, |
| | | mounted() { |
| | | // this.$nextTick(() => { |
| | | // this.initChart() |
| | | // }) |
| | | this.initChart() |
| | | this.$nextTick(() => { |
| | | this.initChart() |
| | | }) |
| | | }, |
| | | beforeDestroy() { |
| | | if (!this.chart) { |
| | |
| | | this.chart = null |
| | | }, |
| | | methods: { |
| | | |
| | | initChart() { |
| | | this.chart = echarts.init(this.$el, 'macarons') |
| | | this.setOptions(this.chartData) |
| | | }, |
| | | setOptions(val) { |
| | | function fontSize(res){ |
| | | let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; |
| | | if (!clientWidth) return; |
| | | let fontSize = 100 * (clientWidth / 1920); |
| | | return res*fontSize; |
| | | } |
| | | |
| | | // console.log('组件设置的数据') |
| | | // console.log(val) |
| | | this.chart.setOption({ |
| | | title: { |
| | | text: val.text, |
| | | textStyle: { |
| | | color: '#000000' |
| | | } |
| | | }, |
| | | xAxis: { |
| | | data: val.xAxis, |
| | | boundaryGap: false, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | // axisTick: { // 决定是否显示坐标刻度 |
| | | // alignWithLabel: true, |
| | | // show: true |
| | | // }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#000000' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | interval: this.interval |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | | right: '5%', |
| | | bottom: '20%', |
| | | top: '10%', |
| | | containLabel: true, |
| | | x: 120 |
| | | }, |
| | | toolbox: { |
| | | feature: { |
| | | dataZoom: { |
| | | yAxisIndex: 'none' |
| | | console.log(val) |
| | | this.chart.setOption( |
| | | { |
| | | title: { |
| | | text: val.text, |
| | | textStyle: { |
| | | color: '#000000', |
| | | }, |
| | | restore: {}, |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | position: function(pt) { |
| | | return [pt[0], '10%'] |
| | | } |
| | | }, |
| | | // tooltip: { |
| | | // trigger: 'axis', |
| | | // axisPointer: { |
| | | // type: 'cross' |
| | | // }, |
| | | // padding: [5, 10] |
| | | // }, |
| | | yAxis: { |
| | | axisTick: { |
| | | show: false // 轴线刻度 |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#000000' |
| | | } |
| | | } |
| | | xAxis: { |
| | | data: val.xAxis.slice(0, 24), |
| | | boundaryGap: false, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | // axisTick: { // 决定是否显示坐标刻度 |
| | | // alignWithLabel: true, |
| | | // show: true |
| | | // }, |
| | | // axisLine: { |
| | | // lineStyle: { |
| | | // color: '#000000' |
| | | // } |
| | | // }, |
| | | // axisLabel: { |
| | | // interval: this.interval |
| | | // } |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | | right: '5%', |
| | | top:'5%', |
| | | containLabel: true, |
| | | height:fontSize(3.3), |
| | | }, |
| | | toolbox: { |
| | | feature: { |
| | | dataZoom: { |
| | | yAxisIndex: 'none', |
| | | }, |
| | | restore: {}, |
| | | saveAsImage: {}, |
| | | }, |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | position: function (pt) { |
| | | return [pt[0], '10%'] |
| | | }, |
| | | }, |
| | | // tooltip: { |
| | | // trigger: 'axis', |
| | | // axisPointer: { |
| | | // type: 'cross' |
| | | // }, |
| | | // padding: [5, 10] |
| | | // }, |
| | | yAxis: { |
| | | axisTick: { |
| | | show: false, // 轴线刻度 |
| | | }, |
| | | // axisLine: { |
| | | // lineStyle: { |
| | | // color: '#000000' |
| | | // } |
| | | // } |
| | | }, |
| | | legend: { |
| | | data: val.title, |
| | | tooltip: { |
| | | show: true, |
| | | }, |
| | | textStyle:{ |
| | | fontSize:fontSize(0.12) |
| | | }, |
| | | widht:'auto', |
| | | height:'auto', |
| | | top: fontSize(4.6), |
| | | }, |
| | | dataZoom: [ |
| | | { |
| | | type: 'inside', |
| | | start: 0, |
| | | end: 100, |
| | | }, |
| | | { |
| | | start: 0, |
| | | end: 20, |
| | | bottom: fontSize(4.4), |
| | | height: fontSize(0.5), |
| | | }, |
| | | ], |
| | | series: val.series, |
| | | // [{ |
| | | // name: JSON.parse(JSON.stringify(val.title)), |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: '#7AC5CD', |
| | | // lineStyle: { |
| | | // color: '#7AC5CD', |
| | | // width: 2 |
| | | // } |
| | | // } |
| | | // }, |
| | | // smooth: true, |
| | | // type: 'line', |
| | | // data: val.series, |
| | | // animationDuration: 2800, |
| | | // animationEasing: 'cubicInOut', |
| | | // areaStyle: {}, |
| | | // label: { |
| | | // normal: { |
| | | // show: true, |
| | | // position: 'top' |
| | | // } |
| | | // } |
| | | // }] |
| | | }, |
| | | legend: { |
| | | data: val.title |
| | | }, |
| | | // dataZoom: [{ |
| | | // type: 'inside', |
| | | // start: 0, |
| | | // end: 100 |
| | | // }, { |
| | | // start: 0, |
| | | // end: 10 |
| | | // }], |
| | | series: val.series |
| | | // [{ |
| | | // name: JSON.parse(JSON.stringify(val.title)), |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: '#7AC5CD', |
| | | // lineStyle: { |
| | | // color: '#7AC5CD', |
| | | // width: 2 |
| | | // } |
| | | // } |
| | | // }, |
| | | // smooth: true, |
| | | // type: 'line', |
| | | // data: val.series, |
| | | // animationDuration: 2800, |
| | | // animationEasing: 'cubicInOut', |
| | | // areaStyle: {}, |
| | | // label: { |
| | | // normal: { |
| | | // show: true, |
| | | // position: 'top' |
| | | // } |
| | | // } |
| | | // }] |
| | | }, true) |
| | | } |
| | | } |
| | | true |
| | | ) |
| | | window.onresize = this.chart.resize; |
| | | }, |
| | | }, |
| | | } |
| | | </script> |
| | |
| | | this.setOptions(this.chartData) |
| | | }, |
| | | setOptions(val) { |
| | | console.log(val); |
| | | this.chart.setOption({ |
| | | xAxis: { |
| | | data: val.xAxis, |
| | |
| | | <template> |
| | | <el-date-picker |
| | | <el-time-picker |
| | | is-range |
| | | v-model="value1" |
| | | type="dates" |
| | | placeholder="选择日期" |
| | | value-format="yyyy-MM-dd" |
| | | /> |
| | | range-separator="至" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | placeholder="选择时间范围" |
| | | size="inputSize" |
| | | value-format="yyyy-MM-dd HH" |
| | | > |
| | | </el-time-picker> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | |
| | | |
| | | </style> |
| | |
| | | <template> |
| | | <el-date-picker |
| | | <!-- <el-date-picker |
| | | v-model="value1" |
| | | type="month" |
| | | placeholder="选择月" |
| | | value-format="yyyy-MM" |
| | | /> |
| | | /> --> |
| | | <el-date-picker |
| | | v-model="value1" |
| | | type="monthrange" |
| | | range-separator="至" |
| | | start-placeholder="开始月份" |
| | | value-format="yyyy-MM-DD" |
| | | end-placeholder="结束月份"> |
| | | </el-date-picker> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | <template> |
| | | <el-date-picker |
| | | <!-- <el-date-picker |
| | | v-model="value1" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | value-format="yyyy-MM-dd" |
| | | /> |
| | | /> --> |
| | | <el-date-picker |
| | | v-model="value1" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | value-format="yyyy-MM-dd HH" |
| | | end-placeholder="结束日期" |
| | | :picker-options="pickerOptions" |
| | | > |
| | | </el-date-picker> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | // 例如:import《组件名称》from'《组件路径》'; |
| | | |
| | | export default { |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | components: {}, |
| | | props: { |
| | | // value1: String |
| | |
| | | // 这里存放数据 |
| | | return { |
| | | // newValue1: '' |
| | | value1: '' |
| | | value1: '', |
| | | timeOne: '', |
| | | pickerOptions: { |
| | | onPick: ({ maxDate, minDate }) => { |
| | | // 最大时间 最小时间 |
| | | this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期 |
| | | // // 如何你选择了两个日期了,就把那个变量置空 |
| | | if (maxDate) this.timeOne = '' |
| | | }, |
| | | disabledDate: time => { |
| | | if (this.timeOne) { |
| | | const WEEK = 6 * 24 * 3600 * 1000 // 这里乘以6相当于 限制7天以内 |
| | | const minTime = this.timeOne // 七天之前 |
| | | const maxTime = this.timeOne + WEEK // 七天之后 |
| | | return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date() |
| | | } else { |
| | | return time.getTime() > new Date() |
| | | } |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | // 计算属性 类似于data概念 |
| | |
| | | value1(nv, ov) { |
| | | // this.newValue1 = nv |
| | | this.sendPicker() |
| | | } |
| | | }, |
| | | }, |
| | | // 生命周期 - 创建完成(可以访问当前 this 实例) |
| | | created() { |
| | | |
| | | }, |
| | | created() {}, |
| | | // 生命周期 - 挂载完成(可以访问 DOM 元素) |
| | | mounted() { |
| | | mounted() {}, |
| | | |
| | | }, |
| | | beforeCreate() {}, // 生命周期 - 创建之前 |
| | | beforeMount() {}, // 生命周期 - 挂载之前 |
| | | beforeUpdate() {}, // 生命周期 - 更新之前 |
| | |
| | | methods: { |
| | | sendPicker() { |
| | | this.$emit('sendPickerChild', this.value1) |
| | | } |
| | | } // 如果页面有keep-alive缓存功能,这个函数会触发 |
| | | }, |
| | | }, // 如果页面有keep-alive缓存功能,这个函数会触发 |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | |
| | | </style> |
| | |
| | | <template> |
| | | <el-date-picker |
| | | <!-- <el-date-picker |
| | | v-model="value1" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | value-format="yyyy-MM-dd" |
| | | /> |
| | | /> --> |
| | | <el-time-picker |
| | | is-range |
| | | v-model="value1" |
| | | range-separator="至" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | placeholder="选择时间范围" |
| | | size="inputSize" |
| | | value-format="yyyy-MM-dd HH" |
| | | > |
| | | </el-time-picker> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | |
| | | Vue.prototype.$request = request.service |
| | | Vue.prototype.$axiosRequest = request.reqServe |
| | | // Vue.prototype.$postRequest=request.reqServe1 |
| | | /** |
| | | * If you don't want to use mock-server |
| | | * you want to use MockJs for mock api |
| | |
| | | Vue.config.productionTip = false |
| | | Vue.prototype.$axios = axios |
| | | Vue.prototype.$Bus = Bus |
| | | |
| | | import JsonExcel from 'vue-json-excel' |
| | | Vue.component('downloadExcel', JsonExcel) |
| | | |
| | | function getServerConfig() { |
| | | return new Promise((resolve, reject) => { |
| | |
| | | }).$mount('#app') |
| | | } |
| | | |
| | | Vue.prototype.dateTypeFormat = function (fmt, date) { |
| | | let ret |
| | | const opt = { |
| | | 'Y+': date.getFullYear().toString(), // 年 |
| | | 'm+': (date.getMonth() + 1).toString(), // 月 |
| | | 'd+': date.getDate().toString(), // 日 |
| | | 'H+': date.getHours().toString(), // 时 |
| | | 'M+': date.getMinutes().toString(), // 分 |
| | | 'S+': date.getSeconds().toString() // 秒 |
| | | // 有其他格式化字符需求可以继续添加,必须转化成字符串 |
| | | } |
| | | for (const k in opt) { |
| | | ret = new RegExp('(' + k + ')').exec(fmt) |
| | | if (ret) { |
| | | fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0'))) |
| | | } |
| | | } |
| | | return fmt |
| | | } |
| | | |
| | | |
| | | init() |
| | |
| | | const averageContrast = { |
| | | path: 'charts/averageContrast', |
| | | name: 'averageContrast', |
| | | component: () => import('@/views/averageContrast/index'), |
| | | component: () => import('@/views/averageContrast/index'), |
| | | meta: { title: '监测因子均值对比', icon: 'example' } |
| | | } |
| | | |
| | |
| | | component: () => import('@/views/airQualityReportDisplay/index'), |
| | | meta: { title: '空气质量小时播报', icon: 'example' } |
| | | } |
| | | const Monitoringstation = { |
| | | path: 'report/Monitoringstation', |
| | | name: 'Monitoringstation', |
| | | component: () => import('@/views/Monitoringstation/index'), |
| | | meta: { title: '监测站点数据', icon: 'example' } |
| | | } |
| | | const Equipment = { |
| | | path: 'report/Equipment', |
| | | name: 'Equipment', |
| | | component: () => import('@/views/Equipment/index'), |
| | | meta: { title: '设备数据', icon: 'example' } |
| | | } |
| | | // 综合分析 |
| | | // 城市空气质量排行 |
| | | const cityAirRank = { |
| | | const cityAirRank = { |
| | | path: 'analyse/cityAirRank', |
| | | name: 'cityAirRank', |
| | | component: () => import('@/views/cityAirRank/index'), |
| | |
| | | meta: { title: '空气质量报告', icon: 'example' } |
| | | } |
| | | |
| | | |
| | | |
| | | // 映射路由,存入对象 |
| | | const ruleMapping = { |
| | | wind: wind, |
| | |
| | | cityAirYoyContrast: cityAirYoyContrast, |
| | | surveyReport, |
| | | air, |
| | | airQualityReportDisplay |
| | | airQualityReportDisplay, |
| | | Monitoringstation, |
| | | Equipment |
| | | } |
| | | |
| | | // 网络请求,第一次登陆只有4个路由,所以要添加路由,页面刷新的时候,判断大于4个路由,就不会重新添加。 |
| | |
| | | import store from '@/store' |
| | | import { getToken } from '@/utils/auth' |
| | | |
| | | const baseUrl = 'http://47.99.64.149:8081/' |
| | | // const baseUrl = 'http://47.99.64.149:8081/' |
| | | const baseUrl = 'http://192.168.0.42:8081/' |
| | | |
| | | // const baseUrl = 'http://192.168.0.33:8081/' // yy |
| | | // const baseUrl = 'http://192.168.0.25:8081' // jj |
| | | // const baseUrl = 'http://192.168.0.33:8085/' // swb |
| | | // const baseUrl = 'http://121.43.179.139:8080' |
| | | // create an axios instance |
| | | // create an axios instance |
| | | const service = axios.create({ |
| | | // baseURL: 'http://47.99.64.149:8080/screen_api_v2/', // url = base url + request url |
| | | baseURL: baseUrl, |
| | |
| | | timeout: 50000 // request timeout |
| | | }) |
| | | const reqServe = axios.create({ baseurl: 'http://121.43.179.139:8080', timeout: '5000' }) |
| | | // const reqServe1 = axios.create({ baseurl: 'http://192.168.55.1:8081', timeout: '5000' }) |
| | | |
| | | // instance1这里用到的参数有 baseurl,timeout,method,url instance1.get('/userinfo').then(res=>{ console.log(res) }) //instance2这里用到的参数有 baseurl,timeout,method,url,params,并且对timeout进行了修改 instance1.get('/orderlist',{ timeout:'5000' params:{} }).then(res=>{ console.log(res) }) |
| | | // 请求拦截器 |
| | | service.interceptors.request.use( |
| | |
| | | <el-radio-button label="日报" /> |
| | | <el-radio-button label="月报" /> |
| | | </el-radio-group> --> |
| | | <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
| | | <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
| | | <!--查询按钮--> |
| | | <el-button @click="selectData" class="btn1">查询</el-button> |
| | | </div> |
| | |
| | | import DatePicker from '@/components/Form/DatePicker' |
| | | import MouthPicker from '@/components/Form/MouthPicker' |
| | | import HourPicker from '@/components/Form/HourPicker' |
| | | import HourPicker2 from '@/components/Form/HourPicker2' |
| | | |
| | | import CustomPicker from '@/components/Form/CustomPicker' |
| | | import json from '@/assets/json/sensor.json' |
| | | |
| | |
| | | DatePicker, |
| | | MouthPicker, |
| | | HourPicker, |
| | | CustomPicker |
| | | HourPicker2, |
| | | CustomPicker, |
| | | }, |
| | | filters: { |
| | | sensorFilter: function(value) { |
| | |
| | | data() { |
| | | // 这里存放数据 |
| | | return { |
| | | dataType: 'HourPicker', |
| | | dataType: 'HourPicker2', |
| | | lineChartData: lineChartData.purchases, |
| | | props: { multiple: true }, |
| | | options: [], |
| | |
| | | // newMac2:'', |
| | | newSensor: [], |
| | | radio1: '日报', |
| | | unit: 1, |
| | | unit: 0, |
| | | type: 'select', |
| | | newLineChartData: { |
| | | series: [], |
| | |
| | | }, |
| | | radio1(nv, ov) { |
| | | if (nv === '日报') { |
| | | this.dataType = 'HourPicker' |
| | | this.dataType = 'HourPicker2' |
| | | this.unit = 1 |
| | | } else if (nv === '月报') { |
| | | this.dataType = 'DatePicker' |
| | | this.dataType = 'MouthPicker2' |
| | | this.unit = 3 |
| | | } |
| | | } |
| | |
| | | } |
| | | this.lineChartData = newLineChartData |
| | | }).catch((err) => { |
| | | console.log(err) |
| | | console.log(err); |
| | | }) |
| | | }, |
| | | // 获得子组件时间选择器传递的数据 |
| | |
| | | return value2 - value1 |
| | | } |
| | | } |
| | | |
| | | }, |
| | | // 过滤图表因子名称 |
| | | filterSensorName() { |
| | |
| | | } |
| | | // timeValue: { |
| | | // handler(newVal, oldVal) { |
| | | // console.log('时间是', this.timeValue, '日期是', this.sensorDate) |
| | | // this.sensorTime = this.newTime() |
| | | // console.log(this.sensorTime, 'this.sensorTime') |
| | | // // if (this.dataValue && this.timeValue) { |
| | |
| | | }, |
| | | // 数据类型 |
| | | dateChange(e) { |
| | | this.sensorDate = e |
| | | this.sensorDate = e; |
| | | // if (this.view) { |
| | | // this.view.removeAllLayers() |
| | | // this.map.clearOverlays() |
| | |
| | | var lon = parseFloat(JSON.parse(msg.data).flylon) |
| | | if (that.msgTemp.length < 2) { |
| | | that.msgTemp.push({ lat: lat, lon: lon }) |
| | | } |
| | | } |
| | | var distance = that.GetDistance(that.msgTemp[0].lat, that.msgTemp[0].lon, that.msgTemp[1].lat, that.msgTemp[1].lon) |
| | | if (distance >= 0.05) { |
| | | that.msgTemp.shift() |
| | |
| | | that.msgTemp.pop() |
| | | } |
| | | } |
| | | |
| | | }, |
| | | // 走航车轨迹数据 |
| | | getStart() { |
| | |
| | | time2 |
| | | } |
| | | }).then(res => { |
| | | console.log(res); |
| | | if (!res.data.length) { |
| | | this.noneData = true |
| | | this.loading = false |
| | |
| | | lat = GPS.gcj_encrypt(lat, lng).lat |
| | | lng = GPS.bd_encrypt(lat, lng).lon |
| | | lat = GPS.bd_encrypt(lat, lng).lat |
| | | var point = new BMapGL.Point(lng, lat) |
| | | var point = new BMapGL.Point(lng, lat); |
| | | point.a34004 = parseInt(value.a34004) |
| | | point.a34002 = parseInt(value.a34002) |
| | | point.a21026 = parseInt(value.a21026) |
| | | point.a21004 = parseInt(value.a21004) |
| | | // point.a21005 = parseInt(value.a21005) |
| | | point.a21005 = parseFloat(value.a21005).toFixed(3) |
| | | point.a05024 = parseInt(value.a05024) |
| | | point.a99054 = parseFloat(value.a99054).toFixed(3) |
| | |
| | | that.mapZoom = that.viewport.zoom |
| | | that.centerPoint = that.viewport.center |
| | | if (that.firstPlayFlag) { |
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
| | | that.view = new mapvgl.View({ |
| | | map: that.map |
| | | }) |
| | |
| | | var levels = getGrading(sensor, type) |
| | | $.each(levels, function(index, value) { |
| | | var color = value.color |
| | | var data = value.data |
| | | var data = value.data |
| | | if (data.length > 0) { |
| | | // 创建MapVGL图层管理器,需要使用插件mapvgl |
| | | that.shapeLayer = new mapvgl.ShapeLayer({ |
| | | color: color, // 柱状图颜色 |
| | | enablePicked: true, // 是否可以拾取 |
| | | selectedIndex: -1, // 选中项 |
| | | selectedColor: '#ee1111', // 选中项颜色 |
| | | selectedColor: '#ee1111', // 选中项颜色 |
| | | autoSelect: true, // 根据鼠标位置来自动设置选中项 |
| | | riseTime: 1800 // 楼块初始化升起时间 |
| | | }) |
| | |
| | | var sw = getPoint(225, point.lng, point.lat, that.distance) |
| | | var ne = getPoint(45, point.lng, point.lat, that.distance) |
| | | var data = point[sensor] |
| | | // 根据因子浓度变换方块颜色 |
| | | // 根据因子浓度变换方块颜色 |
| | | color = getColorAndLevel(sensor, data).color |
| | | var polygon = new BMapGL.Polygon([ |
| | | new BMapGL.Point(sw.lng, sw.lat), // 左下角 |
| | |
| | | var points = [] |
| | | $.each(trackPoints, function(index, value) { |
| | | var point = [] |
| | | point.push(value['lng'], value['lat']) |
| | | point.push(value['lng'],value['lat']) |
| | | points.push(point) |
| | | }) |
| | | data.push({ |
| | |
| | | }) |
| | | var lineLayer = new mapvgl.LineLayer({ |
| | | color: 'red', |
| | | width: 3, |
| | | width: 3, |
| | | animation: true, |
| | | duration: 10, // 循环时间2s |
| | | trailLength: 0.1, // 拖尾长度占间隔的0.4 |
| | |
| | | <template> |
| | | <div style="width:100%"> |
| | | <div style="width: 100%;height:100%"> |
| | | <div class="topSelect"> |
| | | <!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="选择设备" /> --> |
| | | <el-cascader |
| | |
| | | collapse-tags |
| | | clearable |
| | | placeholder="选择设备" |
| | | style="width: 354px;" |
| | | style="width: 354px" |
| | | /> |
| | | <!-- <div> --> |
| | | <el-select v-model="value" placeholder="选择因子" style="margin-left:20px"> |
| | | <el-select |
| | | v-model="value" |
| | | placeholder="选择因子" |
| | | style="margin-left: 20px" |
| | | > |
| | | <el-option |
| | | v-for="item in newSensor" |
| | | :key="item.value" |
| | |
| | | /> |
| | | </el-select> |
| | | <!-- </div> --> |
| | | <el-radio-group v-model="radio1" style="margin-left:20px"> |
| | | <!-- <el-radio-group v-model="radio1" style="margin-left:20px"> |
| | | <el-radio-button label="小时报" /> |
| | | <el-radio-button label="日报" /> |
| | | <el-radio-button label="月报" /> |
| | | <el-radio-button label="自定义" /> |
| | | </el-radio-group> |
| | | <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
| | | </el-radio-group> --> |
| | | <el-select |
| | | v-model="select1" |
| | | placeholder="请选择" |
| | | style="margin-left: 20px; width: 200px" |
| | | > |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <component |
| | | :is="dataType" |
| | | style="padding-left: 0; margin-left: 20px; width: 160px" |
| | | @sendPickerChild="showPickerChild" |
| | | class="select11" |
| | | /> |
| | | <!--查询按钮--> |
| | | <el-button @click="selectData" class="btn1">查询</el-button> |
| | | </div> |
| | | <div class="topTitle"> |
| | | <div style="position:absolute">(单位:ug/m³)</div> |
| | | <div style="position: absolute">{{ selectyz }}</div> |
| | | <!-- <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div> --> |
| | | </div> |
| | | <LineChart :chart-data="lineChartData" /> |
| | | <LineChart :chart-data="lineChartData" style="height: 45rem" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import DatePicker from '@/components/Form/DatePicker' |
| | | import MouthPicker from '@/components/Form/MouthPicker' |
| | | import HourPicker from '@/components/Form/HourPicker' |
| | | import HourPicker1 from '@/components/Form/HourPicker1' |
| | | import CustomPicker from '@/components/Form/CustomPicker' |
| | | import CustomPicker1 from '@/components/Form/CustomPicker1' |
| | | import TimePicker1 from '@/components/Form/TimePicker1' |
| | | import json from '@/assets/json/sensor.json' |
| | | |
| | | const lineChartData = { |
| | | newVisitis: { |
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
| | | actualData: [120, 82, 91, 154, 162, 140, 145], |
| | | }, |
| | | messages: { |
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
| | | actualData: [180, 160, 151, 106, 145, 150, 130], |
| | | }, |
| | | purchases: { |
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
| | | actualData: [120, 90, 100, 138, 142, 130, 130], |
| | | }, |
| | | shoppings: { |
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
| | | } |
| | | actualData: [120, 82, 91, 154, 162, 140, 130], |
| | | }, |
| | | } |
| | | export default { |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | | LineChart, |
| | | DatePicker, |
| | | MouthPicker, |
| | | HourPicker, |
| | | CustomPicker |
| | | CustomPicker, |
| | | CustomPicker1, |
| | | TimePicker1, |
| | | HourPicker1, |
| | | }, |
| | | filters: { |
| | | sensorFilter: function(value) { |
| | | sensorFilter: function (value) { |
| | | if (!value) return '' |
| | | return json[value] |
| | | } |
| | | }, |
| | | }, |
| | | props: { |
| | | // defaultData: Array |
| | |
| | | props: { multiple: true }, |
| | | options: [], |
| | | value: '', |
| | | // value1: '', |
| | | select1: '日报', |
| | | selectyz: '(单位:ug/m³)', |
| | | newMac: '', |
| | | newMac1: [], |
| | | // newMac2:'', |
| | | newSensor: [], /* 因子数组 */ |
| | | newSensor: [] /* 因子数组 */, |
| | | radio1: '日报', |
| | | unit: 'hour', |
| | | unit: 'day', |
| | | type: 'select', |
| | | newLineChartData: { |
| | | series: [], |
| | | xAxis: [], |
| | | title: '' |
| | | title: '', |
| | | }, |
| | | newData: '', |
| | | defaultData: [], |
| | | medium: '', |
| | | isSelect: false |
| | | isSelect: false, |
| | | options1: [ |
| | | { |
| | | label: '小时报', |
| | | value: '小时报', |
| | | }, |
| | | { |
| | | label: '日报', |
| | | value: '日报', |
| | | }, |
| | | { |
| | | label: '月报', |
| | | value: '月报', |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | // 计算属性 类似于data概念 |
| | |
| | | } |
| | | // 设备更新后,重新获取因子数据 |
| | | this.getSensor() |
| | | console.log(this.newMac1) |
| | | }, |
| | | // 监听dataType的数据更新 |
| | | radio1(nv, ov) { |
| | | select1(nv, ov) { |
| | | if (nv === '日报') { |
| | | this.dataType = 'HourPicker' |
| | | this.unit = 'hour' |
| | | this.unit = 'day' |
| | | } else if (nv === '月报') { |
| | | this.dataType = 'DatePicker' |
| | | this.unit = 'day' |
| | | this.unit = 'month' |
| | | } else if (nv === '年报') { |
| | | this.dataType = 'MouthPicker' |
| | | this.unit = 'month' |
| | | } else if (nv === '小时报') { |
| | | this.dataType = 'HourPicker1' |
| | | this.unit = 'hour' |
| | | } else { |
| | | this.dataType = 'CustomPicker' |
| | | this.unit = 'hour' |
| | | } |
| | | } |
| | | }, |
| | | value(one, two) { |
| | | if ( |
| | | one === 'a34004' || |
| | | one === 'a34002' || |
| | | one === 'a21004' || |
| | | one === 'a21026' || |
| | | one === 'a05024' || |
| | | one === 'a21001' |
| | | ) { |
| | | this.selectyz = '(单位:ug/m³)' |
| | | } else if ( |
| | | one === 'a21005' || |
| | | one === 'a99054' || |
| | | one === 'a31001' || |
| | | one === 'a24088' |
| | | ) { |
| | | this.selectyz = '(单位:mg/m³)' |
| | | } else if (one === 'a01001') { |
| | | this.selectyz = '(单位:℃)' |
| | | } else if (one === 'a01002') { |
| | | this.selectyz = '(单位:%)' |
| | | } else if (one === 'a01007') { |
| | | this.selectyz = '(单位:m/s)' |
| | | } else if (one === 'a01008') { |
| | | this.selectyz = '(单位:。)' |
| | | } else if (one === 'a01006') { |
| | | this.selectyz = '(单位:hpa)' |
| | | } else if (one === 'a00e12') { |
| | | this.selectyz = '(单位:lux)' |
| | | } else if (one === 'a19002') { |
| | | this.selectyz = '(单位:无)' |
| | | } else if (one === 'a00e03' || one === 'a00e04') { |
| | | this.selectyz = '(单位:pcs/0.1L)' |
| | | } else if (one === 'a00e13') { |
| | | this.selectyz = '(单位:db)' |
| | | } else if (one === 'a21028') { |
| | | this.selectyz = '(单位:ppm)' |
| | | } |
| | | }, |
| | | }, |
| | | // 生命周期 - 创建完成(可以访问当前 this 实例) |
| | | created() { |
| | |
| | | var newLineChartData = { |
| | | series: [], |
| | | xAxis: [], |
| | | title: [] |
| | | title: [], |
| | | } |
| | | this.newXData = [] |
| | | this.$request({ |
| | |
| | | sensorCode: this.value, |
| | | type: this.unit, |
| | | // times: data instanceof Array ? data : [data] |
| | | times: this.newData instanceof Array ? this.newData : [this.newData] |
| | | } |
| | | }).then((res) => { |
| | | // console.log('获得时间对应因子数据') |
| | | // console.log(res) |
| | | const data = res.data |
| | | let lockLength = 0 |
| | | for (let i = 0; i < data.length; i++) { |
| | | for (let j = 0; j < data[i].deviceData.length; j++) { |
| | | if (lockLength < data[i].deviceData.length) { |
| | | newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
| | | newLineChartData.series[j].name = data[i].deviceData[j].name |
| | | newLineChartData.title.push(data[i].deviceData[j].name) |
| | | } |
| | | lockLength++ |
| | | newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue) |
| | | } |
| | | newLineChartData.xAxis.push(data[i].time) |
| | | } |
| | | // newLineChartData.title = this.value |
| | | this.lineChartData = newLineChartData |
| | | // console.log(newLineChartData, 'newLineChartData') |
| | | }).catch((err) => { |
| | | console.log(err) |
| | | times: this.newData instanceof Array ? this.newData : [this.newData], |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | // console.log('获得时间对应因子数据') |
| | | console.log(res) |
| | | const data = res.data |
| | | let lockLength = 0 |
| | | for (let i = 0; i < data.length; i++) { |
| | | for (let j = 0; j < data[i].deviceData.length; j++) { |
| | | if(res.data[0].deviceData.length==1){ |
| | | if (lockLength < data[i].deviceData.length) { |
| | | newLineChartData.series.push({ |
| | | data: [], |
| | | name: '', |
| | | type: 'line', |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | }, |
| | | }) |
| | | } |
| | | } |
| | | else if (lockLength < data[i].deviceData.length) { |
| | | newLineChartData.series.push({ |
| | | data: [], |
| | | name: '', |
| | | type: 'line', |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | | }, |
| | | }) |
| | | newLineChartData.series[j].name = data[i].deviceData[j].name |
| | | newLineChartData.title.push(data[i].deviceData[j].name) |
| | | } |
| | | lockLength++ |
| | | newLineChartData.series[j].data.push( |
| | | data[i].deviceData[j].sensorValue |
| | | ) |
| | | } |
| | | |
| | | |
| | | newLineChartData.xAxis.push(data[i].time) |
| | | } |
| | | // newLineChartData.title = this.value |
| | | this.lineChartData = newLineChartData |
| | | // console.log(newLineChartData, 'newLineChartData') |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | // 请求左侧设备数据 |
| | | getData() { |
| | |
| | | url: '/monitorPoint/queryMonitorPoints', |
| | | method: 'get', |
| | | params: { |
| | | organizationId: this.$store.state.orgId |
| | | } |
| | | organizationId: this.$store.state.orgId, |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | // console.log('这是index页面左侧设备数据') |
| | | // console.log(res) |
| | | this.defaultData = res.data.monitorPoints |
| | | for (let i = 0; i < this.defaultData.length; i++) { |
| | | this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name }) |
| | | this.options.push({ |
| | | value: this.defaultData[i].name, |
| | | label: this.defaultData[i].name, |
| | | }) |
| | | this.options[i].children = [] |
| | | if (this.defaultData[i].devices) { |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ value: [this.defaultData[i].devices[j].name, this.defaultData[i].devices[j].mac], label: this.defaultData[i].devices[j].name }) |
| | | } |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ |
| | | value: [ |
| | | this.defaultData[i].devices[j].name, |
| | | this.defaultData[i].devices[j].mac, |
| | | ], |
| | | label: this.defaultData[i].devices[j].name, |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | |
| | | url: '/deviceInfo/getMacSensors', |
| | | method: 'post', |
| | | data: { |
| | | macs: this.newMac1 |
| | | } |
| | | }).then((result) => { |
| | | // console.log(result) |
| | | // this.newSensor = [] |
| | | var sensor = result.data |
| | | for (var i in sensor) { |
| | | this.newSensor.push({ value: i, label: sensor[i] }) |
| | | // this.newSensor[i].value = sensor.i |
| | | // this.newSensor[i].name = sensor[i] |
| | | } |
| | | }).catch((err) => { |
| | | console.log(err) |
| | | macs: this.newMac1, |
| | | }, |
| | | }) |
| | | .then((result) => { |
| | | // console.log(result) |
| | | // this.newSensor = [] |
| | | var sensor = result.data |
| | | for (var i in sensor) { |
| | | this.newSensor.push({ value: i, label: sensor[i] }) |
| | | // this.newSensor[i].value = sensor.i |
| | | // this.newSensor[i].name = sensor[i] |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | // 获得子组件时间选择器传递的数据 |
| | | showPickerChild(data) { |
| | | // console.log(data) |
| | | // var newLineChartData = { |
| | | // series: [], |
| | | // xAxis: [], |
| | | // title: [] |
| | | // } |
| | | this.newData = data |
| | | // this.newXData = [] |
| | | // this.$request({ |
| | | // url: '/deviceInfo/getTrendChartData', |
| | | // method: 'post', |
| | | // data: { |
| | | // macs: this.newMac1, |
| | | // sensorCode: this.value, |
| | | // type: this.unit, |
| | | // // times: data instanceof Array ? data : [data] |
| | | // times: this.newData instanceof Array ? this.newData : [this.newData] |
| | | // } |
| | | // }).then((res) => { |
| | | // console.log('获得时间对应因子数据') |
| | | // console.log(res) |
| | | // // if(res.) |
| | | // const data = res.data |
| | | // let lockLength = 0 |
| | | // for (let i = 0; i < data.length; i++) { |
| | | // for (let j = 0; j < data[i].deviceData.length; j++) { |
| | | // if (lockLength < data[i].deviceData.length) { |
| | | // newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
| | | // newLineChartData.series[j].name = data[i].deviceData[j].name |
| | | // newLineChartData.title.push(data[i].deviceData[j].name) |
| | | // } |
| | | // lockLength++ |
| | | // newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue) |
| | | // } |
| | | // newLineChartData.xAxis.push(data[i].time) |
| | | // } |
| | | // // newLineChartData.title = this.value |
| | | // this.lineChartData = newLineChartData |
| | | // }).catch((err) => { |
| | | // console.log(err) |
| | | // }) |
| | | } |
| | | } // 如果页面有keep-alive缓存功能,这个函数会触发 |
| | | }, |
| | | }, // 如果页面有keep-alive缓存功能,这个函数会触发 |
| | | } |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .topSelect{ |
| | | display: flex; |
| | | margin-bottom: 20px; |
| | | padding: 20px 15px 0 15px; |
| | | span:first-child{ |
| | | flex: 1; |
| | | } |
| | | div:last-child{ |
| | | width: 300px; |
| | | line-height: 40px; |
| | | padding-left: 6px; |
| | | } |
| | | .topSelect { |
| | | display: flex; |
| | | margin-bottom: 20px; |
| | | padding: 20px 15px 0 15px; |
| | | span:first-child { |
| | | flex: 1; |
| | | } |
| | | div:last-child { |
| | | width: 300px; |
| | | line-height: 40px; |
| | | padding-left: 6px; |
| | | } |
| | | } |
| | | .topTitle{ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | padding: 0 15px; |
| | | .topTitle { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | padding: 0 15px; |
| | | } |
| | | .btn1{ |
| | | .btn1 { |
| | | margin-left: 1%; |
| | | height: 40px; |
| | | } |
| | | |
| | | .select11 { |
| | | width: 20% !important; |
| | | } |
| | | /deep/.el-date-editor .el-range-separator { |
| | | width: 11%; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | +<template> |
| | | <div style="width:100%"> |
| | | <div class="topSelect"> |
| | | <el-cascader |
| | |
| | | :value="item.value" |
| | | /> |
| | | </el-select> --> |
| | | <el-radio-group v-model="radio1" style="margin-left:20px"> |
| | | <!-- <el-radio-group v-model="radio1" style="margin-left:20px"> |
| | | <el-radio-button label="日报" /> |
| | | <el-radio-button label="月报" /> |
| | | <el-radio-button label="月报" /> --> |
| | | <!-- <el-radio-button label="年报" /> |
| | | <el-radio-button label="自定义" /> --> |
| | | </el-radio-group> |
| | | <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
| | | <!-- </el-radio-group> --> |
| | | <el-select v-model="radio1" placeholder="请选择" style="margin-left:20px"> |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <component :is="dataType" class="select11" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
| | | <!--查询按钮--> |
| | | <el-button @click="selectData" class="btn1">查询</el-button> |
| | | </div> |
| | |
| | | } |
| | | } |
| | | export default { |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | // import 引入的组件需要注入到对象中才能使用props |
| | | components: { |
| | | LineChart, |
| | | DatePicker, |
| | |
| | | // newMac2:'', |
| | | newSensor: [], |
| | | radio1: '日报', |
| | | unit: 1, |
| | | unit: 0, |
| | | type: 'select', |
| | | newLineChartData: { |
| | | series: [], |
| | |
| | | defaultData: [], |
| | | newListData: [], |
| | | chartSensorName: '', |
| | | middleData: [] |
| | | middleData: [], |
| | | options1:[ |
| | | |
| | | { |
| | | label:'日报', |
| | | value:'日报' |
| | | } |
| | | , { |
| | | label:'月报', |
| | | value:'月报' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | // 计算属性 类似于data概念 |
| | |
| | | radio1(nv, ov) { |
| | | if (nv === '日报') { |
| | | this.dataType = 'HourPicker' |
| | | this.unit = 1 |
| | | this.unit = 0 |
| | | } else if (nv === '月报') { |
| | | this.dataType = 'DatePicker' |
| | | this.unit = 3 |
| | | this.unit = 1 |
| | | } |
| | | // else if (nv === '年报') { |
| | | // this.dataType = 'MouthPicker' |
| | |
| | | for (let i = 0; i < this.defaultData.length; i++) { |
| | | this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name }) |
| | | this.options[i].children = [] |
| | | if (this.defaultData[i].devices) { |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ value: [this.defaultData[i].devices[j].name, this.defaultData[i].devices[j].mac], label: this.defaultData[i].devices[j].name }) |
| | | } |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ value: [this.defaultData[i].devices[j].name, this.defaultData[i].devices[j].mac], label: this.defaultData[i].devices[j].name }) |
| | | } |
| | | } |
| | | }) |
| | |
| | | title: [] |
| | | } |
| | | this.newXData = [] |
| | | this.$request({ |
| | | url: '/dataDisplay/sensorComparisonDisplay', |
| | | this.$request({ // dataDisplay/sensorComparisonDisplayV2 |
| | | url: '/dataDisplay/sensorComparisonDisplayV2', |
| | | method: 'post', |
| | | data: { |
| | | mac: this.newMac1[0], |
| | | sensors: this.value1, |
| | | sensorCodes: this.value1, |
| | | reportType: this.unit, |
| | | time: this.newData |
| | | times: this.newData |
| | | } |
| | | }).then((res) => { |
| | | // console.log('获得时间对应因子数据') |
| | | // console.log(res) |
| | | console.log(res, 111) |
| | | this.middleData = JSON.parse(JSON.stringify(res.data)) |
| | | const data = res.data |
| | | // 无量纲算法 |
| | |
| | | // 大数组sort升序方法 |
| | | data.sort(this.compare('sort', true)) |
| | | // 给折线图数据添加遍历 |
| | | |
| | | // for (let i = 0; i < data.length; i++) { |
| | | // newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
| | | // newLineChartData.series[i].name = data[i].name |
| | |
| | | newLineChartData.series[i].name = data[i].name |
| | | newLineChartData.title.push(data[i].name) |
| | | for (let j = 0; j < data[i].timeValueList.length; j++) { |
| | | // console.log(data); |
| | | data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor |
| | | newLineChartData.series[i].data.push({ value: 0, data0: 0 }) |
| | | newLineChartData.series[i].data[j].value = data[i].timeValueList[j].value |
| | |
| | | } |
| | | } |
| | | this.lineChartData = newLineChartData |
| | | // console.log(newLineChartData.series[0].name); |
| | | }).catch((err) => { |
| | | console.log(err) |
| | | }) |
| | |
| | | margin-left: 1%; |
| | | height: 40px; |
| | | } |
| | | .select11{ |
| | | width: 20% !important |
| | | } |
| | | /deep/.el-date-editor .el-range-separator{ |
| | | width: 11% |
| | | } |
| | | </style> |
| | |
| | | // padding-left: 6px; |
| | | // } |
| | | } |
| | | .el-date-editor{ |
| | | // float: left; |
| | | } |
| | | .el-select{ |
| | | // float: left; |
| | | // left: 40px; |
| | | } |
| | | |
| | | |
| | | .topTitle{ |
| | | width: 100%; |
| | |
| | | method: 'post', |
| | | data: { |
| | | groupId: this.currentGroupId, |
| | | menuIds: this.$refs.tree.getCheckedKeys() |
| | | menuIds:this.$refs.tree.getCheckedKeys() |
| | | } |
| | | }).then(res => { |
| | | // console.log(res) |
| | | console.log(res) |
| | | if (res.code === 0) { |
| | | this.$message({ |
| | | message: '保存成功', |
| | |
| | | endTime: key === 4 ? this.value1[1] : null |
| | | } |
| | | }).then((res) => { |
| | | // console.log(res) |
| | | console.log(res) |
| | | if (res.code !== 0) { |
| | | return |
| | | } |
| | |
| | | pathRewrite: { |
| | | ['^' + process.env.VUE_APP_BASE_API]: '' |
| | | } |
| | | }, |
| | | '/Req': { |
| | | // target: `http://192.168.1.129:8080/screen/login?account=chenxi&password=123456`, |
| | | // target: `http://localhost:${port}/mock`, |
| | | target: `http://192.168.55.1:8081/`, |
| | | secure: false, // 如果是https接口,需要配置这个参数为true |
| | | changeOrigin: true, |
| | | pathRewrite: { |
| | | '^/Req': '' |
| | | } |
| | | } |
| | | // '/Req': { |
| | | // // target: `http://192.168.1.129:8080/screen/login?account=chenxi&password=123456`, |
| | | // // target: `http://localhost:${port}/mock`, |
| | | // target: `http://121.43.179.139:8080`, |
| | | // secure: false, // 如果是https接口,需要配置这个参数为true |
| | | // changeOrigin: true, |
| | | // pathRewrite: { |
| | | // '^/Req': '' |
| | | // } |
| | | // } |
| | | }, |
| | | after: require('./mock/mock-server.js'), |
| | | historyApiFallback: { |