123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <template>
- <div id="tableCharts">
- <!-- 返回按钮,目前只有电脑端会出现 -->
- <div class="go_back" v-if="!isCollapse">
- <span class="btn" @click="$router.go(-1)">返回</span>
- </div>
- <!-- 电脑端的时间选择器 -->
- <div class="web_view" v-if="!isCollapse">
- <div class="ele_select">
- <div class="inline_block">
- <span>请选择精度:</span>
- <el-select v-model="period" placeholder="请选择">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="inline_block">
- <span class="demonstration">起止时间:</span>
- <el-date-picker
- v-model="timeArr"
- type="datetimerange"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="inline_block">
- <span class="btn mar4" @click="getChartsData">生成图表</span>
- </div>
- </div>
- </div>
- <!-- 手机端的时间选择器 -->
- <div class="mobile_view" v-else>
- <div class="mobile_select">
- <span>选择精度:</span>
- <select name="" id="" v-model="period">
- <option :value="item.value" v-for="item in options">{{item.label}}</option>
- </select>
- <div class="inline_block">
- <span>开始时间:</span>
- <input type="datetime-local" v-model="startDate">
- </div>
- <div class="inline_block">
- <span>结束时间:</span>
- <input type="datetime-local" v-model="endDate">
- </div>
- <span class="btn" @click="getIosDate()">生成图表</span>
- </div>
- </div>
- <!-- 生成的echarts -->
- <div class="echarts">
- <echarts v-if="renderData && renderData.length" :id="echartsData.id" :renderData="renderData" :units="echartsData.units"></echarts>
- <div v-else class="echarts_nodata">
- {{msgData}}
- </div>
- </div>
- </div>
- </template>
- <script>
- import echarts from '@/components/lineCharts'
- import {
- getEcharts//获取表格数据
- } from 'api/repair'
- export default {
- data () {
- return {
- isCollapse: true,//判断是否为移动端参数
- period: '',//select选择结果
- msgData: '暂无数据',//显示的数据内容
- startDate: '',//手机选择时间开始
- endDate: '',//手机选择时间结束
- options: [{//options选择数据
- value: '1min',
- label: '1分钟'
- }, {
- value: '5min',
- label: '5分钟'
- }, {
- value: '15min',
- label: '15分钟'
- }, {
- value: '1h',
- label: '1小时'
- }, {
- value: '1d',
- label: '1天'
- }
- ],
- echartsData: {//echarts数据
- id: 'echarts2',
- data: '',
- units: '111'
- },
- value: '',//
- id: this.$route.query.id,//Pj1101010001,网页传项目id
- code: this.$route.query.secondCode,//OutTdb,网页所传code,请求参数
- secret: this.$route.query.secret,//网页传来的参数secret
- FmId: this.$route.query.FmId,
- timeArr: [],//element-ui选择时间数据
- renderData: []//echarts的renderData
- }
- },
- components: {
- echarts
- },
- watch:{
- },
- methods:{
- //手机点击按钮
- getIosDate(){
- let startDate = this.format(new Date(this.startDate),'yyyyMMddHHmmss')//转换为yyyyMMddHHmmss后台需要格式
- let endDate = this.format(new Date(this.endDate),'yyyyMMddHHmmss')
- if(startDate && endDate && this.period){
- getEcharts(
- this.id,
- this.code,
- this.period,
- this.FmId,
- startDate,
- endDate,
- this.secret
- ).then(
- result =>{
- if(result.data.Result == 'success'){
- this.renderData = result.data.Content
- }else{
- console.log(result.data)
- this.msgData = '暂无信息'
- }
- }
- )
- }
- },
- //电脑点击按钮
- getChartsData(){
- if(this.period && this.timeArr.length){
- getEcharts(
- this.id,
- this.code,
- this.period,
- this.FmId,
- this.format(this.timeArr[0], 'yyyyMMddHHmmss'),
- this.format(this.timeArr[1], 'yyyyMMddHHmmss'),
- this.secret
- ).then(
- result =>{
- if(result.data.Result == 'success'){
- this.renderData = result.data.Content
- }else{
- console.log(result.data)
- this.msgData = '暂无信息'
- }
- }
- )
- }
- },
- //判断是移动端/pc端
- browserRedirect() {
- var sUserAgent = navigator.userAgent.toLowerCase();
- var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
- var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
- var bIsMidp = sUserAgent.match(/midp/i) == "midp";
- var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
- var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
- var bIsAndroid = sUserAgent.match(/android/i) == "android";
- var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
- var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
- if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
- return true;//移动地址
- } else {
- return false;//PC地址
- }
- },
- isMobile(){
- if(this.browserRedirect()){
- //是移动端
- this.isCollapse = true
- }else{
- //是pc端
- this.isCollapse = false
- }
- },
- //工具函数,转换成需求的格式
- format(time, format){
- var t = new Date(time);
- var tf = function(i){return (i < 10 ? '0' : '') + i};
- return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
- switch(a){
- case 'yyyy':
- return tf(t.getFullYear());
- break;
- case 'MM':
- return tf(t.getMonth() + 1);
- break;
- case 'mm':
- return tf(t.getMinutes());
- break;
- case 'dd':
- return tf(t.getDate());
- break;
- case 'HH':
- return tf(t.getHours());
- break;
- case 'ss':
- return tf(t.getSeconds());
- break;
- }
- })
- },
- },
- mounted(){
- this.isMobile()
- }
- }
- </script>
|