report.vue 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375
  1. <template>
  2. <view class="mb-5">
  3. <view class="m-3" v-if="propData.patient">
  4. <view class="centerY mt-3">
  5. <view class="bule_line"></view>
  6. <text class="font-bold text-dark ml-2 fs-16 line-height1">基本信息</text>
  7. </view>
  8. <!-- 基本信息 -->
  9. <view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;">
  10. <view class="w-50 mb-2 d-inline-block">
  11. 姓名:<span class="font-bold text-dark fs-14">{{propData.patient.username||''}}</span>
  12. </view>
  13. <view class="w-50 mb-2 d-inline-block">
  14. 性别:{{propData.patient.sex==1?'男':'女'||''}}
  15. </view>
  16. <view class="w-50 mb-2 d-inline-block">
  17. 年龄:{{$mf.getIDCardInfo(propData.patient.idCard).age||''}}
  18. </view>
  19. <view class="w-50 mb-2 d-inline-block">
  20. 慢病类型:<span
  21. class="font-bold text-dark fs-14">{{CHRONIC_DISEASE_TYPE[propData.patient.chronicDiseaseType-1].label}}</span>
  22. </view>
  23. <view class="w-50 mb-2 d-inline-block" v-if="1">
  24. 糖尿病病龄:<span class="font-bold text-dark fs-14">{{propData.patient.tnbIllTime
  25. ? (
  26. (new Date().getTime() - new Date(propData.patient.tnbIllTime).getTime()) /
  27. 31536000000
  28. ).toFixed(0)
  29. : ''}}年</span>
  30. </view>
  31. <view class="w-50 mb-2 d-inline-block" v-if="1">
  32. 高血压病龄:<span class="font-bold text-dark fs-14">{{propData.patient.gxyIllTime
  33. ? (
  34. (new Date().getTime() - new Date(propData.patient.gxyIllTime).getTime()) /
  35. 31536000000
  36. ).toFixed(0)
  37. : ''}}年</span>
  38. </view>
  39. <view class="position-absolute d-flex position-relative"
  40. style="right: 20%;top:0 ;transform: rotate(31deg);z-index:1">
  41. <view v-show="propData.patient.healthIndex!==0" class="centerd position-absolute " :style="{width: '150rpx',height: '150rpx',borderRadius: '50%',opacity:1,
  42. ...selectColor(propData.patient.healthIndex)}">
  43. <view class="text-center">
  44. <view class="fs-12">健康指数</view>
  45. <view class="font-bold fs-20 ">
  46. {{propData.patient.healthIndex?1000-propData.patient.healthIndex||0:"未计算"}}
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="">
  53. <view class="centerY mt-3 mb-2" v-if="propData.gljb.gxyVisit&&propData.gljb.gxyVisit.id">
  54. <view class="bule_line"></view>
  55. <text class="font-bold text-dark ml-2 fs-16 line-height1">高血压管理等级</text>
  56. </view>
  57. <view class="centerY" v-if="propData.gljb.gxyVisit&&propData.gljb.gxyVisit.id">
  58. <view class="fs-12 w-75 mr-2"
  59. style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
  60. <view class="text-center fs-12 font-bold "
  61. style="padding:16rpx 0;background-color:#1890ff;color:#fff">
  62. {{propData.gljb.gxyVisit.gljb}}
  63. </view>
  64. <view class="fs-12" style="padding:8px;">
  65. <view v-if="propData.gljb.gxyVisit.gljb=='一级管理'" style="text-indent: 20px;">
  66. 没有其他危险因素的患者,至少三个月随访一次,检测病情控制情况以健康教育和非药物干预为主。
  67. </view>
  68. <view v-if="propData.gljb.gxyVisit.gljb=='二级管理'" style="text-indent: 20px;">
  69. 一级高血压伴有一到两个危险因素和二级高血压伴有两个一级,两个以下危险因素患者至少两个月随访一次,监测病情控制情况以健康教育和用药指导为重点,有针对性地指导和规范用药。
  70. </view>
  71. <view v-if="propData.gljb.gxyVisit.gljb=='三级管理'" style="text-indent: 20px;">
  72. 患者至少一个月随访一次,病情,控制情况,重点就是要加强规律治疗,注意药物疗效以及副作用,提出把器官损害预警以及评价,有针对性地健康教育和行为干预,让患者地血压降到目标水平,一般情况下要严格地控制危险因素,而且要明确高血压患者有哪些危险因素。
  73. </view>
  74. </view>
  75. </view>
  76. <view class="w-25 ml-2 bg-white overflow" style="border-radius: 6rpx;">
  77. <view class="text-center fs-12 font-bold "
  78. style="padding:10rpx 0;background-color:#1890ff;color:#fff">
  79. 预约信息
  80. </view>
  81. <view class="mt-2 px-2" style="color: #909399;">
  82. 下次预约
  83. </view>
  84. <view class="mt-1 px-2">
  85. {{propData.gljb.gxyVisit.xcyy}}
  86. </view>
  87. <view class="mt-2 px-2" style="color: #909399;">
  88. 随访医生
  89. </view>
  90. <view class="mt-1 mb-2 px-2">
  91. {{propData.gljb.gxyVisit.sfys}}
  92. </view>
  93. </view>
  94. </view>
  95. <view class="centerY mt-3 mb-2" v-if="propData.gljb.tnbVisit&&propData.gljb.tnbVisit.id">
  96. <view class="bule_line"></view>
  97. <text class="font-bold text-dark ml-2 fs-16 line-height1">血糖管理等级</text>
  98. </view>
  99. <view class="centerY" v-if="propData.gljb.tnbVisit&&propData.gljb.tnbVisit.id">
  100. <view class="fs-12 w-75 mr-2"
  101. style="line-height:1.5;border: 1px solid #1890ff;border-radius:4px;background:#fff;">
  102. <view class="fs-12" style="line-height:1.5">
  103. <view class="text-center fs-12 font-bold mb-1 "
  104. style="padding:16rpx 0;background-color:#1890ff;color:#fff">
  105. {{propData.gljb.tnbVisit.gljb}}
  106. </view>
  107. <view class="" style="padding:8px;">
  108. <view v-if="propData.gljb.tnbVisit.gljb!=='常规管理'" style="text-indent: 20px;">
  109. 3个月随访一次,监测血糖控制情况,空腹血糖2周进行一次就检测,合理用药,强化非药物治疗,提高患者自我管理和自我检测水平。
  110. <span v-if="0>=5">眼底、糖足、肾病并发症筛查每年至少一次。</span>
  111. </view>
  112. <view v-if="propData.gljb.tnbVisit.gljb=='强化管理'" style="text-indent: 20px;">
  113. 每月随访一次,在常规管理基础上强化规范用药和并发症检查,突出空腹和餐后血糖监测,每周至少一次。眼底、糖足、肾病等并发症检查每年至少2次,加强健康教育和生活指导。
  114. </view>
  115. </view>
  116. </view>
  117. </view>
  118. <view class="w-25 ml-2 bg-white overflow" style="border-radius: 6rpx;">
  119. <view class="text-center fs-12 font-bold "
  120. style="padding:10rpx 0;background-color:#1890ff;color:#fff">
  121. 预约信息
  122. </view>
  123. <view class="mt-2 px-2" style="color: #909399;">
  124. 下次预约
  125. </view>
  126. <view class="mt-1 px-2">
  127. {{propData.gljb.tnbVisit.xcyy}}
  128. </view>
  129. <view class="mt-2 px-2" style="color: #909399;">
  130. 随访医生
  131. </view>
  132. <view class="mt-1 mb-2 px-2">
  133. {{propData.gljb.tnbVisit.sfys}}
  134. </view>
  135. </view>
  136. </view>
  137. </view>
  138. <!-- 身体特征 -->
  139. <view class="centerY mt-3">
  140. <view class="bule_line"></view>
  141. <text class="font-bold text-dark ml-2 fs-16 line-height1">体征</text>
  142. </view>
  143. <view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;">
  144. <view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
  145. <view id="echarts1" class="echarts"></view>
  146. <view id="echarts2" class="echarts"></view>
  147. </view>
  148. <view class="fs-10 d-flex mt-2" style="color: #909092;">
  149. <view class="space-nowrap">
  150. 提示:
  151. </view>
  152. <view class="">
  153. <view class="">
  154. 1、身体体质指数范围 偏瘦<= 18.4,正常 18.5 ~ 23.9,过重 24.0 ~ 27.9,肥胖>= 28.0
  155. </view>
  156. <view class="mt-1">
  157. 2、血压心率 收缩压成人 65岁以上 90~149(mmHg)65岁以下 90~139(mmHg),舒张压 60~90(mmHg)
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <view class="centerY mt-3" v-if="propData.check">
  163. <view class="bule_line"></view>
  164. <text class="font-bold text-dark ml-2 fs-16 line-height1">实验检查</text>
  165. </view>
  166. <view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;"
  167. v-if="propData.check&&propData.check.length>0">
  168. <view class="mb-2">
  169. <span class="fs-14 font-bold text-dark mb-2">综合数据</span>
  170. <span class="text-gry fs-12">({{propData.check[propData.check.length-1].createTime}})</span>
  171. </view>
  172. <view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
  173. <view class="centerY">
  174. <view class="card-boxshow centerY px-2 py-1 w-50 fs-12"
  175. v-if="propData.check[propData.check.length-1].bloodGlucose">
  176. <image class="w-25" src="@/static/img/other/xuet.png" mode="widthFix"></image>
  177. <view class="ml-2">
  178. <view class="text-dark">
  179. 空腹血糖
  180. </view>
  181. <view class="text-dark">
  182. {{propData.check[propData.check.length-1].bloodGlucose||'未测量'}} <span
  183. v-if="propData.check[propData.check.length-1].bloodGlucose"
  184. style="color:#A7A7A7 "> mmol/L</span>
  185. </view>
  186. </view>
  187. </view>
  188. <view class="card-boxshow centerY px-2 py-1 w-50 ml-3 fs-12"
  189. v-if="propData.check[propData.check.length-1].chol">
  190. <image class="w-25" src="@/static/img/other/xy.png" mode="widthFix"></image>
  191. <view class="ml-2">
  192. <view class="text-dark">
  193. 总胆固醇
  194. </view>
  195. <view class="text-dark">
  196. {{propData.check[propData.check.length-1].chol||'未测量'}} <span
  197. v-if="propData.check[propData.check.length-1].chol" style="color:#A7A7A7 ">
  198. mmol/L</span>
  199. </view>
  200. </view>
  201. </view>
  202. </view>
  203. <view class="mt-2 centerY">
  204. <view class="card-boxshow centerY px-2 py-1 w-50 fs-12"
  205. v-if="propData.check[propData.check.length-1].ua">
  206. <image class="w-25" src="@/static/img/other/xtfw.png" mode="widthFix"></image>
  207. <view class="ml-2">
  208. <view class="text-dark">
  209. 尿酸
  210. </view>
  211. <view class="text-dark">
  212. {{propData.check[0].ua||'未测量'}} <span v-if="propData.check[0].ua"
  213. style="color:#A7A7A7 "> μmol/L</span>
  214. </view>
  215. </view>
  216. </view>
  217. <view class="card-boxshow centerY px-2 py-1 ml-3 w-50 fs-12" v-if="propData.check[0].spo2">
  218. <image class="w-25" src="@/static/img/other/xlfw.png" mode="widthFix"></image>
  219. <view class="ml-2">
  220. <view class="text-dark">
  221. 血氧
  222. </view>
  223. <view class="text-dark">
  224. {{propData.check[0].spo2||'未测量'}} <span v-if="propData.check[0].spo2"
  225. style="color:#A7A7A7 "> mmHg</span>
  226. </view>
  227. </view>
  228. </view>
  229. </view>
  230. </view>
  231. <view class="fs-14 font-bold text-dark mb-2">
  232. 血/尿检查
  233. </view>
  234. <view class=" p-3" style="background-color: #F5F9FF;border-radius: 16rpx;">
  235. <view class="fs-14 font-bold text-dark mb-2"
  236. v-if="echarts3data.data1.length||echarts3data.data2.length||echarts3data.data3.length">
  237. 尿液ACR分析
  238. </view>
  239. <view class=""
  240. v-if="echarts3data.data1.length||echarts3data.data2.length||echarts3data.data3.length">
  241. <view id="echarts3" class="echarts"></view>
  242. </view>
  243. <view class="fs-14 font-bold text-dark my-2"
  244. v-if="echarts3data.data4.length||echarts3data.data5.length||echarts3data.data6.length">
  245. 肾功能检测
  246. </view>
  247. <view class="mt-2 "
  248. v-if="echarts3data.data4.length||echarts3data.data5.length||echarts3data.data6.length">
  249. <view id="echarts4" class="echarts"></view>
  250. </view>
  251. <!-- <view class="mt-2 centerY">
  252. <view class="card-boxshow centerY px-2 py-1 w-50 fs-12">
  253. <image class="w-25" src="@/static/other/xy.png" mode="widthFix"></image>
  254. <view class="ml-2">
  255. <view class="text-dark">
  256. 尿素氮
  257. </view>
  258. <view class="text-dark">
  259. 200.2 <span style="color:#A7A7A7 "> mmol/L</span>
  260. </view>
  261. </view>
  262. </view>
  263. <view class=" px-2 py-1 ml-3 w-50 fs-12">
  264. </view>
  265. </view>
  266. -->
  267. <view class="fs-14 font-bold text-dark my-2"
  268. v-if="echarts3data.data7.length||echarts3data.data8.length||echarts3data.data9.length">
  269. 血脂检测
  270. </view>
  271. <view class="mt-2 centerY"
  272. v-if="echarts3data.data7.length||echarts3data.data8.length||echarts3data.data9.length">
  273. <view id="echarts5" class="echarts"></view>
  274. </view>
  275. <view class="text-center mt-3 fs-10">
  276. </view>
  277. </view>
  278. </view>
  279. <!-- 眼底 -->
  280. <view class="centerY mt-3" v-if="propData.eye&&propData.eye.id">
  281. <view class="bule_line"></view>
  282. <text class="font-bold text-dark ml-2 fs-16 line-height1">眼底检查</text>
  283. </view>
  284. <view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;" v-if="propData.eye&&propData.eye.id">
  285. <view class="bg-white" style="border-radius: 16rpx;">
  286. <view class="centerY mb-2 text-gry">
  287. <text class="iconfont Clock fs-20"></text>
  288. <view class="">
  289. {{propData.eye.createTime}}
  290. </view>
  291. <view class="">
  292. <span :class="{'text-green':propData.eye.isRead==1}">
  293. ({{propData.eye.isRead==0?'未阅片':'已阅片'}})
  294. </span>
  295. </view>
  296. </view>
  297. <view class="">
  298. <view class="centerY">
  299. <view class="w-50 mx-1">
  300. <view class="centerY">
  301. <image class="w-15" src="@/static/img/other/zuo.png" mode="widthFix"></image>
  302. <view class="d-inline-block ml-1 fs-14 text-dark">
  303. 左眼
  304. </view>
  305. </view>
  306. <view class="border mt-2"
  307. style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
  308. <view class="picbox1"
  309. style="border: 1px dotted #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
  310. <view style="background: #F6F9FE;" class="picimg1">
  311. <image @click="pic( propData.eye.leftImg || propData.eye.localLeftImg
  312. ? img_host +
  313. (accessType == 1
  314. ? propData.eye.leftImg
  315. : propData.eye.localLeftImg)
  316. : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
  317. propData.eye.leftImg || propData.eye.localLeftImg
  318. ? img_host +
  319. (accessType == 1
  320. ? propData.eye.leftImg
  321. : propData.eye.localLeftImg)
  322. : '@/static/img/other/you.png'
  323. " mode="scaleToFill"></image>
  324. </view>
  325. </view>
  326. </view>
  327. </view>
  328. <view class="w-50 mx-2">
  329. <view class="centerY">
  330. <image class="w-15" src="@/static/img/other/you.png" mode="widthFix"></image>
  331. <view class="d-inline-block ml-1 fs-14 text-dark">
  332. 右眼
  333. </view>
  334. </view>
  335. <view class="border mt-2"
  336. style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
  337. <view class="picbox1"
  338. style="border: 1px dotted #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
  339. <view style="background: #F6F9FE;" class="picimg1">
  340. <image @click="pic( propData.eye.rightImg || propData.eye.localRightImg
  341. ? img_host +
  342. (accessType == 1
  343. ? propData.eye.ightImg
  344. : propData.eye.localRightImg)
  345. : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
  346. propData.eye.rightImg || propData.eye.localRightImg
  347. ? img_host +
  348. (accessType == 1
  349. ? propData.eye.ightImg
  350. : propData.eye.localRightImg)
  351. : '@/static/img/other/you.png'" mode="scaleToFill"></image>
  352. </view>
  353. </view>
  354. </view>
  355. </view>
  356. </view>
  357. <view class="mt-3 p-2"
  358. style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
  359. <view class="centerY">
  360. <image class="w-15" src="@/static/img/other/zjjy.png" mode="widthFix"></image>
  361. <view class="fs-14 font-bold ml-2 space-nowrap">
  362. 检测医院
  363. </view>
  364. <view class=" ml-2 fs-12" style="color: #868687;">
  365. {{hospital.hospitalName||'暂无医院信息'}}
  366. </view>
  367. </view>
  368. <view class="centerY mt-2">
  369. <image class="w-15" src="@/static/img/other/jcyy.png" mode="widthFix"></image>
  370. <view class="fs-14 font-bold ml-2 space-nowrap">
  371. 专家建议
  372. </view>
  373. <view v-if="propData.eye.isRead==1" class="ml-2 fs-12" style="color: #868687;">
  374. <span>左眼:{{propData.eye.leftNote||'无'}};</span>
  375. <span>右眼:{{propData.eye.rightNote||'无'}}</span>
  376. </view>
  377. <view v-if="propData.eye.isRead==0" class="ml-2 fs-12" style="color: #868687;">
  378. 暂未阅片
  379. </view>
  380. </view>
  381. </view>
  382. </view>
  383. <view class="text-center text-gry2 fs-10 mt-2">
  384. 注:本报告内容只针对眼底照片可见范围
  385. </view>
  386. </view>
  387. </view>
  388. <!-- 用药 -->
  389. <view class="centerY mt-3" v-if="propData.medicinal&&propData.medicinal.length>0">
  390. <view class="bule_line"></view>
  391. <text class="font-bold text-dark ml-2 fs-16 line-height1">用药情况</text> <span
  392. class="text-gry">(最近随访用药)</span>
  393. </view>
  394. <view class="card mb-2 fs-14 mt-3 p-3" style="color: #818181;">
  395. <view class="">
  396. <view class="mtable-title centerY bg-primary text-white fs-12">
  397. <view class="text-left" style="width: 23%;">
  398. 药名
  399. </view>
  400. <view class=" text-center" style="width: 15%;">
  401. 剂量
  402. </view>
  403. <view class="w-10 text-center">
  404. 用法
  405. </view>
  406. <view class="text-center" style="width: 17%;">
  407. 用药频次
  408. </view>
  409. <view class="text-center" style="width: 17%;">
  410. 不良反应
  411. </view>
  412. <view class=" text-center" style="width: 17%;">
  413. 用药类型
  414. </view>
  415. </view>
  416. <view v-if="propData.medicinal&&propData.medicinal.length==0">
  417. <Empty title="此次随访没有用药" />
  418. </view>
  419. <view v-if="propData.medicinal&&propData.medicinal.length>0" class="mtable-body-item centerY fs-12"
  420. v-for="(item2,index2) in propData.medicinal" style="color: #868687;">
  421. <uni-tooltip :content="item2.name" style="color: #818181;width: 23%;">
  422. <view class="text-left text-view2">
  423. {{item2.name }}
  424. </view>
  425. </uni-tooltip>
  426. <view class=" text-center" style="width: 15%;">
  427. {{item2.unit + item2.medicinalUnit}}
  428. </view>
  429. <view class="w-10 text-center">
  430. {{item2.medicinalUse||'未知'}}
  431. </view>
  432. <view class="text-center" style="width: 17%;">
  433. {{item2.medicinalInterval||'未知'}}
  434. </view>
  435. <view class="text-center" style="width: 17%;">
  436. {{item2.untowardReaction||'无'}}
  437. </view>
  438. <view class="text-center" style="width: 17%;">
  439. {{item2.type=="Tnb"?'糖尿病':item2.type=="Gxy"?'高血压':'未知类型'}}
  440. </view>
  441. </view>
  442. </view>
  443. </view>
  444. </view>
  445. </view>
  446. </template>
  447. <script>
  448. import Empty from '@/component/empty/empty.vue'
  449. import {
  450. config
  451. } from '@/static/js/defult_value.js'
  452. const healthIndex = {
  453. error: 600,
  454. warning: 750,
  455. success: 1000,
  456. }
  457. import {
  458. CHRONIC_DISEASE_TYPE,
  459. } from '@/static/js/defult_value.js'
  460. export default {
  461. components: {
  462. Empty
  463. },
  464. name: 'Report',
  465. props: {
  466. propData: {
  467. type: Object,
  468. default () {
  469. return {
  470. patient: {},
  471. check: {},
  472. checkResult: {},
  473. eye: {},
  474. medicinal: [],
  475. physical: {},
  476. yearCheck: []
  477. }
  478. },
  479. },
  480. },
  481. data() {
  482. return {
  483. CHRONIC_DISEASE_TYPE,
  484. config,
  485. echarts1data: {},
  486. echarts3data: {},
  487. accessType: 1,
  488. img_host: '',
  489. hospital: {}
  490. };
  491. },
  492. watch: {
  493. propData: {
  494. handler(val) {
  495. this.settingData()
  496. this.getifoss();
  497. },
  498. },
  499. },
  500. created() {
  501. this.find_hospital()
  502. },
  503. methods: {
  504. async find_hospital() {
  505. let idCard = uni.getStorageSync('idCard')
  506. let {
  507. data,
  508. code
  509. } = await this.$api.find_hospital({
  510. idCard
  511. })
  512. if (code == 0) {
  513. this.hospital = data
  514. uni.stopPullDownRefresh()
  515. } else {
  516. uni.hideLoading();
  517. uni.stopPullDownRefresh()
  518. }
  519. },
  520. async pic(url) {
  521. uni.previewImage({
  522. urls: [url],
  523. longPressActions: {
  524. itemList: ['发送给朋友', '保存图片', '收藏'],
  525. success: function(data) {
  526. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  527. },
  528. fail: function(err) {
  529. console.log(err.errMsg);
  530. }
  531. }
  532. });
  533. },
  534. async getifoss() {
  535. let idCard = uni.getStorageSync('idCard')
  536. let {
  537. data,
  538. code,
  539. count
  540. } = await this.$api.ifoss({
  541. idCard
  542. })
  543. if (code == 0) {
  544. this.accessType = data
  545. let configData = getApp().globalData.configData
  546. data == 1 ?
  547. this.img_host = configData.img_prod_host :
  548. this.img_host = configData.img_local_host
  549. uni.hideLoading();
  550. uni.stopPullDownRefresh()
  551. } else {
  552. this.status = 'more';
  553. uni.hideLoading();
  554. uni.stopPullDownRefresh()
  555. }
  556. },
  557. settingData() {
  558. let check = this.propData.check;
  559. let physical = this.propData.physical;
  560. this.echarts1data = {
  561. time: [],
  562. data1: [],
  563. data2: [],
  564. data3: [],
  565. data4: [],
  566. data5: [],
  567. data6: [],
  568. data7: [],
  569. data8: [],
  570. data9: []
  571. }
  572. this.echarts3data = {
  573. time: [],
  574. data1: [],
  575. data2: [],
  576. data3: [],
  577. data4: [],
  578. data5: [],
  579. data6: [],
  580. data7: [],
  581. data8: [],
  582. data9: []
  583. }
  584. if (check && check.length) {
  585. check.reverse().map((item, index) => {
  586. this.echarts3data.time.push(item.createTime)
  587. this.echarts3data['data1'].push(item.urine1)
  588. this.echarts3data['data2'].push(item.urine2)
  589. this.echarts3data['data3'].push(item.urine3)
  590. this.echarts3data['data4'].push(item.kidney1)
  591. this.echarts3data['data5'].push(item.kidney2)
  592. this.echarts3data['data6'].push(item.kidney3)
  593. this.echarts3data['data7'].push(item.bloodFat1)
  594. this.echarts3data['data8'].push(item.bloodFat3)
  595. this.echarts3data['data9'].push(item.bloodFat4)
  596. })
  597. if (this.echarts3data.data1.length || this.echarts3data.data2.length || this.echarts3data.data3
  598. .length) {
  599. this.getdom('echarts3', () => {
  600. this.chartOption3(this.echarts3data, 'echarts3');
  601. })
  602. }
  603. if (this.echarts3data.data4.length || this.echarts3data.data5.length || this.echarts3data.data6
  604. .length) {
  605. this.getdom('echarts4', () => {
  606. this.chartOption4(this.echarts3data, 'echarts4');
  607. })
  608. }
  609. if (this.echarts3data.data7.length || this.echarts3data.data8.length || this.echarts3data.data9
  610. .length) {
  611. this.getdom('echarts5', () => {
  612. this.chartOption5(this.echarts3data, 'echarts5');
  613. })
  614. }
  615. }
  616. if (physical && physical.length) {
  617. physical.reverse().map((item) => {
  618. this.echarts1data['data1'].push(item.height)
  619. this.echarts1data['data2'].push(item.weight)
  620. this.echarts1data['data3'].push(item.bmi)
  621. this.echarts1data['data4'].push(item.shrink)
  622. this.echarts1data['data5'].push(item.diastole)
  623. this.echarts1data['data6'].push(item.pulse)
  624. this.echarts1data['time'].push(item.createTime)
  625. })
  626. if (this.echarts1data.data1.length || this.echarts1data.data2.length || this.echarts1data.data3
  627. .length) {
  628. this.getdom('echarts1', () => {
  629. this.chartOption1(this.echarts1data, 'echarts1');
  630. })
  631. if (this.echarts1data.data4.length || this.echarts1data.data5.length || this.echarts1data.data6
  632. .length) {
  633. this.getdom('echarts2', () => {
  634. this.chartOption2(this.echarts1data, 'echarts2');
  635. })
  636. }
  637. }
  638. }
  639. },
  640. getdom(dom, cb) {
  641. let timer = setInterval(() => {
  642. if (document.getElementById(dom)) {
  643. clearInterval(timer)
  644. cb && cb()
  645. }
  646. }, 300)
  647. },
  648. selectColor(val) {
  649. // console.log(this.information.info)
  650. val = healthIndex.success - val
  651. return {
  652. color: val > healthIndex.warning && val <= healthIndex.success ?
  653. '#13ce66' : val > healthIndex.error && val < healthIndex.warning ?
  654. '#ffba00' : val <= healthIndex.error ?
  655. '#ff4d4f' : '',
  656. border: val > healthIndex.warning && val <= healthIndex.success ?
  657. '4rpx solid #13ce66' : val > healthIndex.error && val < healthIndex.warning ?
  658. '4rpx solid #ffba00' : val <= healthIndex.error ?
  659. '4rpx solid #ff4d4f' : '',
  660. backgroundColor: val > healthIndex.warning && val <= healthIndex.success ?
  661. 'rgba(19, 206, 102, .1)' : val > healthIndex.error && val < healthIndex.warning ?
  662. 'rgba(255, 186,0, .1)' : val <= healthIndex.error ?
  663. 'rgba(255, 77, 79, .1)' : '',
  664. }
  665. },
  666. }
  667. }
  668. </script>
  669. <script module="echarts" lang="renderjs">
  670. import * as echarts from 'echarts';
  671. export default {
  672. mounted() {
  673. console.log(echarts)
  674. // this.initChart('echarts1', this.option)
  675. // this.initChart('echarts2', this.option2)
  676. },
  677. methods: {
  678. initChart(dom, option) {
  679. let chart = echarts.init(document.getElementById(dom))
  680. chart.setOption(option)
  681. },
  682. // updateEcharts(newValue, oldValue, ownerInstance, instance) {
  683. // // 监听 service 层数据变更
  684. // myChart.setOption(newValue)
  685. // },
  686. onClick(event, ownerInstance) {
  687. // 调用 service 层的方法
  688. },
  689. check({
  690. type,
  691. value,
  692. age,
  693. sex
  694. }) {
  695. let msg = this.propData.patient
  696. let arr = this.config
  697. if (type == 'shrink' && age) {
  698. if (msg.age > 65) {
  699. if (value > arr['shrinktop'][1]) {
  700. return true
  701. }
  702. if (value < arr['shrinktop'][0]) {
  703. return true
  704. }
  705. } else {
  706. if (value > arr['shrinklow'][1]) {
  707. return true
  708. }
  709. if (value < arr['shrinklow'][0]) {
  710. return true
  711. }
  712. }
  713. }
  714. if (sex) {
  715. if (msg.sex == 1) {
  716. if (value > arr[type][0][1]) {
  717. return true
  718. }
  719. if (value < arr[type][0][0]) {
  720. return true
  721. }
  722. } else {
  723. if (value > arr[type][1][1]) {
  724. return true
  725. }
  726. if (value < arr[type][1][0]) {
  727. return true
  728. }
  729. }
  730. }
  731. if (value > arr[type][1]) {
  732. return true
  733. }
  734. if (value < arr[type][0]) {
  735. return true
  736. }
  737. return false
  738. },
  739. chartOption4({
  740. time,
  741. data4,
  742. data5,
  743. data6
  744. }) {
  745. let arr = []
  746. time = time.map((res) => this.$mf.timeTrans({
  747. time: res,
  748. format: 'M.D'
  749. }))
  750. time.map((item, index) => {
  751. if (this.check({
  752. type: 'kidney1',
  753. value: data4[index],
  754. sex: true
  755. })) {
  756. arr.push({
  757. value: [item, data4[index]],
  758. symbolSize: 10
  759. })
  760. }
  761. if (this.check({
  762. type: 'kidney2',
  763. value: data5[index],
  764. sex: true
  765. })) {
  766. arr.push({
  767. value: [item, data5[index]],
  768. symbolSize: 10
  769. })
  770. }
  771. if (this.check({
  772. type: 'kidney3',
  773. value: data6[index],
  774. sex: true
  775. })) {
  776. arr.push({
  777. value: [item, data6[index]],
  778. symbolSize: 10
  779. })
  780. }
  781. })
  782. var option = (option = {
  783. legend: {
  784. data: ['血尿酸(mol/L)', '血肌酐(mol/L)', '尿素氮(mmol/L)'],
  785. },
  786. // tooltip: {
  787. // trigger: 'axis',
  788. // axisPointer: {
  789. // type: 'cross',
  790. // label: {
  791. // backgroundColor: '#6a7985',
  792. // },
  793. // },
  794. // },
  795. grid: {
  796. top: '30%',
  797. left: '3%',
  798. right: '5%',
  799. bottom: '3%',
  800. containLabel: true,
  801. },
  802. xAxis: [{
  803. type: 'category',
  804. axisPointer: {
  805. type: 'shadow',
  806. },
  807. data: time,
  808. }, ],
  809. yAxis: [{
  810. type: 'value',
  811. }, ],
  812. series: [{
  813. name: '血尿酸(mol/L)',
  814. label: {
  815. show: true,
  816. formatter: '{@score}',
  817. position: 'top'
  818. },
  819. smooth: true,
  820. type: 'line',
  821. data: data4,
  822. },
  823. {
  824. name: '血肌酐(mol/L)',
  825. label: {
  826. show: true,
  827. formatter: '{@score}',
  828. position: 'top'
  829. },
  830. smooth: true,
  831. type: 'line',
  832. data: data5,
  833. },
  834. {
  835. name: '尿素氮(mmol/L)',
  836. label: {
  837. show: true,
  838. formatter: '{@score}',
  839. position: 'top'
  840. },
  841. smooth: true,
  842. type: 'line',
  843. data: data6,
  844. },
  845. {
  846. type: 'effectScatter',
  847. coordinateSystem: 'cartesian2d',
  848. data: arr,
  849. showEffectOn: 'render',
  850. // zlevel:1,
  851. rippleEffect: {
  852. // 波纹的绘制方式,可选'stroke'和'fill'
  853. brushType: 'fill',
  854. },
  855. hoverAnimation: false,
  856. },
  857. ],
  858. })
  859. this.initChart('echarts4', option)
  860. },
  861. chartOption5({
  862. time,
  863. data7,
  864. data8,
  865. data9
  866. }) {
  867. let arr = []
  868. time = time.map((res) => this.$mf.timeTrans({
  869. time: res,
  870. format: 'M.D'
  871. }))
  872. time.map((item, index) => {
  873. if (this.check({
  874. type: 'bloodFat1',
  875. value: data7[index]
  876. })) {
  877. arr.push({
  878. value: [item, data7[index]],
  879. symbolSize: 10
  880. })
  881. }
  882. if (this.check({
  883. type: 'bloodFat3',
  884. value: data8[index]
  885. })) {
  886. arr.push({
  887. value: [item, data8[index]],
  888. symbolSize: 10
  889. })
  890. }
  891. if (this.check({
  892. type: 'bloodFat4',
  893. value: data9[index]
  894. })) {
  895. arr.push({
  896. value: [item, data9[index]],
  897. symbolSize: 10
  898. })
  899. }
  900. })
  901. var option = (option = {
  902. legend: {
  903. data: ['甘油三酯(mmol/L)', '低密度脂蛋白(mmol/L)', '高密度脂蛋白(mmol/L)'],
  904. },
  905. // tooltip: {
  906. // trigger: 'axis',
  907. // axisPointer: {
  908. // type: 'cross',
  909. // label: {
  910. // backgroundColor: '#6a7985',
  911. // },
  912. // },
  913. // },
  914. grid: {
  915. top: '30%',
  916. left: '3%',
  917. right: '5%',
  918. bottom: '3%',
  919. containLabel: true,
  920. },
  921. xAxis: [{
  922. type: 'category',
  923. axisPointer: {
  924. type: 'shadow',
  925. },
  926. data: time,
  927. }, ],
  928. yAxis: [{
  929. type: 'value',
  930. }, ],
  931. series: [{
  932. name: '甘油三酯(mmol/L)',
  933. label: {
  934. show: true,
  935. formatter: '{@score}',
  936. position: 'top'
  937. },
  938. smooth: true,
  939. type: 'line',
  940. data: data7,
  941. },
  942. {
  943. name: '低密度脂蛋白(mmol/L)',
  944. label: {
  945. show: true,
  946. formatter: '{@score}',
  947. position: 'top'
  948. },
  949. smooth: true,
  950. type: 'line',
  951. data: data8,
  952. },
  953. {
  954. name: '高密度脂蛋白(mmol/L)',
  955. label: {
  956. show: true,
  957. formatter: '{@score}',
  958. position: 'top'
  959. },
  960. smooth: true,
  961. type: 'line',
  962. data: data9,
  963. },
  964. {
  965. type: 'effectScatter',
  966. coordinateSystem: 'cartesian2d',
  967. data: arr,
  968. showEffectOn: 'render',
  969. // zlevel:1,
  970. rippleEffect: {
  971. // 波纹的绘制方式,可选'stroke'和'fill'
  972. brushType: 'fill',
  973. },
  974. hoverAnimation: false,
  975. },
  976. ],
  977. })
  978. this.initChart('echarts5', option)
  979. },
  980. chartOption3({
  981. time,
  982. data1,
  983. data2,
  984. data3
  985. }) {
  986. // console.log({ time, data1, data2, data3 })
  987. time = time.map((res) => this.$mf.timeTrans({
  988. time: res,
  989. format: 'M.D'
  990. }))
  991. var option = (option = {
  992. legend: {
  993. data: ['肌酐(mg/dL)', '微量白蛋白(mg/L)', '尿微/肌酐(mg/g)'],
  994. },
  995. tooltip: {
  996. trigger: 'axis',
  997. axisPointer: {
  998. type: 'cross',
  999. label: {
  1000. backgroundColor: '#6a7985',
  1001. },
  1002. },
  1003. },
  1004. grid: {
  1005. top: '30%',
  1006. left: '3%',
  1007. right: '5%',
  1008. bottom: '3%',
  1009. containLabel: true,
  1010. },
  1011. xAxis: [{
  1012. type: 'category',
  1013. axisPointer: {
  1014. type: 'shadow',
  1015. },
  1016. data: time,
  1017. }, ],
  1018. yAxis: [{
  1019. type: 'value',
  1020. }, ],
  1021. series: [{
  1022. name: '肌酐(mg/dL)',
  1023. label: {
  1024. show: true,
  1025. formatter: '{@score}',
  1026. position: 'top'
  1027. },
  1028. smooth: true,
  1029. type: 'bar',
  1030. data: data1,
  1031. },
  1032. {
  1033. name: '微量白蛋白(mg/L)',
  1034. label: {
  1035. show: true,
  1036. formatter: '{@score}',
  1037. position: 'top'
  1038. },
  1039. smooth: true,
  1040. type: 'bar',
  1041. data: data2,
  1042. },
  1043. {
  1044. name: '尿微/肌酐(mg/g)',
  1045. label: {
  1046. show: true,
  1047. formatter: '{@score}',
  1048. position: 'top'
  1049. },
  1050. smooth: true,
  1051. type: 'bar',
  1052. data: data3,
  1053. },
  1054. ],
  1055. })
  1056. this.initChart('echarts3', option)
  1057. },
  1058. chartOption1({
  1059. time,
  1060. data1,
  1061. data2,
  1062. data3
  1063. }) {
  1064. let arr = []
  1065. time = time.map((res) => this.$mf.timeTrans({
  1066. time: res,
  1067. format: 'M.D'
  1068. }))
  1069. time.map((item, index) => {
  1070. if (this.check({
  1071. type: 'bmi',
  1072. value: data3[index]
  1073. })) {
  1074. arr.push({
  1075. value: [item, data3[index]],
  1076. symbolSize: 10
  1077. })
  1078. }
  1079. })
  1080. var option = (option = {
  1081. legend: {
  1082. data: ['身高', '体重', 'BMI'],
  1083. },
  1084. // tooltip: {
  1085. // trigger: 'axis',
  1086. // axisPointer: {
  1087. // type: 'cross',
  1088. // label: {
  1089. // backgroundColor: '#6a7985',
  1090. // },
  1091. // },
  1092. // },
  1093. grid: {
  1094. top: '20%',
  1095. left: '3%',
  1096. right: '5%',
  1097. bottom: '3%',
  1098. containLabel: true,
  1099. },
  1100. xAxis: [{
  1101. type: 'category',
  1102. data: time,
  1103. axisPointer: {
  1104. type: 'shadow',
  1105. },
  1106. }, ],
  1107. yAxis: [{
  1108. type: 'value',
  1109. }, ],
  1110. series: [{
  1111. name: 'BMI',
  1112. label: {
  1113. show: true,
  1114. formatter: '{@score}',
  1115. position: 'top',
  1116. },
  1117. smooth: true,
  1118. type: 'line',
  1119. data: data3,
  1120. itemStyle: {
  1121. color: '#9c5045'
  1122. },
  1123. },
  1124. {
  1125. name: '体重',
  1126. label: {
  1127. show: true,
  1128. formatter: '{@score}',
  1129. position: 'top',
  1130. },
  1131. smooth: true,
  1132. type: 'line',
  1133. barWidth: '60%',
  1134. data: data2,
  1135. itemStyle: {
  1136. color: '#e74a2d'
  1137. },
  1138. },
  1139. {
  1140. name: '身高',
  1141. label: {
  1142. show: true,
  1143. formatter: '{@score}',
  1144. position: 'top'
  1145. },
  1146. type: 'line',
  1147. data: data1,
  1148. smooth: true,
  1149. barWidth: '60%',
  1150. itemStyle: {
  1151. color: '#89b87b'
  1152. },
  1153. },
  1154. {
  1155. type: 'effectScatter',
  1156. coordinateSystem: 'cartesian2d',
  1157. data: arr,
  1158. showEffectOn: 'render',
  1159. // zlevel:1,
  1160. rippleEffect: {
  1161. // 波纹的绘制方式,可选'stroke'和'fill'
  1162. brushType: 'fill',
  1163. },
  1164. hoverAnimation: false,
  1165. },
  1166. ],
  1167. })
  1168. this.initChart('echarts1', option)
  1169. },
  1170. chartOption2({
  1171. time,
  1172. data4,
  1173. data5,
  1174. data6
  1175. }) {
  1176. // console.log(time, data4, data5, data6)
  1177. let arr = []
  1178. time = time.map((res) => this.$mf.timeTrans({
  1179. time: res,
  1180. format: 'M.D'
  1181. }))
  1182. time.map((item, index) => {
  1183. if (this.check({
  1184. type: 'shrink',
  1185. value: data4[index],
  1186. age: true
  1187. })) {
  1188. arr.push({
  1189. value: [item, data4[index]],
  1190. symbolSize: 10
  1191. })
  1192. }
  1193. if (this.check({
  1194. type: 'diastole',
  1195. value: data5[index]
  1196. })) {
  1197. arr.push({
  1198. value: [item, data5[index]],
  1199. symbolSize: 10
  1200. })
  1201. }
  1202. if (this.check({
  1203. type: 'pulse',
  1204. value: data6[index]
  1205. })) {
  1206. arr.push({
  1207. value: [item, data6[index]],
  1208. symbolSize: 10
  1209. })
  1210. }
  1211. })
  1212. var option = (option = {
  1213. legend: {
  1214. data: ['收缩压', '舒张压', '心率'],
  1215. },
  1216. // tooltip: {
  1217. // trigger: 'axis',
  1218. // axisPointer: {
  1219. // type: 'cross',
  1220. // label: {
  1221. // backgroundColor: '#6a7985',
  1222. // },
  1223. // },
  1224. // },
  1225. grid: {
  1226. top: '20%',
  1227. left: '3%',
  1228. right: '5%',
  1229. bottom: '3%',
  1230. containLabel: true,
  1231. },
  1232. xAxis: [{
  1233. type: 'category',
  1234. axisPointer: {
  1235. type: 'shadow',
  1236. },
  1237. data: time,
  1238. }, ],
  1239. yAxis: [{
  1240. type: 'value',
  1241. }, ],
  1242. series: [{
  1243. name: '收缩压',
  1244. label: {
  1245. show: true,
  1246. formatter: '{@score}',
  1247. position: 'top'
  1248. },
  1249. smooth: true,
  1250. type: 'line',
  1251. data: data4,
  1252. itemStyle: {
  1253. color: '#8e3e1f'
  1254. },
  1255. },
  1256. {
  1257. name: '舒张压',
  1258. label: {
  1259. show: true,
  1260. formatter: '{@score}',
  1261. position: 'top',
  1262. },
  1263. smooth: true,
  1264. type: 'line',
  1265. data: data5,
  1266. itemStyle: {
  1267. color: '#3c3645'
  1268. },
  1269. },
  1270. {
  1271. name: '心率',
  1272. label: {
  1273. show: true,
  1274. formatter: '{@score}',
  1275. position: 'bottom',
  1276. },
  1277. smooth: true,
  1278. type: 'line',
  1279. data: data6,
  1280. itemStyle: {
  1281. color: '#33a3dc'
  1282. },
  1283. },
  1284. {
  1285. type: 'effectScatter',
  1286. coordinateSystem: 'cartesian2d',
  1287. data: arr,
  1288. showEffectOn: 'render',
  1289. // zlevel:1,
  1290. rippleEffect: {
  1291. // 波纹的绘制方式,可选'stroke'和'fill'
  1292. brushType: 'fill',
  1293. },
  1294. hoverAnimation: false,
  1295. },
  1296. ],
  1297. })
  1298. this.initChart('echarts2', option)
  1299. },
  1300. }
  1301. }
  1302. </script>
  1303. <style lang="scss">
  1304. .card {
  1305. background: #FFFFFF;
  1306. border-radius: 16rpx
  1307. }
  1308. .card-boxshow {
  1309. box-shadow: 0px 2px 5px 1px rgba(215, 232, 255, 0.5);
  1310. border-radius: 16rpx;
  1311. background: #FFFFFF;
  1312. }
  1313. .mtable {
  1314. &-title {
  1315. border-radius: 50rpx;
  1316. padding: 20rpx 0 20rpx 20rpx;
  1317. box-shadow: 0px 2px 7px 1px rgba(45, 142, 255, 0.5);
  1318. }
  1319. &-body {
  1320. &-item {
  1321. margin-top: 20rpx;
  1322. border-radius: 50rpx;
  1323. padding: 14rpx 0 14rpx 20rpx;
  1324. background-color: #F6F9FE;
  1325. color: #868687;
  1326. }
  1327. }
  1328. }
  1329. .picbox1 {
  1330. width: 100% !important;
  1331. height: 0;
  1332. padding-bottom: 70%;
  1333. margin: 0;
  1334. position: relative;
  1335. overflow: hidden;
  1336. }
  1337. .picbox1 .picimg1 {
  1338. width: 100%;
  1339. height: 100%;
  1340. position: absolute;
  1341. }
  1342. .echarts {
  1343. width: 100%;
  1344. height: 400rpx;
  1345. }
  1346. </style>