index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div id="tableCharts">
  3. <!-- 返回按钮,目前只有电脑端会出现 -->
  4. <div class="go_back" v-if="!isCollapse">
  5. <span class="btn" @click="$router.go(-1)">返回</span>
  6. </div>
  7. <!-- 电脑端的时间选择器 -->
  8. <div class="web_view" v-if="!isCollapse">
  9. <div class="ele_select">
  10. <div class="inline_block">
  11. <span>请选择精度:</span>
  12. <el-select v-model="period" placeholder="请选择">
  13. <el-option
  14. v-for="item in options"
  15. :key="item.value"
  16. :label="item.label"
  17. :value="item.value">
  18. </el-option>
  19. </el-select>
  20. </div>
  21. <div class="inline_block">
  22. <span class="demonstration">起止时间:</span>
  23. <el-date-picker
  24. v-model="timeArr"
  25. type="datetimerange"
  26. range-separator="至"
  27. start-placeholder="开始日期"
  28. end-placeholder="结束日期">
  29. </el-date-picker>
  30. </div>
  31. <div class="inline_block">
  32. <span class="btn mar4" @click="getChartsData">生成图表</span>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- 手机端的时间选择器 -->
  37. <div class="mobile_view" v-else>
  38. <div class="mobile_select">
  39. <span>选择精度:</span>
  40. <select name="" id="" v-model="period">
  41. <option :value="item.value" v-for="item in options">{{item.label}}</option>
  42. </select>
  43. <div class="inline_block">
  44. <span>开始时间:</span>
  45. <input type="datetime-local" v-model="startDate">
  46. </div>
  47. <div class="inline_block">
  48. <span>结束时间:</span>
  49. <input type="datetime-local" v-model="endDate">
  50. </div>
  51. <span class="btn" @click="getIosDate()">生成图表</span>
  52. </div>
  53. </div>
  54. <!-- 生成的echarts -->
  55. <div class="echarts">
  56. <echarts v-if="renderData && renderData.length" :id="echartsData.id" :renderData="renderData" :units="echartsData.units"></echarts>
  57. <div v-else class="echarts_nodata">
  58. {{msgData}}
  59. </div>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import echarts from '@/components/lineCharts'
  65. import {
  66. getEcharts//获取表格数据
  67. } from 'api/repair'
  68. export default {
  69. data () {
  70. return {
  71. isCollapse: true,//判断是否为移动端参数
  72. period: '',//select选择结果
  73. msgData: '暂无数据',//显示的数据内容
  74. startDate: '',//手机选择时间开始
  75. endDate: '',//手机选择时间结束
  76. options: [{//options选择数据
  77. value: '1min',
  78. label: '1分钟'
  79. }, {
  80. value: '5min',
  81. label: '5分钟'
  82. }, {
  83. value: '15min',
  84. label: '15分钟'
  85. }, {
  86. value: '1h',
  87. label: '1小时'
  88. }, {
  89. value: '1d',
  90. label: '1天'
  91. }
  92. ],
  93. echartsData: {//echarts数据
  94. id: 'echarts2',
  95. data: '',
  96. units: '111'
  97. },
  98. value: '',//
  99. id: this.$route.query.id,//Pj1101010001,网页传项目id
  100. code: this.$route.query.secondCode,//OutTdb,网页所传code,请求参数
  101. secret: this.$route.query.secret,//网页传来的参数secret
  102. FmId: this.$route.query.FmId,
  103. timeArr: [],//element-ui选择时间数据
  104. renderData: []//echarts的renderData
  105. }
  106. },
  107. components: {
  108. echarts
  109. },
  110. watch:{
  111. },
  112. methods:{
  113. //手机点击按钮
  114. getIosDate(){
  115. let startDate = this.format(new Date(this.startDate),'yyyyMMddHHmmss')//转换为yyyyMMddHHmmss后台需要格式
  116. let endDate = this.format(new Date(this.endDate),'yyyyMMddHHmmss')
  117. if(startDate && endDate && this.period){
  118. getEcharts(
  119. this.id,
  120. this.code,
  121. this.period,
  122. this.FmId,
  123. startDate,
  124. endDate,
  125. this.secret
  126. ).then(
  127. result =>{
  128. if(result.data.Result == 'success'){
  129. this.renderData = result.data.Content
  130. }else{
  131. console.log(result.data)
  132. this.msgData = '暂无信息'
  133. }
  134. }
  135. )
  136. }
  137. },
  138. //电脑点击按钮
  139. getChartsData(){
  140. if(this.period && this.timeArr.length){
  141. getEcharts(
  142. this.id,
  143. this.code,
  144. this.period,
  145. this.FmId,
  146. this.format(this.timeArr[0], 'yyyyMMddHHmmss'),
  147. this.format(this.timeArr[1], 'yyyyMMddHHmmss'),
  148. this.secret
  149. ).then(
  150. result =>{
  151. if(result.data.Result == 'success'){
  152. this.renderData = result.data.Content
  153. }else{
  154. console.log(result.data)
  155. this.msgData = '暂无信息'
  156. }
  157. }
  158. )
  159. }
  160. },
  161. //判断是移动端/pc端
  162. browserRedirect() {
  163. var sUserAgent = navigator.userAgent.toLowerCase();
  164. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  165. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  166. var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  167. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  168. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  169. var bIsAndroid = sUserAgent.match(/android/i) == "android";
  170. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  171. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  172. if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
  173. return true;//移动地址
  174. } else {
  175. return false;//PC地址
  176. }
  177. },
  178. isMobile(){
  179. if(this.browserRedirect()){
  180. //是移动端
  181. this.isCollapse = true
  182. }else{
  183. //是pc端
  184. this.isCollapse = false
  185. }
  186. },
  187. //工具函数,转换成需求的格式
  188. format(time, format){
  189. var t = new Date(time);
  190. var tf = function(i){return (i < 10 ? '0' : '') + i};
  191. return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
  192. switch(a){
  193. case 'yyyy':
  194. return tf(t.getFullYear());
  195. break;
  196. case 'MM':
  197. return tf(t.getMonth() + 1);
  198. break;
  199. case 'mm':
  200. return tf(t.getMinutes());
  201. break;
  202. case 'dd':
  203. return tf(t.getDate());
  204. break;
  205. case 'HH':
  206. return tf(t.getHours());
  207. break;
  208. case 'ss':
  209. return tf(t.getSeconds());
  210. break;
  211. }
  212. })
  213. },
  214. },
  215. mounted(){
  216. this.isMobile()
  217. }
  218. }
  219. </script>