LNGStation.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101
  1. <template>
  2. <view>
  3. <image src="https://cczdsz.cn/app/images//background-from.png" class="background"></image>
  4. <view class="project-content">
  5. <u-form :model="form" :rules="rules" ref="form">
  6. <view class="small-title">输配站</view>
  7. <u-form-item borderBottom label="名称"ref="item1">
  8. <u-input v-model="form.name" ></u-input>
  9. </u-form-item>
  10. <view class="small-title">储存罐</view>
  11. <u-form-item borderBottom ref="item1">
  12. <view>压力表</view>
  13. <u-input v-model="WarningColumnInformation" disabled placeholder="请上传压力表照片"></u-input>
  14. <view class="" style="display: flex; flex-wrap: wrap; margin: 0 55rpx;">
  15. <image src="https://cczdsz.cn/app/images//chooseimg.png" mode=""
  16. style="width: 190rpx; height: 190rpx; margin: 0 12rpx; " @click="pressureGaugechoose()" >
  17. </image>
  18. <view v-for="(item,index) in pressureGaugeimgymxs" :key="index" style="position: relative;">
  19. <view v-if="item.type == 'image'">
  20. <image :src="item.url" mode="" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"
  21. @click="pressureGaugeshowPhoto(index)">
  22. </image>
  23. </view>
  24. <view v-else>
  25. <video :src="item" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"></video>
  26. </view>
  27. <view @click="pressureGaugeremove(index)"
  28. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%; background-color: #FF0000;">
  29. <u-icon name="close" color="#FFFFFF" size="35" ></u-icon>
  30. </view>
  31. </view>
  32. </view>
  33. </u-form-item>
  34. <u-form-item borderBottom ref="item1">
  35. <view>液位计</view>
  36. <u-input v-model="WarningColumnInformation" disabled placeholder="请上传液位计照片"></u-input>
  37. <view class="" style="display: flex; flex-wrap: wrap; margin: 0 55rpx;">
  38. <image src="https://cczdsz.cn/app/images//chooseimg.png" mode=""
  39. style="width: 190rpx; height: 190rpx; margin: 0 12rpx; " @click="LevelGaugechoose()" >
  40. </image>
  41. <view v-for="(item,index) in LevelGaugeimgymxs" :key="index" style="position: relative;">
  42. <view v-if="item.type == 'image'">
  43. <image :src="item.url" mode="" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"
  44. @click="LevelGaugeshowPhoto(index)">
  45. </image>
  46. </view>
  47. <view v-else>
  48. <video :src="item" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"></video>
  49. </view>
  50. <view @click="LevelGaugeremove(index)"
  51. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%; background-color: #FF0000;">
  52. <u-icon name="close" color="#FFFFFF" size="35" ></u-icon>
  53. </view>
  54. </view>
  55. </view>
  56. </u-form-item>
  57. <u-form-item borderBottom ref="item1">
  58. <view>流量计</view>
  59. <u-input v-model="WarningColumnInformation" disabled placeholder="请上传流量计照片"></u-input>
  60. <view class="" style="display: flex; flex-wrap: wrap; margin: 0 55rpx;">
  61. <image src="https://cczdsz.cn/app/images//chooseimg.png" mode=""
  62. style="width: 190rpx; height: 190rpx; margin: 0 12rpx; " @click="choose()" >
  63. </image>
  64. <view v-for="(item,index) in imgymxs" :key="index" style="position: relative;">
  65. <view v-if="item.type == 'image'">
  66. <image :src="item.url" mode="" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"
  67. @click="showPhoto(index)">
  68. </image>
  69. </view>
  70. <view v-else>
  71. <video :src="item" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"></video>
  72. </view>
  73. <view @click="remove(index)"
  74. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%; background-color: #FF0000;">
  75. <u-icon name="close" color="#FFFFFF" size="35" ></u-icon>
  76. </view>
  77. </view>
  78. </view>
  79. </u-form-item>
  80. <!-- <u-form-item label="路段名称" borderBottom ref="item1" labelWidth="140">
  81. <u-input v-model="form.sectionName" borderBottom @click="showbuilding= true&&type!=1"
  82. placeholder="请输入路段名称"></u-input>
  83. </u-form-item>
  84. <u-form-item label="抽检米数" labelWidth="140" borderBottom ref="item1">
  85. <u-input v-model="form.samplingMeterCount" borderBottom @click="showbuilding= true&&type!=1"
  86. placeholder="请输入抽检米数" @input="checksamplingMeterCount()"></u-input>
  87. </u-form-item> -->
  88. <view class="small-title">输送管道</view>
  89. <u-form-item label=" " labelWidth="0" borderBottom ref="item1">
  90. <u-radio-group v-model="form.pipeline" >
  91. <u-radio @change="confirm"
  92. v-for="(item, index) in typelist.Pipeline"
  93. :key="index" :name="item.dictValue">
  94. {{item.dictLabel}}
  95. </u-radio>
  96. </u-radio-group>
  97. </u-form-item>
  98. <view class="small-title">气化器</view>
  99. <u-form-item label="维护" labelWidth="140" borderBottom ref="item1">
  100. <u-radio-group v-model="form.maintain" >
  101. <u-radio @change="maintainconfirm"
  102. v-for="(item, index) in typelist.maintain"
  103. :key="index" :name="item.dictValue">
  104. {{item.dictLabel}}
  105. </u-radio>
  106. </u-radio-group>
  107. <u-input v-model="maintain" v-show="form.maintain==2" placeholder="请输入其他" @blur='maintainblur' ></u-input>
  108. </u-form-item>
  109. <view class="small-title">安全设施</view>
  110. <u-form-item label="报警器" labelWidth="140" borderBottom ref="item1">
  111. <u-radio-group v-model="form.alarm" >
  112. <u-radio @change="Alarmconfirm"
  113. v-for="(item, index) in typelist.safety_facilities"
  114. :key="index" :name="item.dictValue">
  115. {{item.dictLabel}}
  116. </u-radio>
  117. </u-radio-group>
  118. <u-input v-model="Alarm" v-show="showAlarm" placeholder="请输入其他" @blur='Alarmblur' ></u-input>
  119. </u-form-item>
  120. <u-form-item label="紧急切断阀" labelWidth="140" borderBottom ref="item1">
  121. <u-radio-group v-model="form.emergency" >
  122. <u-radio @change="emergencyconfirm"
  123. v-for="(item, index) in typelist.safety_facilities"
  124. :key="index" :name="item.dictValue">
  125. {{item.dictLabel}}
  126. </u-radio>
  127. </u-radio-group>
  128. <u-input v-model="emergency" v-show="showemergency" placeholder="请输入其他" @blur='emergencyblur' ></u-input>
  129. </u-form-item>
  130. <u-form-item label="消防器材" labelWidth="140" borderBottom ref="item1">
  131. <u-radio-group v-model="form.fireEquipment" >
  132. <u-radio @change="fireEquipmentconfirm"
  133. v-for="(item, index) in typelist.safety_facilities"
  134. :key="index" :name="item.dictValue">
  135. {{item.dictLabel}}
  136. </u-radio>
  137. </u-radio-group>
  138. <u-input v-model="fireEquipment" v-show="showfireEquipment" placeholder="请输入其他" @blur='fireEquipmentblur' ></u-input>
  139. </u-form-item>
  140. <!-- <u-form-item label="发现时间" labelWidth="140" borderBottom ref="item1">
  141. <u-input v-model="form.findTime" borderBottom placeholder="请选择接警时间" disabled
  142. @click="showtime=true&&type!=1"></u-input>
  143. <u-picker v-model="showtime" mode="time" :params="params" @confirm="time()"></u-picker>
  144. </u-form-item>
  145. <u-form-item borderBottom ref="item1">
  146. <view>巡检照片</view>
  147. <u-input v-model="WarningColumnInformation" disabled placeholder="请上传巡检照片"></u-input>
  148. <view class="" style="display: flex; flex-wrap: wrap; margin: 0 55rpx;">
  149. <image src="https://cczdsz.cn/app/images//chooseimg.png" mode=""
  150. style="width: 190rpx; height: 190rpx; margin: 0 12rpx; " @click="choose()" >
  151. </image>
  152. <view v-for="(item,index) in imgymxs" :key="index" style="position: relative;">
  153. <view v-if="item.type == 'image'">
  154. <image :src="item.url" mode="" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"
  155. @click="showPhoto(index)">
  156. </image>
  157. </view>
  158. <view v-else>
  159. <video :src="item" style="width: 190rpx; height: 190rpx; margin: 0 20rpx;"></video>
  160. </view>
  161. <view @click="remove(index)"
  162. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%; background-color: #FF0000;">
  163. <u-icon name="close" color="#FFFFFF" size="35" ></u-icon>
  164. </view>
  165. </view>
  166. </view>
  167. </u-form-item> -->
  168. <!-- <u-form-item borderBottom ref="item1">
  169. <view>备注</view>
  170. <u-input v-model="form.remark" type="textarea" placeholder="请输入备注" ></u-input>
  171. </u-form-item> -->
  172. </u-form>
  173. <u-button style="background: #2d95f4;color: #fff;border-radius: 20rpx;margin-top: 20px;" @click="save()"
  174. type='primary' v-if="type!=1">确认上传</u-button>
  175. <u-button style="background: #2d95f4;color: #fff;border-radius: 20rpx;margin-top: 20px;" @click="update()"
  176. type='primary' v-else>确认修改</u-button>
  177. </view>
  178. </view>
  179. </template>
  180. <script>
  181. import service from '@/api/index.js'
  182. export default {
  183. data() {
  184. return {
  185. repairType: [{
  186. label: '施工问题',
  187. value: 1
  188. }, {
  189. label: '施工问题',
  190. value: 2
  191. }, ],
  192. showrepairType: false,
  193. action: this.$HTTP.webUrl + `/obs`,
  194. headers: {
  195. MAuthorization: "wxBearer " + uni.getStorageSync('token')
  196. },
  197. url: [],
  198. params: {
  199. year: true,
  200. month: true,
  201. day: true,
  202. hour: true,
  203. minute: true,
  204. second: false
  205. },
  206. uploading: false,
  207. showmaintain:false,
  208. showtime:false,
  209. imgArr: [],
  210. imgymxs: [],
  211. pressureGaugeimgArr:[],
  212. pressureGaugeimgymxs:[],
  213. LevelGaugeimgArr: [],
  214. LevelGaugeimgymxs: [],
  215. progress: 0, //图片或视频上传百分比
  216. form: {pipeline:0,maintain:0,alarm:0,fireEquipment:0,emergency:0},
  217. typelist: [],
  218. causesOfFamageLabel: null,
  219. dictlist: ['Pipeline','maintain','safety_facilities'],
  220. buildingName: null,
  221. unit: null,
  222. unitName: null,
  223. showbuilding: false,
  224. showunit: false,
  225. buildingList: [],
  226. unitList: [],
  227. type: 2,
  228. id: null,
  229. community: null,
  230. createBy:null,
  231. maintain:null,
  232. fireEquipment:null,
  233. Alarm:null,
  234. emergency:null,
  235. showAlarm:null,
  236. showfireEquipment:null,
  237. showemergency:null
  238. }
  239. },
  240. onLoad(e) {
  241. // this.building = e.building
  242. // this.buildingName = e.buildingName
  243. // this.community = e.community
  244. // this.unitName = e.unitName
  245. // this.unit = e.unit
  246. this.id = e.id
  247. this.type = e.type
  248. console.log(e)
  249. this.getdictsysinfo()
  250. uni.setNavigationBarTitle({
  251. title: '输配站巡查'
  252. });
  253. uni.setNavigationBarColor({
  254. frontColor: '#ffffff',
  255. backgroundColor: '#2d95f4',
  256. })
  257. // if (this.type != 1) {
  258. // this.getBuildingList()
  259. // }
  260. this.getUserName()
  261. },
  262. methods: {
  263. time(e) {
  264. console.log(`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`)
  265. this.form.findTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
  266. },
  267. maintainblur()
  268. {
  269. this.form.maintain=this.maintain
  270. },
  271. fireEquipmentblur()
  272. {
  273. this.form.fireEquipment=this.fireEquipment
  274. },
  275. Alarmblur()
  276. {
  277. this.form.alarm=this.Alarm
  278. },
  279. emergencyblur()
  280. {
  281. this.form.emergency=this.emergency
  282. },
  283. checksamplingMeterCount(e) {
  284. console.log(e)
  285. //正则表达试
  286. e = (e.match(/^\d*(\.?\d{0,10})/g)[0]) || null
  287. //重新赋值给input
  288. this.$nextTick(() => {
  289. this.form.samplingMeterCount= e
  290. })
  291. },
  292. getUserName(){
  293. service.getUserName().then(res=>{
  294. this.userId=res.id
  295. this.createBy=res.name
  296. })
  297. },
  298. showPhoto(index) {
  299. uni.previewImage({
  300. current: index,
  301. urls: this.imgArr,
  302. })
  303. },
  304. pressureGaugeshowPhoto(index) {
  305. uni.previewImage({
  306. current: index,
  307. urls: this.pressureGaugeimgArr,
  308. })
  309. },
  310. LevelGaugeshowPhoto(index) {
  311. uni.previewImage({
  312. current: index,
  313. urls: this.LevelGaugeimgArr,
  314. })
  315. },
  316. // showPhotos(index) {
  317. // uni.previewImage({
  318. // current: index,
  319. // urls: this.photo,
  320. // })
  321. // },
  322. // buildingconfirm(e) {
  323. // this.buildingName = e[0].label
  324. // this.building = e[0].value
  325. // console.log(this.building)
  326. // //this.getUnitList(e[0].value)
  327. // },
  328. // unitconfirm(e) {
  329. // this.unitName = e[0].label
  330. // this.unit = e[0].value
  331. // },
  332. // getBuildingList() {
  333. // const _this = this
  334. // service.getBuildingList({
  335. // areaId: this.community
  336. // }).then(res => {
  337. // _this.buildingList = res
  338. // })
  339. // },
  340. // getUnitList(building) {
  341. // const _this = this
  342. // service.getUnitList({
  343. // buildingId: building
  344. // }).then(res => {
  345. // _this.unitList = res
  346. // })
  347. // },
  348. update()
  349. {
  350. let _this = this
  351. this.form.pressureStatus = null
  352. this.form.flowMeter = this.imgArr
  353. this.form.levelGauge=this.LevelGaugeimgArr
  354. this.form.pressureGauge=this.pressureGaugeimgArr
  355. // if(this.building==null)
  356. // {
  357. // uni.showToast({
  358. // title: '请选择楼栋',
  359. // icon: 'none'
  360. // })
  361. // return
  362. // }
  363. if(this.imgArr.length==0)
  364. {
  365. uni.showToast({
  366. title: '请上传图片或视频!',
  367. icon: 'none'
  368. })
  369. return
  370. }
  371. // this.form.buildingId = this.building
  372. // this.form.communityId=this.community
  373. this.form.userId=this.userId
  374. this.form.createBy=this.userId
  375. service.updatetransmissionStation(this.form).then(res => {
  376. console.log(res)
  377. _this.$UTILS.showPrompt('修改成功!')
  378. // setTimeout(() => {
  379. // console.log('跳')
  380. // uni.switchTab({
  381. // url: '/pages/index/index'
  382. // })
  383. // }, 2000)
  384. // this.form={pipeline:0,maintain:0,alarm:0,fireEquipment:0,emergency:0}
  385. // // this.buildingName=''
  386. // this.imgArr=[]
  387. // this.imgymxs=[]
  388. // this.LevelGaugeimgArr=[]
  389. // this.pressureGaugeimgArr=[]
  390. // this.LevelGaugeimgymxs=[]
  391. // this.pressureGaugeimgymxs=[]
  392. // this.maintain=null
  393. // this.Alarm=null
  394. // this.fireEquipment=null
  395. // this.emergency=null
  396. // this.showAlarm=false
  397. // this.showemergency=false
  398. // this.showfireEquipment=false
  399. // this.showmaintain=false
  400. })
  401. },
  402. save() {
  403. let _this = this
  404. this.form.flowMeter = this.imgArr
  405. this.form.levelGauge=this.LevelGaugeimgArr
  406. this.form.pressureGauge=this.pressureGaugeimgArr
  407. // if(this.building==null)
  408. // {
  409. // uni.showToast({
  410. // title: '请选择楼栋',
  411. // icon: 'none'
  412. // })
  413. // return
  414. // }
  415. if(this.imgArr.length==0)
  416. {
  417. uni.showToast({
  418. title: '请上传图片或视频!',
  419. icon: 'none'
  420. })
  421. return
  422. }
  423. // this.form.buildingId = this.building
  424. // this.form.communityId=this.community
  425. this.form.userId=this.userId
  426. this.form.createBy=this.userId
  427. service.savetransmissionStation(this.form).then(res => {
  428. console.log(res)
  429. _this.$UTILS.showPrompt('上报成功!')
  430. // setTimeout(() => {
  431. // console.log('跳')
  432. // uni.switchTab({
  433. // url: '/pages/index/index'
  434. // })
  435. // }, 2000)
  436. this.form={pipeline:0,maintain:0,alarm:0,fireEquipment:0,emergency:0}
  437. // this.buildingName=''
  438. this.imgArr=[]
  439. this.imgymxs=[]
  440. this.LevelGaugeimgArr=[]
  441. this.pressureGaugeimgArr=[]
  442. this.LevelGaugeimgymxs=[]
  443. this.pressureGaugeimgymxs=[]
  444. this.maintain=null
  445. this.Alarm=null
  446. this.fireEquipment=null
  447. this.emergency=null
  448. this.showAlarm=false
  449. this.showemergency=false
  450. this.showfireEquipment=false
  451. this.showmaintain=false
  452. })
  453. },
  454. getdictsysinfo() {
  455. let _this = this
  456. service.getDictInfoList({
  457. type: this.dictlist
  458. }).then(res => {
  459. if (this.type == 1) {
  460. let _this = this
  461. console.log(this.id)
  462. service.gettransmissionStation(this.id).then(res => {
  463. // console.log(_this.typelist)
  464. // _this.buildingName = res.buildingName
  465. // _this.unitName = res.unitName
  466. // let list = []
  467. // list = _this.typelist.find_problem
  468. // list.forEach((item) => {
  469. // if (item.dictValue == res.findProblem) {
  470. // _this.causesOfFamageLabel = item.dictLabel
  471. // }
  472. // })
  473. if (null != res.flowMeter) {
  474. res.flowMeter.forEach(item => {
  475. let url = {}
  476. url.url = item
  477. url.type = 'image'
  478. this.imgymxs.push(url)
  479. this.imgArr.push(item)
  480. })
  481. }
  482. if (null != res.levelGauge) {
  483. res.levelGauge.forEach(item => {
  484. let url = {}
  485. url.url = item
  486. url.type = 'image'
  487. this.LevelGaugeimgymxs.push(url)
  488. this.LevelGaugeimgArr.push(item)
  489. })
  490. }
  491. if (null != res.pressureGauge) {
  492. res.pressureGauge.forEach(item => {
  493. let url = {}
  494. url.url = item
  495. url.type = 'image'
  496. this.pressureGaugeimgymxs.push(url)
  497. this.pressureGaugeimgArr.push(item)
  498. })
  499. }
  500. this.form = res
  501. if(this.form.Alarm!=0)
  502. {
  503. this.showAlarm=true
  504. this.Alarm=this.form.alarm
  505. this.form.alarm=1
  506. }
  507. if(this.form.emergency!=0)
  508. {
  509. this.showemergency=true
  510. this.emergency=this.form.emergency
  511. this.form.emergency=1
  512. }
  513. if(this.form.fireEquipment!=0)
  514. {
  515. this.showfireEquipment=true
  516. this.fireEquipment=this.form.fireEquipment
  517. this.form.fireEquipment=1
  518. }
  519. if(this.form.maintain!=0||this.form.maintain!=1)
  520. {
  521. this.showmaintain=true
  522. this.maintain=this.form.maintain
  523. this.form.maintain=2
  524. }
  525. // this.form = res
  526. console.log(this.form)
  527. })
  528. }
  529. _this.typelist = res
  530. })
  531. },
  532. confirm(e) {
  533. this.form.pipeline =e
  534. },
  535. emergencyconfirm(e) {
  536. if(e==1)
  537. {
  538. this.showemergency=true
  539. this.form.emergency=null
  540. }else
  541. {
  542. this.form.emergency =e
  543. this.showemergency=false
  544. }
  545. },
  546. maintainconfirm(e) {
  547. if(e==2)
  548. {
  549. this.showmaintain=true
  550. this.form.maintain=null
  551. }else
  552. {
  553. this.form.maintain =e
  554. this.showmaintain=false
  555. }
  556. console.log(e)
  557. },
  558. fireEquipmentconfirm(e) {
  559. if(e==1)
  560. {
  561. this.showfireEquipment=true
  562. this.form.fireEquipment =null
  563. }else
  564. {
  565. this.form.fireEquipment =e
  566. this.showfireEquipment=false
  567. }
  568. },
  569. Alarmconfirm(e) {
  570. if(e==1)
  571. {
  572. this.showAlarm=true
  573. this.form.Alarm =null
  574. }else
  575. {
  576. this.form.Alarm =e
  577. this.showAlarm=false
  578. }
  579. },
  580. pressureGaugechoose()
  581. {
  582. let _this = this;
  583. uni.showActionSheet({
  584. title: '上传',
  585. itemList: ['图片', '视频'],
  586. success: (res) => {
  587. // console.log(res)
  588. if (res.tapIndex == 0) {
  589. this.pressureGaugeimage()
  590. } else {
  591. this.pressureGaugevideo()
  592. }
  593. }
  594. })
  595. },
  596. LevelGaugechoose()
  597. {
  598. let _this = this;
  599. uni.showActionSheet({
  600. title: '上传',
  601. itemList: ['图片', '视频'],
  602. success: (res) => {
  603. // console.log(res)
  604. if (res.tapIndex == 0) {
  605. this.LevelGaugeimage()
  606. } else {
  607. this.LevelGaugevideo()
  608. }
  609. }
  610. })
  611. },
  612. choose() {
  613. let _this = this;
  614. uni.showActionSheet({
  615. title: '上传',
  616. itemList: ['图片', '视频'],
  617. success: (res) => {
  618. // console.log(res)
  619. if (res.tapIndex == 0) {
  620. this.chooseimage()
  621. } else {
  622. this.choosevideo()
  623. }
  624. }
  625. })
  626. },
  627. chooseimage() {
  628. console.log('图片')
  629. let _this = this;
  630. uni.chooseImage({
  631. sourceType: ['camera'],
  632. success(resp) {
  633. console.log('res--uni.chooseMedia', resp);
  634. resp.tempFiles.forEach((item, index) => {
  635. const task = uni.uploadFile({
  636. url: _this.$HTTP.webUrl + `/obs`,
  637. filePath: item.path,
  638. name: 'file',
  639. formData: {},
  640. header: _this.headers,
  641. success: res => {
  642. // 判断是否json字符串,将其转为json格式
  643. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(
  644. res.data) : res.data;
  645. if (![200, 201, 204].includes(res.statusCode)) {
  646. // this.uploadError(index, data);
  647. _this.$UTILS.showPrompt('选取失败!')
  648. } else {
  649. // 上传成功
  650. // this.lists[index].response = data;
  651. // this.lists[index].progress = 100;
  652. // this.lists[index].error = false;
  653. // this.$emit('on-success', data, index, this.lists, this
  654. // .index);
  655. if (_this.progress === 100) {
  656. // console.log('_this.progress', _this.progress)
  657. // console.log('data----', data)
  658. // console.log('res--', res)
  659. _this.imgymxs.push({
  660. url: data.data.url,
  661. type: 'image'
  662. })
  663. _this.imgArr.push(data.data.url)
  664. // console.log('imgArr', _this.imgArr)
  665. _this.$UTILS.showPrompt('选取成功!')
  666. }
  667. }
  668. },
  669. fail: e => {
  670. _this.$UTILS.showPrompt('选取失败!')
  671. this.uploadError(index, e);
  672. },
  673. complete: res => {
  674. _this.uploading = false;
  675. // _this.uploadFile(index + 1);
  676. // this.$emit('on-change', res, index, this.lists, this
  677. // .index);
  678. }
  679. });
  680. task.onProgressUpdate(res => {
  681. // if (res.progress > 0) {
  682. // this.lists[index].progress = res.progress;
  683. // this.$emit('on-progress', res, index, this.lists, this.index);
  684. // }
  685. _this.progress = res.progress;
  686. console.log('onProgressUpdate', res)
  687. uni.showLoading({
  688. title: '选取中'
  689. })
  690. });
  691. })
  692. },
  693. })
  694. },
  695. choosevideo() {
  696. let _this = this;
  697. console.log('视频')
  698. uni.chooseVideo({
  699. sourceType: ['camera'],
  700. maxDuration: 30,
  701. success(resp) {
  702. const task = uni.uploadFile({
  703. url: _this.$HTTP.webUrl + `/obs`,
  704. filePath: resp.tempFilePath,
  705. name: 'file',
  706. formData: {},
  707. header: _this.headers,
  708. success: res => {
  709. // 判断是否json字符串,将其转为json格式
  710. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(res.data) :
  711. res.data;
  712. if (![200, 201, 204].includes(res.statusCode)) {
  713. this.uploadError(index, data);
  714. } else {
  715. // 上传成功
  716. // this.lists[index].response = data;
  717. // this.lists[index].progress = 100;
  718. // this.lists[index].error = false;
  719. // this.$emit('on-success', data, index, this.lists, this
  720. // .index);
  721. if (_this.progress === 100) {
  722. console.log('_this.progress', _this.progress)
  723. console.log('data----', data)
  724. console.log('res--', res)
  725. // _this.imgArr.push(data.data.url)
  726. _this.imgymxs.push({
  727. url: data.data.url,
  728. type: 'video'
  729. })
  730. _this.imgArr.push(data.data.url)
  731. console.log('imgArr', _this.imgArr)
  732. _this.$UTILS.showPrompt('选取成功!')
  733. }
  734. }
  735. },
  736. fail: e => {
  737. _this.$UTILS.showPrompt('选取失败!')
  738. this.uploadError(index, e);
  739. },
  740. complete: res => {
  741. uni.hideLoading();
  742. _this.uploading = false;
  743. // _this.uploadFile(index + 1);
  744. // this.$emit('on-change', res, index, this.lists, this
  745. // .index);
  746. }
  747. });
  748. task.onProgressUpdate(res => {
  749. // if (res.progress > 0) {
  750. // this.lists[index].progress = res.progress;
  751. // this.$emit('on-progress', res, index, this.lists, this.index);
  752. // }
  753. _this.progress = res.progress;
  754. console.log('onProgressUpdate', res)
  755. uni.showLoading({
  756. title: '选取中'
  757. })
  758. });
  759. },
  760. })
  761. },
  762. remove(index) {
  763. uni.showModal({
  764. title: '提示',
  765. content: '是否删除该图片或视频?',
  766. success: (res) => {
  767. if (res.confirm) {
  768. this.imgArr.splice(index, 1);
  769. this.imgymxs.splice(index, 1);
  770. console.log('this.imgarr', this.imgArr)
  771. }
  772. }
  773. })
  774. },
  775. pressureGaugeimage() {
  776. console.log('图片')
  777. let _this = this;
  778. uni.chooseImage({
  779. sourceType: ['camera'],
  780. success(resp) {
  781. console.log('res--uni.chooseMedia', resp);
  782. resp.tempFiles.forEach((item, index) => {
  783. const task = uni.uploadFile({
  784. url: _this.$HTTP.webUrl + `/obs`,
  785. filePath: item.path,
  786. name: 'file',
  787. formData: {},
  788. header: _this.headers,
  789. success: res => {
  790. // 判断是否json字符串,将其转为json格式
  791. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(
  792. res.data) : res.data;
  793. if (![200, 201, 204].includes(res.statusCode)) {
  794. // this.uploadError(index, data);
  795. _this.$UTILS.showPrompt('选取失败!')
  796. } else {
  797. // 上传成功
  798. // this.lists[index].response = data;
  799. // this.lists[index].progress = 100;
  800. // this.lists[index].error = false;
  801. // this.$emit('on-success', data, index, this.lists, this
  802. // .index);
  803. if (_this.progress === 100) {
  804. // console.log('_this.progress', _this.progress)
  805. // console.log('data----', data)
  806. // console.log('res--', res)
  807. _this.pressureGaugeimgymxs.push({
  808. url: data.data.url,
  809. type: 'image'
  810. })
  811. _this.pressureGaugeimgArr.push(data.data.url)
  812. // console.log('imgArr', _this.imgArr)
  813. _this.$UTILS.showPrompt('选取成功!')
  814. }
  815. }
  816. },
  817. fail: e => {
  818. _this.$UTILS.showPrompt('选取失败!')
  819. this.uploadError(index, e);
  820. },
  821. complete: res => {
  822. _this.uploading = false;
  823. // _this.uploadFile(index + 1);
  824. // this.$emit('on-change', res, index, this.lists, this
  825. // .index);
  826. }
  827. });
  828. task.onProgressUpdate(res => {
  829. // if (res.progress > 0) {
  830. // this.lists[index].progress = res.progress;
  831. // this.$emit('on-progress', res, index, this.lists, this.index);
  832. // }
  833. _this.progress = res.progress;
  834. console.log('onProgressUpdate', res)
  835. uni.showLoading({
  836. title: '选取中'
  837. })
  838. });
  839. })
  840. },
  841. })
  842. },
  843. pressureGaugevideo() {
  844. let _this = this;
  845. console.log('视频')
  846. uni.chooseVideo({
  847. sourceType: ['camera'],
  848. maxDuration: 30,
  849. success(resp) {
  850. const task = uni.uploadFile({
  851. url: _this.$HTTP.webUrl + `/obs`,
  852. filePath: resp.tempFilePath,
  853. name: 'file',
  854. formData: {},
  855. header: _this.headers,
  856. success: res => {
  857. // 判断是否json字符串,将其转为json格式
  858. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(res.data) :
  859. res.data;
  860. if (![200, 201, 204].includes(res.statusCode)) {
  861. this.uploadError(index, data);
  862. } else {
  863. // 上传成功
  864. // this.lists[index].response = data;
  865. // this.lists[index].progress = 100;
  866. // this.lists[index].error = false;
  867. // this.$emit('on-success', data, index, this.lists, this
  868. // .index);
  869. if (_this.progress === 100) {
  870. console.log('_this.progress', _this.progress)
  871. console.log('data----', data)
  872. console.log('res--', res)
  873. // _this.imgArr.push(data.data.url)
  874. _this.pressureGaugeimgymxs.push({
  875. url: data.data.url,
  876. type: 'video'
  877. })
  878. _this.pressureGaugeimgArr.push(data.data.url)
  879. console.log('imgArr', _this.imgArr)
  880. _this.$UTILS.showPrompt('选取成功!')
  881. }
  882. }
  883. },
  884. fail: e => {
  885. _this.$UTILS.showPrompt('选取失败!')
  886. this.uploadError(index, e);
  887. },
  888. complete: res => {
  889. uni.hideLoading();
  890. _this.uploading = false;
  891. // _this.uploadFile(index + 1);
  892. // this.$emit('on-change', res, index, this.lists, this
  893. // .index);
  894. }
  895. });
  896. task.onProgressUpdate(res => {
  897. // if (res.progress > 0) {
  898. // this.lists[index].progress = res.progress;
  899. // this.$emit('on-progress', res, index, this.lists, this.index);
  900. // }
  901. _this.progress = res.progress;
  902. console.log('onProgressUpdate', res)
  903. uni.showLoading({
  904. title: '选取中'
  905. })
  906. });
  907. },
  908. })
  909. },
  910. pressureGaugeremove(index) {
  911. uni.showModal({
  912. title: '提示',
  913. content: '是否删除该图片或视频?',
  914. success: (res) => {
  915. if (res.confirm) {
  916. this.pressureGaugeimgArr.splice(index, 1);
  917. this.pressureGaugeimgymxs.splice(index, 1);
  918. console.log('this.imgarr', this.pressureGaugeimgArr)
  919. }
  920. }
  921. })
  922. },
  923. LevelGaugeimage() {
  924. console.log('图片')
  925. let _this = this;
  926. uni.chooseImage({
  927. sourceType: ['camera'],
  928. success(resp) {
  929. console.log('res--uni.chooseMedia', resp);
  930. resp.tempFiles.forEach((item, index) => {
  931. const task = uni.uploadFile({
  932. url: _this.$HTTP.webUrl + `/obs`,
  933. filePath: item.path,
  934. name: 'file',
  935. formData: {},
  936. header: _this.headers,
  937. success: res => {
  938. // 判断是否json字符串,将其转为json格式
  939. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(
  940. res.data) : res.data;
  941. if (![200, 201, 204].includes(res.statusCode)) {
  942. // this.uploadError(index, data);
  943. _this.$UTILS.showPrompt('选取失败!')
  944. } else {
  945. // 上传成功
  946. // this.lists[index].response = data;
  947. // this.lists[index].progress = 100;
  948. // this.lists[index].error = false;
  949. // this.$emit('on-success', data, index, this.lists, this
  950. // .index);
  951. if (_this.progress === 100) {
  952. // console.log('_this.progress', _this.progress)
  953. // console.log('data----', data)
  954. // console.log('res--', res)
  955. _this.LevelGaugeimgymxs.push({
  956. url: data.data.url,
  957. type: 'image'
  958. })
  959. _this.LevelGaugeimgArr.push(data.data.url)
  960. // console.log('imgArr', _this.imgArr)
  961. _this.$UTILS.showPrompt('选取成功!')
  962. }
  963. }
  964. },
  965. fail: e => {
  966. _this.$UTILS.showPrompt('选取失败!')
  967. this.uploadError(index, e);
  968. },
  969. complete: res => {
  970. _this.uploading = false;
  971. // _this.uploadFile(index + 1);
  972. // this.$emit('on-change', res, index, this.lists, this
  973. // .index);
  974. }
  975. });
  976. task.onProgressUpdate(res => {
  977. // if (res.progress > 0) {
  978. // this.lists[index].progress = res.progress;
  979. // this.$emit('on-progress', res, index, this.lists, this.index);
  980. // }
  981. _this.progress = res.progress;
  982. console.log('onProgressUpdate', res)
  983. uni.showLoading({
  984. title: '选取中'
  985. })
  986. });
  987. })
  988. },
  989. })
  990. },
  991. LevelGaugevideo() {
  992. let _this = this;
  993. console.log('视频')
  994. uni.chooseVideo({
  995. sourceType: ['camera'],
  996. maxDuration: 30,
  997. success(resp) {
  998. const task = uni.uploadFile({
  999. url: _this.$HTTP.webUrl + `/obs`,
  1000. filePath: resp.tempFilePath,
  1001. name: 'file',
  1002. formData: {},
  1003. header: _this.headers,
  1004. success: res => {
  1005. // 判断是否json字符串,将其转为json格式
  1006. let data = _this.$u.test.jsonString(res.data) ? JSON.parse(res.data) :
  1007. res.data;
  1008. if (![200, 201, 204].includes(res.statusCode)) {
  1009. this.uploadError(index, data);
  1010. } else {
  1011. // 上传成功
  1012. // this.lists[index].response = data;
  1013. // this.lists[index].progress = 100;
  1014. // this.lists[index].error = false;
  1015. // this.$emit('on-success', data, index, this.lists, this
  1016. // .index);
  1017. if (_this.progress === 100) {
  1018. console.log('_this.progress', _this.progress)
  1019. console.log('data----', data)
  1020. console.log('res--', res)
  1021. // _this.imgArr.push(data.data.url)
  1022. _this.LevelGaugeimgymxs.push({
  1023. url: data.data.url,
  1024. type: 'video'
  1025. })
  1026. _this.LevelGaugeimgArr.push(data.data.url)
  1027. console.log('imgArr', _this.imgArr)
  1028. _this.$UTILS.showPrompt('选取成功!')
  1029. }
  1030. }
  1031. },
  1032. fail: e => {
  1033. _this.$UTILS.showPrompt('选取失败!')
  1034. this.uploadError(index, e);
  1035. },
  1036. complete: res => {
  1037. uni.hideLoading();
  1038. _this.uploading = false;
  1039. // _this.uploadFile(index + 1);
  1040. // this.$emit('on-change', res, index, this.lists, this
  1041. // .index);
  1042. }
  1043. });
  1044. task.onProgressUpdate(res => {
  1045. // if (res.progress > 0) {
  1046. // this.lists[index].progress = res.progress;
  1047. // this.$emit('on-progress', res, index, this.lists, this.index);
  1048. // }
  1049. _this.progress = res.progress;
  1050. console.log('onProgressUpdate', res)
  1051. uni.showLoading({
  1052. title: '选取中'
  1053. })
  1054. });
  1055. },
  1056. })
  1057. },
  1058. LevelGaugeremove(index) {
  1059. uni.showModal({
  1060. title: '提示',
  1061. content: '是否删除该图片或视频?',
  1062. success: (res) => {
  1063. if (res.confirm) {
  1064. this.LevelGaugeimgArr.splice(index, 1);
  1065. this.LevelGaugeimgymxs.splice(index, 1);
  1066. console.log('this.imgarr', this.LevelGaugeimgArr)
  1067. }
  1068. }
  1069. })
  1070. },
  1071. },
  1072. }
  1073. </script>
  1074. <style>
  1075. .project-content {
  1076. padding: 10rpx 20rpx;
  1077. border-radius: 20rpx;
  1078. background: #fff;
  1079. width: 90%;
  1080. margin: 0 auto;
  1081. }
  1082. .background {
  1083. z-index: -1;
  1084. position: fixed;
  1085. width: 100%;
  1086. height: 100%;
  1087. background-size: 100% 100%;
  1088. }
  1089. .small-title {
  1090. font-size: 38rpx;
  1091. color: #2d95f4;
  1092. margin: 20rpx 0;
  1093. }
  1094. </style>