conductInspections.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050
  1. <!-- 开展检查 -->
  2. <template>
  3. <view class="inspectAdd">
  4. <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
  5. <!-- <view class="tip">{{optionData.checkPlanSetVoList.checkName}}</view> -->
  6. <!-- <view class="items">
  7. <view class="items-t" @click="checkItemModuleButton('open')">
  8. <view class="items-t-r">{{newData.hazardCheckCode}} {{newData.hazardCheckName}}</view>
  9. <img class="items-t-img" src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
  10. </view>
  11. <view class="items-b">< {{newData.hazardCheckCode2}} {{newData.hazardCheckName2}}
  12. <{{newData.hazardCheckCode1}} {{newData.hazardCheckName1}}</view>
  13. </view> -->
  14. <view class="list">
  15. <view class="list-li srearch">
  16. <view class="srearch-l">{{newData.subName?newData.subName:'实验室名称'}}</view>
  17. <!-- <img class="srearch-r" src="@/pages_safetyCheck/images/icon_wd_gd@1x.png"> -->
  18. </view>
  19. <view class="list-li" style="margin-bottom: 20rpx;border:none;">
  20. <view>
  21. {{newData.roomNum?newData.roomNum:''}}房间&{{newData.buildName?newData.buildName:'楼栋'}}&{{newData.deptName?newData.deptName:'学院单位'}}
  22. </view>
  23. </view>
  24. <view class="list-li">
  25. <view>现场照片</view>
  26. </view>
  27. <view v-if="form.photoList[0]" class="check-for-img-max-box">
  28. <view class="left-title-p"></view>
  29. <view class="right-img-box">
  30. <view class="img-box" v-for="(imgUrl,imgIndex) in form.photoList" :key="imgIndex">
  31. <img class="img-data" :src="baseUrl+imgUrl.fileUrl">
  32. <img class="position-img" src="@/pages_safetyCheck/images/icon_ssp_closure.png"
  33. @click="delImg(imgIndex)">
  34. </view>
  35. <!-- <img class="add-button" src="@/pages_safetyCheck/images/img_ssp_pz@1x.png"
  36. @click="selectImage()" v-if="form.photoList.length<6"> -->
  37. </view>
  38. </view>
  39. <view class="list-li" @click="checkItemModuleButton('open')">
  40. <view> {{newData.hazardCheckCode?newData.hazardCheckCode:''}}
  41. {{newData.hazardCheckName?newData.hazardCheckName:'检查项'}}
  42. </view>
  43. <view style="color: #0183FA;">
  44. <img src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
  45. </view>
  46. </view>
  47. <!-- <view class="list-li" v-if="newData.hazardCheckName!=''" @click="inspectDot()">
  48. <view>检查要点</view>
  49. <view>
  50. <img v-if="!newData.inspectDot" src="@/pages_safetyCheck/images/icon_06.png">
  51. <img v-if="newData.inspectDot" src="@/pages_safetyCheck/images/icon_06_1.png">
  52. </view>
  53. </view>
  54. <view class="hidden-content" v-if="newData.hazardCheckName!='' && newData.inspectDot">
  55. {{newData.hazardCheckPoint}}
  56. </view> -->
  57. <!-- <view class="radio_group" v-if="newData.inspectDot">
  58. <view class="radio" v-for="(item,index) in radioList" :key="index" @click="radioClick(item)">
  59. <img v-if="!item.checked" src="@/pages_safetyCheck/images/icon_aqjc_5.png">
  60. <img v-if="item.checked" src="@/pages_safetyCheck/images/icon_aqjc_6.png">
  61. <text>{{item.name}}</text>
  62. </view>
  63. </view> -->
  64. <view class="list-li" v-if="!form.checkFlag">
  65. <view>隐患描述</view>
  66. <view>
  67. <!-- <img src="@/pages_safetyCheck/images/icon_06.png"> -->
  68. </view>
  69. </view>
  70. <view class="describe">
  71. <textarea v-if="!form.checkFlag && !checkItemModuleType" cursor-spacing="40" class="describe-n" type="text"
  72. v-model="form.hazardDescribe" maxlength="200" placeholder="请填写隐患描述"
  73. placeholder-style="font-size:24rpx;color:#999;"></textarea>
  74. </view>
  75. </view>
  76. <view class="voice">
  77. <view class="voice_t">
  78. <view class="voice_t_t" v-if="!form.voiceList[0]"><text>语音备注:</text><text>按住话筒录音</text></view>
  79. <view class="voice_t_b" v-if="form.voiceList[0]">语音备注:({{form.voiceList.length}})</view>
  80. </view>
  81. <view class="voice_b" v-if="form.voiceList[0]" v-for="(voiceItem,voiceIndex) in form.voiceList"
  82. :key="voiceIndex">
  83. <view class="voice_b_l" @tap="voicePlay(voiceItem.fileUrl)">
  84. <img class="add-button" src="@/pages_safetyCheck/images//icon_yybz_yy.png" />
  85. {{voiceItem.fileLength}}″
  86. </view>
  87. <img class="voice_b_r" src="@/pages_safetyCheck/images/icon_yybz_sc.png"
  88. @tap="voiceDele('',voiceIndex)" />
  89. </view>
  90. <!-- <view class="voice-btn">
  91. <img class="voice_t_r" src="@/pages_safetyCheck/images/icon_sskz_azsh.png"
  92. @longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"
  93. @touchend.stop="sendButton(item,$event)" />
  94. <text>按住说话</text>
  95. </view> -->
  96. </view>
  97. </scroll-view>
  98. <checkItemModule :propsData="propsData" v-if="checkItemModuleType"></checkItemModule>
  99. <!-- <view class="sub-btn">
  100. <view @click="submitForm(1)">保存草稿</view>
  101. <view @click="submitForm(2)">提交</view>
  102. </view> -->
  103. <view class="sub-btn" v-if="!checkItemModuleType">
  104. <img @longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"
  105. @touchend.stop="sendButton(item,$event)" src="@/pages_safetyCheck/images/icon_aqjc_luyin.png" />
  106. <img @click="selectImage()" src="@/pages_safetyCheck/images/icon_aqjc_paizhao.png" />
  107. <img @click="submitForm(1)" src="@/pages_safetyCheck/images/icon_aqjc_baocun.png" />
  108. <img @click="submitForm(2)" src="@/pages_safetyCheck/images/icon_aqjc_tijiao.png" />
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. const myaudio = uni.createInnerAudioContext();
  114. import {
  115. config
  116. } from '@/api/request/config.js'
  117. import {
  118. securityAppCheckPlanCheckInfo,
  119. securityAppCheckSetOptionCheckCommit,
  120. securityDraftFindBySetOptionId,
  121. } from '@/pages_safetyCheck/api/index.js'
  122. import {
  123. checkItemModule
  124. } from '@/pages_safetyCheck/component/checkItemModule.vue'
  125. export default {
  126. name: "inspectAdd",
  127. components: {
  128. checkItemModule
  129. },
  130. data() {
  131. return {
  132. baseUrl: config.base_url,
  133. form: {
  134. checkFlag: false,
  135. photoList: [],
  136. voiceList: [],
  137. },
  138. newData: {},
  139. radioList: [{
  140. id: 1,
  141. name: '符合',
  142. checked: false,
  143. },
  144. {
  145. id: 0,
  146. name: '不符合',
  147. checked: true,
  148. },
  149. ],
  150. pageType: '',
  151. itemsStatus: '',
  152. setOptionId: '', //检查项id
  153. manageId: '', //检查管理id
  154. subId: '',
  155. hazardCheckPro: '',
  156. sendLock: true, //发送锁,当为true时上锁,false时解锁发送
  157. recorderManager: wx.getRecorderManager(),
  158. optionData: null,
  159. //检查项组件数据
  160. checkItemModuleType: false,
  161. propsData: {},
  162. }
  163. },
  164. onLoad(option) {
  165. let optionData = JSON.parse(decodeURIComponent(option.infoData));
  166. console.log('开展检查',optionData)
  167. uni.setNavigationBarTitle({
  168. title: optionData.subName + '(' + (optionData.pageType == 0 ? (optionData.roomNum ? optionData
  169. .roomNum : '-') : (optionData
  170. .subRoom ? optionData
  171. .subRoom : '-')) + ')'
  172. })
  173. this.$set(this, 'pageType', optionData.pageType);
  174. this.$set(this, 'itemsStatus', optionData.itemsStatus);
  175. this.$set(this, 'setOptionId', optionData.setOptionId);
  176. this.$set(this, 'manageId', optionData.manageId);
  177. this.$set(this, 'subId', optionData.subId);
  178. this.$set(this, 'hazardCheckPro', optionData.hazardCheckPro);
  179. this.$set(this, 'optionData', optionData);
  180. },
  181. onShow() {
  182. },
  183. mounted() {
  184. if (this.pageType == 0) {
  185. if(this.optionData.checkDraftVo){//检查中,已检查
  186. if(this.optionData.checkDraftVo.checkStatus==2){//检查中
  187. //保存草稿详情
  188. this.securityDraftFindBySetOptionId();
  189. }else{
  190. //开始检查-提交的详情
  191. this.securityAppCheckPlanCheckInfo();
  192. }
  193. }else{//待见擦汗
  194. //开始检查-提交的详情
  195. this.securityAppCheckPlanCheckInfo();
  196. }
  197. }
  198. },
  199. methods: {
  200. //折叠展开
  201. inspectDot() {
  202. console.log(11)
  203. console.log(this.newData.inspectDot)
  204. this.newData.inspectDot = !this.newData.inspectDot
  205. },
  206. //获取提交详情
  207. async securityAppCheckPlanCheckInfo() {
  208. let obj = {
  209. setOptionId: this.setOptionId,
  210. manageId: this.manageId,
  211. }
  212. const {
  213. data
  214. } = await securityAppCheckPlanCheckInfo(obj);
  215. if (data.code == 200) {
  216. data.data.inspectDot = true;
  217. this.$set(this, 'newData', data.data);
  218. console.log(data.data.hazardCheckPoin)
  219. //编辑的时候
  220. this.$set(this.form, 'checkFlag', data.data.checkFlag ? data.data.checkFlag : false);
  221. if(data.data.hazardDescribe){
  222. this.$set(this.form, 'hazardDescribe', data.data.hazardDescribe);
  223. }else{
  224. let list=[];
  225. list=data.data.hazardCheckPoint.split('#');
  226. this.$set(this.form, 'hazardDescribe', list[0]);
  227. }
  228. this.$set(this.form, 'photoList', data.data.photoList ? data.data.photoList : []);
  229. this.$set(this.form, 'voiceList', data.data.voiceList ? data.data.voiceList : []);
  230. }
  231. },
  232. //获取草稿详情
  233. async securityDraftFindBySetOptionId() {
  234. let obj = {
  235. setOptionId: this.setOptionId,
  236. }
  237. const {
  238. data
  239. } = await securityDraftFindBySetOptionId(obj);
  240. if (data.code == 200) {
  241. //编辑的时候
  242. data.data.inspectDot = true;
  243. this.$set(this, 'newData', data.data);
  244. if(data.data.hazardDescribe){
  245. this.$set(this.form, 'hazardDescribe', data.data.hazardDescribe);
  246. }else{
  247. let list=[];
  248. list=data.data.hazardCheckPoint.split('#');
  249. this.$set(this.form, 'hazardDescribe', list[0]);
  250. }
  251. this.$set(this.newData, 'checkPlanSetVoList', this.optionData.checkPlanSetVoList);
  252. this.$set(this.form, 'checkFlag', data.data.checkFlag ? data.data.checkFlag : false);
  253. this.$set(this.form, 'photoList', data.data.photoList ? data.data.photoList : []);
  254. this.$set(this.form, 'voiceList', data.data.voiceList ? data.data.voiceList : []);
  255. }
  256. },
  257. checkItemModuleButton(type, item,keyPoint) {
  258. if (type == 'open') {
  259. let obj = {
  260. infoType: this.pageType,
  261. checkType: 0,
  262. }
  263. if (this.pageType == 0) {
  264. //检查
  265. obj.manageId = this.optionData.manageId
  266. }
  267. this.$set(this, 'propsData', obj);
  268. this.$set(this, 'checkItemModuleType', true);
  269. } else if (type == 'out') {
  270. this.$set(this, 'checkItemModuleType', false);
  271. this.$set(this, 'propsData', {});
  272. } else if (type == 'submit') {
  273. //this.itemsClick(item);
  274. this.$set(this.newData, 'hazardCheckCode', item.hazardCheckCode);
  275. this.$set(this.newData, 'hazardCheckName', item.hazardCheckName);
  276. this.$set(this.newData, 'hazardCheckCode2', item.hazardCheckCode2);
  277. this.$set(this.newData, 'hazardCheckName2', item.hazardCheckName2);
  278. this.$set(this.newData, 'hazardCheckPoint', item.hazardCheckPoint);
  279. this.$set(this.form, 'hazardDescribe', keyPoint);
  280. this.$set(this, 'setOptionId', item.setOptionId);
  281. this.$set(this, 'hazardCheckPro', item.hazardCheckPro);
  282. this.$set(this, 'checkItemModuleType', false);
  283. }
  284. },
  285. //提交
  286. async submitForm(status) {
  287. if (!this.form.checkFlag) {
  288. if (!this.form.hazardDescribe) {
  289. uni.showToast({
  290. title: '请填写隐患描述!',
  291. icon: "none",
  292. mask: true,
  293. duration: 2000
  294. });
  295. return
  296. }
  297. if (!this.form.photoList[0]) {
  298. uni.showToast({
  299. title: '请选择现场照片!',
  300. icon: "none",
  301. mask: true,
  302. duration: 2000
  303. });
  304. return
  305. }
  306. }
  307. let obj = {
  308. checkFlag: this.form.checkFlag,
  309. checkStatus: status == 1 ? 2 : 1,
  310. hazardDescribe: this.form.hazardDescribe,
  311. setOptionId: this.setOptionId,
  312. photoList: this.form.photoList,
  313. voiceList: this.form.voiceList,
  314. }
  315. const {
  316. data
  317. } = await securityAppCheckSetOptionCheckCommit(obj);
  318. if (data.code == 200) {
  319. if (status == 1) {
  320. uni.showToast({
  321. title: '保存成功!',
  322. icon: "none",
  323. mask: true,
  324. duration: 2000
  325. });
  326. } else if (status == 2) {
  327. uni.showToast({
  328. title: '提交成功!',
  329. icon: "none",
  330. mask: true,
  331. duration: 2000
  332. });
  333. }
  334. let infoData = this.optionData;
  335. infoData.itemsStatus = status == 1 ? 2 : 0;
  336. uni.redirectTo({
  337. url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
  338. encodeURIComponent(JSON
  339. .stringify(infoData))
  340. });
  341. }
  342. },
  343. //滚动事件
  344. scrollGet() {},
  345. //单选按钮
  346. radioClick(d) {
  347. let self = this;
  348. d.checked = !d.checked
  349. if (d.checked) {
  350. //如果有选中的,循环把其他选中的取消
  351. this.radioList.forEach(function(item) {
  352. if (item.id == d.id) {
  353. self.$set(self.form, 'checkFlag', item.id);
  354. } else {
  355. item.checked = false;
  356. }
  357. })
  358. } else {
  359. }
  360. },
  361. /******图片上传******/
  362. selectImage() {
  363. let self = this;
  364. let photoMaxNun = 0;
  365. if (this.form.photoList.length > 5) {
  366. uni.showToast({
  367. title: '最多上传6张图片',
  368. icon: "none",
  369. mask: true,
  370. duration: 2000
  371. });
  372. return
  373. }
  374. photoMaxNun = 6 - this.form.photoList.length;
  375. wx.chooseImage({
  376. count: photoMaxNun,
  377. sizeType: ["original", "compressed"],
  378. sourceType: ["album", "camera"],
  379. success: function(res) {
  380. if (res.tempFilePaths[0]) {
  381. res.tempFilePaths.forEach(function(item, index) {
  382. self.uploadImg(item);
  383. })
  384. }
  385. }
  386. });
  387. },
  388. async uploadImg(tempFilePaths) {
  389. var self = this;
  390. uni.showLoading({
  391. title: '上传中',
  392. mask: true
  393. });
  394. uni.uploadFile({
  395. url: config.base_url + '/system/file/upload', //仅为示例,非真实的接口地址
  396. header: {
  397. 'Authorization': uni.getStorageSync('token')
  398. },
  399. filePath: tempFilePaths,
  400. name: 'file',
  401. formData: {
  402. 'user': 'test'
  403. },
  404. success: (uploadFileRes) => {
  405. let res = JSON.parse(uploadFileRes.data);
  406. if (res.code == 200) {
  407. this.form.photoList.push({
  408. 'fileUrl': res.data.url,
  409. 'fileName': res.data.name
  410. });
  411. } else {
  412. uni.showToast({
  413. title: res.msg,
  414. icon: "none",
  415. mask: true,
  416. duration: 2000
  417. });
  418. }
  419. },
  420. fail: err => {},
  421. complete: () => {
  422. uni.hideLoading()
  423. }
  424. });
  425. },
  426. //删除图片
  427. delImg(minIndex) {
  428. this.form.photoList.splice(minIndex, 1);
  429. this.$forceUpdate();
  430. },
  431. /******语音备注 *******/
  432. //语音备忘播放
  433. async voicePlay(item) {
  434. myaudio.src = config.base_url + item;
  435. myaudio.play();
  436. },
  437. //语音备忘删除
  438. async voiceDele(item, voiceIndex) {
  439. let self = this;
  440. uni.showModal({
  441. title: '',
  442. cancelColor: '#999999',
  443. confirmColor: '#FF6E6E',
  444. content: '确定删除此语音吗?',
  445. success(res) {
  446. if (res.confirm) {
  447. console.log('用户点击确定')
  448. self.form.voiceList.splice(voiceIndex, 1);
  449. self.$forceUpdate();
  450. } else if (res.cancel) {
  451. console.log('用户点击取消')
  452. }
  453. }
  454. })
  455. },
  456. //录制
  457. recordButton(item, e) {
  458. console.log("按下")
  459. let self = this;
  460. if (this.form.voiceList.length >= 5) {
  461. uni.showToast({
  462. title: '语音备忘最多只能上传5条',
  463. icon: "none",
  464. mask: true,
  465. duration: 2000
  466. });
  467. return
  468. }
  469. this.liveType = true;
  470. console.log('录制', e)
  471. this.startPoint = e.touches[0]; //记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
  472. const options = {
  473. duration: 60000,
  474. sampleRate: 16000,
  475. numberOfChannels: 1,
  476. encodeBitRate: 48000,
  477. format: 'mp3',
  478. frameSize: 50
  479. }
  480. this.recorderManager.start(options); //开始录音
  481. this.recorderManager.onStart(() => {
  482. console.log('recorder start')
  483. })
  484. this.recorderManager.onError((res) => {
  485. console.log(res);
  486. })
  487. wx.showToast({
  488. title: "正在录音,上划取消发送",
  489. icon: "none",
  490. duration: 60000 //先定义个60秒,后面可以手动调用wx.hideToast()隐藏
  491. });
  492. this.sendLock = false; //长按时是不上锁的。
  493. },
  494. //取消
  495. cancelButton(e) {
  496. console.log("移动")
  497. let self = this;
  498. this.liveType = false;
  499. console.log('取消', e)
  500. let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
  501. if (Math.abs(moveLenght) > 50) {
  502. wx.showToast({
  503. title: "松开手指,取消发送",
  504. icon: "none",
  505. duration: 60000
  506. });
  507. this.sendLock = true; //触发了上滑取消发送,上锁
  508. } else {
  509. wx.showToast({
  510. title: "正在录音,上划取消发送",
  511. icon: "none",
  512. duration: 60000
  513. });
  514. this.sendLock = false; //上划距离不足,依然可以发送,不上锁
  515. }
  516. },
  517. //发送
  518. sendButton(item, e) {
  519. console.log("松开")
  520. let self = this;
  521. this.liveType = false;
  522. console.log('发送', e)
  523. wx.hideToast(); //结束录音、隐藏Toast提示框
  524. this.recorderManager.stop(); //结束录音
  525. this.recorderManager.onStop((res) => {
  526. if (!this.sendLock) {
  527. this.uploadVoice(item, res.duration, res.tempFilePath);
  528. }
  529. console.log('停止录音', res.tempFilePath)
  530. console.log("sendLock", this.sendLock);
  531. })
  532. },
  533. //上传MP3
  534. async uploadVoice(item, times, tempFilePaths) {
  535. var self = this;
  536. uni.uploadFile({
  537. url: config.base_url + '/system/file/upload', //仅为示例,非真实的接口地址
  538. header: {
  539. 'Authorization': uni.getStorageSync('token')
  540. },
  541. filePath: tempFilePaths,
  542. name: 'file',
  543. formData: {
  544. 'user': 'test'
  545. },
  546. success: (uploadFileRes) => {
  547. let res = JSON.parse(uploadFileRes.data);
  548. if (res.code == 200) {
  549. console.log("上传成功", res)
  550. console.log(item)
  551. let seconds = Math.round((parseInt(times) % (1000 * 60)) / 1000);
  552. this.form.voiceList.push({
  553. 'fileLength': seconds,
  554. 'fileUrl': res.data.url,
  555. 'fileName': res.data.name
  556. })
  557. console.log(JSON.stringify(self.voice))
  558. //self.textParseUrlIps(res.data.url);
  559. // self.newData.imgList.push(res.data.url);
  560. } else {
  561. uni.showToast({
  562. title: res.msg,
  563. icon: "none",
  564. mask: true,
  565. duration: 2000
  566. });
  567. }
  568. },
  569. fail: err => {
  570. uni.hideLoading()
  571. },
  572. complete: () => {}
  573. });
  574. },
  575. }
  576. }
  577. </script>
  578. <style lang="stylus" scoped>
  579. .inspectAdd {
  580. height: 100%;
  581. display flex;
  582. box-sizing: border-box;
  583. padding-bottom: 160rpx;
  584. box-sizing: border-box;
  585. #bgColor-A {
  586. color: #FFD400;
  587. }
  588. #bgColor-B {
  589. color: #FF8C00;
  590. }
  591. #bgColor-C {
  592. color: #E11608;
  593. }
  594. .tip {
  595. width: 750rpx;
  596. height: 80rpx;
  597. background: rgba(1, 131, 250, 0.2);
  598. font-weight: normal;
  599. font-size: 28rpx;
  600. color: #0183FA;
  601. line-height: 80rpx;
  602. text-align: center;
  603. }
  604. .items {
  605. width: 690rpx;
  606. min-height: 165rpx;
  607. background: #FFFFFF;
  608. border-radius: 20rpx 20rpx 20rpx 20rpx;
  609. margin: 20rpx 0 0 30rpx;
  610. .items-li {
  611. display: flex;
  612. justify-content: space-between;
  613. align-items: center;
  614. padding: 0 30rpx;
  615. box-sizing: border-box;
  616. border-bottom: 1rpx solid #E0E0E0;
  617. >view:nth-of-type(1) {
  618. font-size: 30rpx;
  619. color: #333333;
  620. line-height: 80rpx;
  621. text-align: left;
  622. }
  623. >view:nth-of-type(2) {
  624. font-size: 28rpx;
  625. color: #666666;
  626. line-height: 80rpx;
  627. text-align: left;
  628. display: flex;
  629. justify-content: space-between;
  630. align-items: center;
  631. }
  632. }
  633. .items-t {
  634. border-bottom: 1rpx solid #E0E0E0;
  635. height: 80rpx;
  636. display: flex;
  637. justify-content: flex-start;
  638. align-items: center;
  639. padding: 0 30rpx;
  640. box-sizing: border-box;
  641. .items-t-l {
  642. width: 175rpx;
  643. height: 50rpx;
  644. background: #E11608;
  645. border-radius: 50rpx 50rpx 50rpx 50rpx;
  646. font-size: 30rpx;
  647. color: #FFFFFF;
  648. line-height: 50rpx;
  649. text-align: center;
  650. margin-right: 14rpx;
  651. }
  652. .items-t-r {
  653. font-size: 30rpx;
  654. color: #333333;
  655. line-height: 42rpx;
  656. text-align: left;
  657. overflow: hidden;
  658. text-overflow: ellipsis;
  659. white-space: nowrap;
  660. flex: 1;
  661. }
  662. .items-t-img {
  663. width: 24rpx;
  664. height: 24rpx;
  665. margin-left: 76rpx;
  666. margin-right: 34rpx;
  667. }
  668. }
  669. .items-b {
  670. padding: 0 30rpx;
  671. box-sizing: border-box;
  672. height: 80rpx;
  673. font-size: 28rpx;
  674. color: #666666;
  675. line-height: 80rpx;
  676. text-align: left;
  677. }
  678. }
  679. .items-number {
  680. font-size: 24rpx;
  681. color: #3D3D3D;
  682. line-height: 34rpx;
  683. text-align: right;
  684. margin: 20rpx 60rpx 0 0;
  685. >text {
  686. font-size: 24rpx;
  687. color: #FF0000;
  688. line-height: 34rpx;
  689. text-align: right;
  690. }
  691. }
  692. .list {
  693. width: 750rpx;
  694. margin: 20rpx 0rpx 0;
  695. border-radius: 20rpx 20rpx 20rpx 20rpx;
  696. overflow: hidden;
  697. .list-li {
  698. display: flex;
  699. justify-content: space-between;
  700. align-items: center;
  701. padding: 0 30rpx;
  702. box-sizing: border-box;
  703. border-bottom: 1rpx solid #E0E0E0;
  704. background: #fff;
  705. >view:nth-of-type(1) {
  706. font-size: 30rpx;
  707. color: #333333;
  708. line-height: 80rpx;
  709. text-align: left;
  710. overflow: hidden;
  711. text-overflow: ellipsis;
  712. white-space: nowrap;
  713. }
  714. >view:nth-of-type(2) {
  715. font-size: 28rpx;
  716. color: #666666;
  717. line-height: 80rpx;
  718. text-align: left;
  719. display: flex;
  720. justify-content: space-between;
  721. align-items: center;
  722. >img {
  723. width: 30rpx;
  724. height: 30rpx;
  725. margin-left: 10rpx;
  726. }
  727. }
  728. }
  729. .hidden-content {
  730. width: 630rpx;
  731. min-height: 200rpx;
  732. background: #F5F5F5;
  733. border-radius: 20rpx 20rpx 20rpx 20rpx;
  734. margin: 20rpx 30rpx 0;
  735. padding: 20rpx;
  736. box-sizing: border-box;
  737. font-size: 28rpx;
  738. color: #666666;
  739. line-height: 39rpx;
  740. text-align: left;
  741. }
  742. .photo {
  743. display: flex;
  744. justify-content: flex-start;
  745. flex-wrap: wrap;
  746. margin-top: 20rpx;
  747. padding: 0 30rpx;
  748. box-sizing: border-box;
  749. >img {
  750. width: 150rpx;
  751. height: 150rpx;
  752. border-radius: 10rpx 10rpx 10rpx 10rpx;
  753. margin: 0 10rpx 10rpx 0;
  754. }
  755. >img:nth-of-type(4) {
  756. margin-right: 0;
  757. }
  758. }
  759. .describe {
  760. width: 750rpx;
  761. background: #fff;
  762. overflow: hidden;
  763. .describe-n {
  764. width: 690rpx;
  765. min-height: 180rpx;
  766. border-radius: 10rpx 10rpx 10rpx 10rpx;
  767. border: 1rpx solid #E0E0E0;
  768. margin: 40rpx;
  769. padding: 22rpx;
  770. box-sizing: border-box;
  771. background: #F5F5F5;
  772. }
  773. }
  774. .check-for-img-max-box {
  775. padding: 20px 28rpx;
  776. box-sizing: border-box;
  777. background: #fff;
  778. .left-title-p {
  779. width: 100%;
  780. text-align: left;
  781. font-size: 30rpx;
  782. font-family: PingFang SC-Medium, PingFang SC;
  783. font-weight: 400;
  784. color: #333333;
  785. line-height: 80rpx;
  786. }
  787. .right-img-box {
  788. .img-box {
  789. display inline-block;
  790. height: 150rpx;
  791. width: 150rpx;
  792. position relative;
  793. margin: 0 10rpx 20rpx 0;
  794. border-radius 10rpx;
  795. overflow hidden;
  796. .img-data {
  797. height: 150rpx;
  798. width: 150rpx;
  799. }
  800. .position-img {
  801. position absolute;
  802. right: 0;
  803. top: 0;
  804. width: 36rpx;
  805. height: 36rpx;
  806. }
  807. }
  808. .img-box:nth-of-type(4n+4) {
  809. margin-right: 0rpx;
  810. }
  811. .add-button {
  812. margin: 0 0rpx 20rpx 0;
  813. border-radius 10rpx;
  814. overflow hidden;
  815. display inline-block;
  816. height: 150rpx;
  817. width: 150rpx;
  818. }
  819. }
  820. }
  821. .list-li:last-of-type {
  822. border: none;
  823. }
  824. .radio_group {
  825. display: flex;
  826. justify-content: flex-end;
  827. padding: 32rpx 30rpx 22rpx 30rpx;
  828. box-sizing: border-box;
  829. border-bottom: 1rpx solid #E0E0E0;
  830. .radio {
  831. display: flex;
  832. justify-content: flex-start;
  833. align-items: center;
  834. >img {
  835. width: 30rpx;
  836. height: 30rpx;
  837. margin-right: 34rpx;
  838. }
  839. >text {
  840. font-size: 30rpx;
  841. color: #333333;
  842. line-height: 42rpx;
  843. text-align: left;
  844. }
  845. }
  846. .radio:nth-of-type(1) {
  847. margin-right: 54rpx;
  848. }
  849. }
  850. }
  851. .srearch {
  852. display: flex;
  853. justify-content: space-between;
  854. align-items: center;
  855. .srearch-l {
  856. font-size: 30rpx;
  857. color: #333333;
  858. line-height: 100rpx;
  859. text-align: left;
  860. }
  861. .srearch-r {
  862. width: 30rpx;
  863. height: 30rpx;
  864. margin-right: 0rpx;
  865. }
  866. }
  867. /* 语音备注 */
  868. .voice {
  869. width: 750rpx;
  870. min-height: 100rpx;
  871. background: #FFFFFF;
  872. border-radius: 20rpx 20rpx 20rpx 20rpx;
  873. overflow: hidden;
  874. .voice_t {
  875. height: 100rpx;
  876. display: flex;
  877. justify-content: space-between;
  878. align-items: center;
  879. padding: 0 30rpx;
  880. box-sizing: border-box;
  881. border-top: 2rpx solid #E0E0E0;
  882. .voice_t_t {
  883. width: 100%;
  884. display: flex;
  885. justify-content: space-between;
  886. >text:nth-of-type(1) {
  887. font-size: 30rpx;
  888. color: #333333;
  889. line-height: 100rpx;
  890. }
  891. >text:nth-of-type(2) {
  892. font-size: 28rpx;
  893. color: #999999;
  894. line-height: 100rpx;
  895. }
  896. }
  897. .voice_t_b {
  898. width: 100%;
  899. font-size: 30rpx;
  900. font-family: PingFang SC-Medium, PingFang SC;
  901. font-weight: 400;
  902. color: #333333;
  903. line-height: 100rpx;
  904. text-align: left;
  905. }
  906. }
  907. .voice_b {
  908. display flex;
  909. justify-content flex-start;
  910. align-items center;
  911. margin-bottom: 20rpx;
  912. padding: 0 30rpx;
  913. box-sizing: border-box;
  914. .voice_b_l {
  915. width: 400rpx;
  916. height: 40rpx;
  917. background: #0183FA;
  918. border-radius: 10rpx;
  919. display flex;
  920. justify-content flex-start;
  921. align-items center;
  922. font-size: 24rpx;
  923. color: #FFFFFF;
  924. line-height: 30rpx;
  925. text-align: left;
  926. >img {
  927. width: 20rpx;
  928. height: 20rpx;
  929. margin-left: 16rpx;
  930. margin-right: 20rpx;
  931. }
  932. }
  933. .voice_b_r {
  934. width: 28rpx;
  935. height: 28rpx;
  936. margin-left: 20rpx;
  937. }
  938. }
  939. .voice-btn {
  940. width: 150rpx;
  941. height: 150rpx;
  942. position: fixed;
  943. right: 24rpx;
  944. bottom: 176rpx;
  945. >img {
  946. width: 150rpx;
  947. height: 150rpx;
  948. position: absolute;
  949. }
  950. >text {
  951. font-size: 24rpx;
  952. color: #999999;
  953. line-height: 30rpx;
  954. text-align: center;
  955. position: absolute;
  956. top: 84rpx;
  957. left: 26rpx;
  958. }
  959. }
  960. }
  961. }
  962. .sub-btn {
  963. display: flex;
  964. justify-content: space-between;
  965. position: fixed;
  966. bottom: 30rpx;
  967. width: 750rpx;
  968. padding: 0 46rpx;
  969. box-sizing: border-box;
  970. >img {
  971. width: 130rpx;
  972. height: 130rpx;
  973. }
  974. }
  975. </style>