detail.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958
  1. <template>
  2. <div class="detail-content">
  3. <div class="title">环境参数</div>
  4. <van-tabs class="my-tab" @change="changeTab" v-model:active="active">
  5. <van-tab
  6. :title="item.name"
  7. :name="item.funcid"
  8. :key="item.id + '' + index"
  9. v-for="(item, index) in titleList"
  10. >
  11. <div class="container-text" v-if="item.options">
  12. <span>{{
  13. item.funcid == "Tdb,RH" ? "温湿度逐时分布" : "浓度逐时分布"
  14. }}</span>
  15. </div>
  16. <div class="chart-box">
  17. <com-chart
  18. :options="item.options"
  19. v-if="item.options"
  20. :id="item.funcid"
  21. height="100%"
  22. width="100%"
  23. />
  24. <div v-else class="no-data" height="100%" width="100%">
  25. <template v-if="item.showNowData === 1">
  26. <img :src="parseImgUrl('page-officehome', 'empty.png')" alt="" />
  27. <span>暂无数据</span>
  28. </template>
  29. <template v-if="item.showNowData === 2">
  30. <img :src="parseImgUrl('page-officehome', 'empty.png')" alt="" />
  31. <span>该空间数据未配置</span>
  32. </template>
  33. </div>
  34. </div>
  35. <div class="detail-desc clearfix">
  36. <!-- <div class="detail-title">
  37. {{ item.name }}
  38. </div> -->
  39. <div class="detail-text">
  40. <p v-for="(textItem, idx) in item.text" :key="idx">
  41. <!-- <van-icon class="icon" name="success" v-if="idx % 2 == 0" /> -->
  42. <span class="circle"></span>
  43. <span class="tem-span">
  44. {{ textItem }}
  45. </span>
  46. </p>
  47. </div>
  48. </div>
  49. <div class="detail-bottom">
  50. <p>{{ item.level }}</p>
  51. <div class="text-img">
  52. <img :src="item.img" alt="" />
  53. </div>
  54. </div>
  55. </van-tab>
  56. </van-tabs>
  57. <van-loading class="temp-loading" v-if="showLoading"> </van-loading>
  58. </div>
  59. </template>
  60. <script lang="ts">
  61. import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
  62. import ComChart from "@/components/charts/ComChart.vue";
  63. import { useRoute } from "vue-router";
  64. import * as echarts from "echarts";
  65. import { EChartsOption } from "echarts";
  66. import { getChartListHTTP } from "@/apis/envmonitor";
  67. import { setQueryConfig } from "@/utils";
  68. import { parseImgUrl } from "@/utils";
  69. import { Toast } from "vant";
  70. export default defineComponent({
  71. props: {
  72. query: {
  73. // 空调基本信息
  74. type: Object,
  75. default: () => {},
  76. },
  77. },
  78. components: {
  79. ComChart,
  80. },
  81. setup(props) {
  82. const titleList: any = [
  83. {
  84. id: 0,
  85. name: "CO₂",
  86. funcid: "CO2",
  87. unit: "ppm",
  88. text: [
  89. "CO₂,一种无色无味气体",
  90. "CO₂的标准为1000ppm",
  91. "CO₂过高,影响人体呼吸系统",
  92. "大脑易疲劳,工作效率降低",
  93. "室内人员增多,新风量不足时",
  94. "室内CO₂的浓度就会上升",
  95. "宜开窗通风或增加送风量",
  96. "来降低CO₂浓度",
  97. ],
  98. level: "不同浓度下的人体感觉",
  99. img: parseImgUrl("page-officehome", "CO2.png"),
  100. showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
  101. options: null,
  102. },
  103. {
  104. id: 1,
  105. name: "PM2.5",
  106. unit: "ug/m³",
  107. funcid: "PM2d5",
  108. options: null,
  109. text: [
  110. "PM2.5,直径≤2.5微米的颗粒",
  111. "PM2.5的平均值在0-35μg/m3",
  112. "PM2.5浓度过高,影响人体",
  113. "呼吸系统和心血管系统健康",
  114. "应开启除尘净化设备",
  115. ],
  116. level: "不同PM2.5浓度对应等级",
  117. img: parseImgUrl("page-officehome", "pm25.png"),
  118. showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
  119. },
  120. {
  121. id: 2,
  122. name: "甲醛",
  123. unit: "mg/㎡",
  124. options: null,
  125. funcid: "HCHO",
  126. text: [
  127. "甲醛(HCHO)是无色有刺激性有机气体。甲醛的主要危害表现为对皮肤和黏膜的刺激作用,室内甲醛浓度长期偏高会引发呼吸系统,消化系统或免疫系统疾病。",
  128. "甲醛多来自于室内装饰材料,如家具,墙纸,油漆以及胶水、芳香剂等物质。",
  129. "由于家具,胶水中的甲醛挥发是一个长期缓慢的过程,因此甲醛超标常表现为室内甲醛浓度长期处于较高的数值。",
  130. "最为有效避免甲醛超标的方法是持续高效的通风,通过引入室外新鲜空气将室内甲醛浓度长期控制在低于有害标准的范围内。",
  131. "由于甲醛传感器为电化学传感器,存在交叉干扰的特性,当室内出现无害的挥发性气体时也会导致测得的甲醛浓度短暂升高,如吸烟,使用香水,空气清新剂,喷洒酒精,甚至剥橘子皮溅出的汁液均可能在短时间内影响甲醛传感器的读数,在去除干扰源后,此种影响会在短时间内消除,可不必因此产生担忧。",
  132. ],
  133. level: "不同阈值浓度对应标准",
  134. img: parseImgUrl("page-officehome", "methanal.png"),
  135. showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
  136. },
  137. {
  138. id: 3,
  139. name: "温湿度",
  140. unit: "%",
  141. funcid: "Tdb,RH",
  142. options: null,
  143. text: [
  144. "温度表示空气的冷热程度",
  145. "夏季高温高湿会使人烦躁、疲倦",
  146. "冬季湿度过高时,人体感觉越冷",
  147. "冬季湿度低易引起呼吸道不适",
  148. "室外温度较高时,宜遮阳关窗",
  149. ],
  150. level: "",
  151. img: "",
  152. showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
  153. },
  154. ];
  155. const query: {
  156. funcid: string;
  157. spaceId: string;
  158. } = {
  159. funcid: "",
  160. spaceId: "",
  161. };
  162. const activeItem: any = [];
  163. const proxyData = reactive({
  164. active: "",
  165. showLoading: false,
  166. activeItem: activeItem,
  167. titleList: titleList,
  168. query: props.query ? props.query : query,
  169. parseImgUrl: parseImgUrl,
  170. /**
  171. * 加载loading
  172. */
  173. loadingStart() {
  174. // Toast.loading({
  175. // duration: 0, // 持续展示 toast
  176. // forbidClick: true,
  177. // message: "加载中...",
  178. // });
  179. proxyData.showLoading = true;
  180. },
  181. /**
  182. * 结束
  183. */
  184. loadinngEnd() {
  185. // Toast.clear();
  186. proxyData.showLoading = false;
  187. },
  188. /**
  189. * 设置当前选中的tab
  190. */
  191. setActiveItem() {
  192. for (let i = 0; i < proxyData.titleList.length; i++) {
  193. if (proxyData.titleList[i].funcid == proxyData.query.funcid) {
  194. proxyData.active = proxyData.titleList[i].funcid;
  195. proxyData.activeItem = proxyData.titleList[i];
  196. break;
  197. }
  198. }
  199. },
  200. /**
  201. * 详情页面tab切换
  202. */
  203. changeTab() {
  204. if (proxyData.query.spaceId) {
  205. proxyData.query.funcid = proxyData.active;
  206. proxyData.setActiveItem();
  207. proxyData.queryAllData();
  208. }
  209. },
  210. // 查询echarts图表
  211. queryAllData() {
  212. if (proxyData.activeItem.funcid) {
  213. // debugger;
  214. let funcid = proxyData.activeItem.funcid;
  215. proxyData.loadingStart();
  216. // proxyData.showLoading = true;
  217. if (funcid === "Tdb,RH") {
  218. // 两条线的 时候
  219. proxyData.formatTowOptions(funcid);
  220. } else {
  221. proxyData.formatOptios(funcid);
  222. }
  223. }
  224. },
  225. /**
  226. *获取图表统计数据
  227. * @param funcid
  228. */
  229. getData(funcid: string = "") {
  230. // debugger
  231. let paramObj = {
  232. spaceId: proxyData.query.spaceId,
  233. funcid: funcid,
  234. };
  235. const paramStr: string = setQueryConfig(paramObj);
  236. return getChartListHTTP(paramStr)
  237. .then((res) => {
  238. const resData: any = res;
  239. let { propertyData, dayTarget } = resData;
  240. let chartData = proxyData.formatChartData(
  241. propertyData,
  242. dayTarget,
  243. funcid
  244. );
  245. // 设置警线的值
  246. let chartMax = proxyData.setMax(funcid, dayTarget);
  247. if (funcid === "Tdb" || funcid === "RH") {
  248. return chartData;
  249. } else {
  250. return {
  251. chartData,
  252. chartMax,
  253. };
  254. }
  255. })
  256. .catch((error: any) => {
  257. proxyData.loadinngEnd();
  258. // proxyData.showLoading = false;
  259. });
  260. },
  261. /**
  262. * co pm 甲醛统计数据格式化成图表可使用的数据
  263. * @param propertyData
  264. * @param dayTarget
  265. * @param funcid
  266. */
  267. formatChartData(propertyData: any, dayTarget: any, funcid: any) {
  268. // 只是一个处理数据的函数
  269. if (!Array.isArray(propertyData) || !Array.isArray(dayTarget)) {
  270. return [];
  271. }
  272. let baseArr: any = (propertyData && propertyData.slice(1)) || [];
  273. let tragetChart: any = [];
  274. let handleNumber = (val: any) => {
  275. return Number(val);
  276. };
  277. let initNum = {
  278. PM2d5: handleNumber,
  279. CO2: handleNumber,
  280. HCHO: function (value: any) {
  281. return Number(Number(value).toFixed(2));
  282. },
  283. RH: handleNumber,
  284. Tdb: handleNumber,
  285. };
  286. // 类型
  287. if (baseArr && baseArr.length > 0) {
  288. for (let i = 0; i < baseArr.length; i++) {
  289. let item = baseArr[i];
  290. item[1] = item[1] == "-9999" ? null : initNum[funcid](item[1]);
  291. }
  292. }
  293. if (
  294. baseArr.length &&
  295. dayTarget.length &&
  296. baseArr.length === dayTarget.length
  297. ) {
  298. for (let i = 0; i < dayTarget.length; i++) {
  299. let item = dayTarget[i];
  300. let time = "";
  301. item.time &&
  302. (time = item.time.slice(0, 2) + ":" + item.time.slice(2, 4));
  303. let initObj = {
  304. time: time,
  305. sales: baseArr[i][1],
  306. };
  307. tragetChart.push(initObj);
  308. }
  309. }
  310. return tragetChart;
  311. },
  312. checkIsData(data: any) {
  313. let tempArr: any = data.filter((item: any) => {
  314. return item === null;
  315. });
  316. if (data.length === tempArr.length) {
  317. return false;
  318. } else {
  319. return true;
  320. }
  321. },
  322. async formatOptios(funcid: any) {
  323. proxyData.activeItem.options = null;
  324. let { chartData, chartMax } = await proxyData.getData(funcid);
  325. proxyData.loadinngEnd();
  326. // proxyData.showLoading = false;
  327. let seriesData: any = chartData.map((item: any) => {
  328. return item.sales;
  329. });
  330. let xData: any = chartData.map((item: any) => {
  331. return item.time;
  332. });
  333. let max: any = Math.max(...seriesData);
  334. if (xData && xData.length) {
  335. if (proxyData.checkIsData(seriesData)) {
  336. let options = {
  337. tooltip: {
  338. trigger: "axis",
  339. },
  340. grid: {
  341. top: 25,
  342. left: 10,
  343. right: 20,
  344. bottom: 20,
  345. containLabel: true,
  346. },
  347. xAxis: [
  348. {
  349. type: "category",
  350. boundaryGap: false,
  351. axisLine: {
  352. lineStyle: {
  353. color: "#ECEFF4",
  354. },
  355. },
  356. axisLabel: {
  357. fontSize: 12,
  358. interval: 8,
  359. showMaxLabel: true,
  360. color: "#C4C4C4",
  361. },
  362. data: xData,
  363. },
  364. ],
  365. yAxis: [
  366. {
  367. name: `单位:(${proxyData.activeItem.unit})`,
  368. type: "value",
  369. nameGap: 12, // y轴name与横纵坐标轴线的间距
  370. // nameLocation: "left", // y轴name处于y轴的什么位置
  371. nameTextStyle: {
  372. color: "#9FA9BC",
  373. padding:
  374. proxyData.activeItem.name == "PM2.5"
  375. ? [0, 25, 0, 55]
  376. : [0, 25, 0, 25],
  377. // margin : [5, 0, 0, -20],
  378. },
  379. // max: chartMax,
  380. axisTick: {
  381. show: false,
  382. },
  383. axisLine: {
  384. lineStyle: {
  385. color: "#ECEFF4",
  386. },
  387. },
  388. axisLabel: {
  389. fontSize: 12,
  390. color: "#C4C4C4",
  391. },
  392. splitLine: {
  393. lineStyle: {
  394. type: "dashed",
  395. color: "#ECEFF4",
  396. },
  397. },
  398. },
  399. ],
  400. series: [
  401. {
  402. markLine:
  403. max && chartMax && max >= chartMax
  404. ? {
  405. symbol: "none",
  406. data: [
  407. {
  408. name: "均线",
  409. type: "max",
  410. yAxis: chartMax,
  411. lineStyle: {
  412. normal: {
  413. color: "red",
  414. width: 2,
  415. type: "solid",
  416. },
  417. },
  418. },
  419. ],
  420. label: {
  421. normal: {
  422. show: true,
  423. position: "middle",
  424. textStyle: {
  425. fontSize: 12,
  426. fontWeight: 600,
  427. },
  428. },
  429. },
  430. }
  431. : {},
  432. name: proxyData.activeItem.name,
  433. type: "line",
  434. smooth: true,
  435. symbol: "circle",
  436. symbolSize: 5,
  437. showSymbol: false,
  438. areaStyle: {
  439. color: new (echarts as any).graphic.LinearGradient(
  440. 0,
  441. 1,
  442. 0,
  443. 0,
  444. [
  445. {
  446. offset: 0,
  447. color: "rgba(79, 128, 255, 0.1)",
  448. },
  449. {
  450. offset: 1,
  451. color: "rgba(79, 128, 255, 0.6)",
  452. },
  453. ],
  454. false
  455. ),
  456. shadowColor: "rgba(79, 128, 255, 0.1)",
  457. shadowBlur: 10,
  458. },
  459. itemStyle: {
  460. color: "rgba(79, 128, 255, 1)",
  461. borderColor: "rgba(79, 128, 255, 1)",
  462. borderWidth: 12,
  463. },
  464. data: seriesData,
  465. },
  466. ],
  467. } as EChartsOption;
  468. proxyData.activeItem.options = options;
  469. proxyData.activeItem.showNowData = 0;
  470. } else {
  471. proxyData.activeItem.options = null;
  472. proxyData.activeItem.showNowData = 1;
  473. }
  474. } else {
  475. proxyData.activeItem.options = null;
  476. proxyData.activeItem.showNowData = 2;
  477. }
  478. },
  479. async formatTowOptions(funcid: any) {
  480. // debugger
  481. proxyData.activeItem.options = null;
  482. let funcidArr = funcid.split(",");
  483. // debugger
  484. let chartData1: any = await proxyData.getData(funcidArr[0]);
  485. let chartData2: any = await proxyData.getData(funcidArr[1]);
  486. proxyData.loadinngEnd();
  487. let xData: any = chartData1.map((item: any) => {
  488. return item.time;
  489. });
  490. let seriesData1: any = chartData1.map((item: any) => {
  491. return item.sales;
  492. });
  493. let seriesData2: any = chartData2.map((item: any) => {
  494. return item.sales;
  495. });
  496. let options = {
  497. tooltip: {
  498. trigger: "axis",
  499. },
  500. legend: {
  501. icon: "circle",
  502. itemWidth: 14,
  503. itemHeight: 5,
  504. itemGap: 20,
  505. data: ["温度", "湿度"],
  506. textStyle: {
  507. fontSize: 12,
  508. color: "#C4C4C4",
  509. },
  510. },
  511. grid: {
  512. top: 30,
  513. left: 5,
  514. right: 15,
  515. bottom: 20,
  516. containLabel: true,
  517. },
  518. xAxis: [
  519. {
  520. type: "category",
  521. boundaryGap: false,
  522. axisLine: {
  523. lineStyle: {
  524. color: "#ECEFF4",
  525. },
  526. },
  527. axisLabel: {
  528. fontSize: 12,
  529. interval: 8,
  530. showMaxLabel: true,
  531. color: "#C4C4C4",
  532. },
  533. data: xData,
  534. },
  535. ],
  536. yAxis: [
  537. {
  538. name: "单位:℃",
  539. type: "value",
  540. nameGap: 12, // y轴name与横纵坐标轴线的间距
  541. // nameLocation: "left", // y轴name处于y轴的什么位置
  542. nameTextStyle: {
  543. color: "#9FA9BC",
  544. padding: [0, 25, 0, 15],
  545. // margin : [5, 0, 0, -20],
  546. },
  547. axisTick: {
  548. show: false,
  549. },
  550. axisLine: {
  551. lineStyle: {
  552. color: "#ECEFF4",
  553. },
  554. },
  555. axisLabel: {
  556. fontSize: 12,
  557. color: "#C4C4C4",
  558. },
  559. splitLine: {
  560. lineStyle: {
  561. type: "dashed",
  562. color: "#ECEFF4",
  563. },
  564. },
  565. },
  566. {
  567. name: "单位:%",
  568. nameGap: 12, // y轴name与横纵坐标轴线的间距
  569. nameTextStyle: {
  570. color: "#9FA9BC",
  571. padding: [0, 0, 0, 10],
  572. },
  573. type: "value",
  574. axisTick: {
  575. show: false,
  576. },
  577. axisLine: {
  578. show: false,
  579. lineStyle: {
  580. color: "#ECEFF4",
  581. },
  582. },
  583. axisLabel: {
  584. fontSize: 12,
  585. color: "#C4C4C4",
  586. },
  587. splitLine: {
  588. show: false,
  589. },
  590. },
  591. ],
  592. series: [
  593. {
  594. name: "温度",
  595. type: "line",
  596. smooth: true,
  597. symbol: "circle",
  598. symbolSize: 5,
  599. yAxisIndex: 0,
  600. showSymbol: false,
  601. lineStyle: {
  602. width: 1,
  603. },
  604. areaStyle: {
  605. color: new (echarts as any).graphic.LinearGradient(
  606. 0,
  607. 0,
  608. 0,
  609. 1,
  610. [
  611. {
  612. offset: 0,
  613. color: "rgba(79, 128, 255, 0.165)",
  614. },
  615. {
  616. offset: 0.8,
  617. color: "rgba(79, 128, 255, 0)",
  618. },
  619. ],
  620. false
  621. ),
  622. shadowColor: "rgba(79, 128, 255,0.1)",
  623. shadowBlur: 10,
  624. },
  625. itemStyle: {
  626. color: "rgba(79, 128, 255, 1)",
  627. borderColor: "rgba(79, 128, 255, 1)",
  628. borderWidth: 12,
  629. },
  630. data: seriesData1,
  631. },
  632. {
  633. name: "湿度",
  634. type: "line",
  635. smooth: true,
  636. symbol: "circle",
  637. symbolSize: 5,
  638. showSymbol: false,
  639. yAxisIndex: 1,
  640. lineStyle: {
  641. width: 1,
  642. },
  643. areaStyle: {
  644. color: new (echarts as any).graphic.LinearGradient(
  645. 0,
  646. 0,
  647. 0,
  648. 1,
  649. [
  650. {
  651. offset: 0,
  652. color: "rgba(137,189,27, 0.3)",
  653. },
  654. {
  655. offset: 0.8,
  656. color: "rgba(137,189,27, 0.165)",
  657. },
  658. ],
  659. false
  660. ),
  661. shadowColor: "rgba(79, 128, 255,0.1)",
  662. shadowBlur: 10,
  663. },
  664. itemStyle: {
  665. color: "rgb(137,189,27)",
  666. borderColor: "rgba(137,189,2,1)",
  667. borderWidth: 12,
  668. },
  669. data: seriesData2,
  670. },
  671. ],
  672. } as EChartsOption;
  673. if (xData && xData.length) {
  674. if (
  675. proxyData.checkIsData(seriesData1) ||
  676. proxyData.checkIsData(seriesData2)
  677. ) {
  678. proxyData.activeItem.options = options;
  679. proxyData.activeItem.showNowData = 0;
  680. } else {
  681. proxyData.activeItem.options = null;
  682. // 暂位配置服务时间
  683. proxyData.activeItem.showNowData = 1;
  684. }
  685. } else {
  686. proxyData.activeItem.options = null;
  687. // 暂位配置服务时间
  688. proxyData.activeItem.showNowData = 2;
  689. }
  690. },
  691. setMax(funcid: any = "", dayTarget: any) {
  692. let max = 0;
  693. switch (funcid) {
  694. case "CO2":
  695. for (let i = 0; i < dayTarget.length; i++) {
  696. if (dayTarget[i].co2Max) {
  697. max = dayTarget[i].co2Max;
  698. }
  699. }
  700. break;
  701. case "PM2d5":
  702. for (let i = 0; i < dayTarget.length; i++) {
  703. if (dayTarget[i].pm25Max) {
  704. max = dayTarget[i].pm25Max;
  705. }
  706. }
  707. break;
  708. case "HCHO":
  709. // max = dayTarget && dayTarget[0] && dayTarget[0].hchoMax;
  710. for (let i = 0; i < dayTarget.length; i++) {
  711. if (dayTarget[i].hchoMax) {
  712. max = dayTarget[i].hchoMax;
  713. }
  714. }
  715. break;
  716. case "RH":
  717. max = 0;
  718. break;
  719. case "Tdb":
  720. // max = dayTarget[0].temperatureMax;
  721. max = 0;
  722. break;
  723. default:
  724. break;
  725. }
  726. return max;
  727. },
  728. });
  729. watch(
  730. props,
  731. (newProps: any) => {
  732. proxyData.query = JSON.parse(JSON.stringify(newProps.query));
  733. proxyData.setActiveItem();
  734. proxyData.queryAllData();
  735. // 设置当前选中的tab
  736. },
  737. {
  738. deep: true,
  739. immediate: true,
  740. }
  741. );
  742. onMounted(() => {
  743. // proxyData.setActiveItem();
  744. // proxyData.queryAllData();
  745. // const route: any = useRoute();
  746. // if (route.query) {
  747. // proxyData.query = route.query;
  748. // // 设置当前选中的tab
  749. // proxyData.setActiveItem();
  750. // proxyData.queryAllData();
  751. // }
  752. });
  753. return {
  754. ...toRefs(proxyData),
  755. };
  756. },
  757. });
  758. </script>
  759. <style lang="scss" scoped>
  760. .detail-content {
  761. width: 100%;
  762. height: 100%;
  763. .title {
  764. padding-bottom: 14px;
  765. font-family: "PingFang SC";
  766. font-style: normal;
  767. font-weight: 500;
  768. font-size: 22px;
  769. line-height: 31px;
  770. color: #000000;
  771. }
  772. }
  773. .container-text {
  774. font-family: PingFang SC;
  775. padding-top: 17px;
  776. background: #fff;
  777. font-weight: 500;
  778. font-size: 16px;
  779. line-height: 22px;
  780. text-align: center;
  781. color: #000000;
  782. text-align: center;
  783. }
  784. .chart-box {
  785. width: 100%;
  786. height: 280px;
  787. padding-top: 10px;
  788. background: #fff;
  789. }
  790. .detail-desc {
  791. // padding: 0 15px;
  792. margin-top: 20px;
  793. padding-left: 15px;
  794. display: flex;
  795. .detail-title {
  796. display: inline-block;
  797. margin-right: 22px;
  798. vertical-align: middle;
  799. width: 64px;
  800. height: 85px;
  801. line-height: 85px;
  802. text-align: center;
  803. background: #fff;
  804. border-radius: 5px;
  805. font-size: 18px;
  806. align-items: center;
  807. text-align: center;
  808. color: #140050;
  809. }
  810. .detail-text {
  811. flex: 86px 1;
  812. display: inline-block;
  813. font-family: PingFang SC;
  814. color: #4d5262;
  815. vertical-align: middle;
  816. p {
  817. position: relative;
  818. margin-bottom: 10px;
  819. // padding-bottom: 10px;
  820. }
  821. .icon {
  822. position: absolute;
  823. top: 7px;
  824. left: 0;
  825. display: inline-block;
  826. vertical-align: middle;
  827. font-size: 12px;
  828. }
  829. .circle {
  830. display: inline-block;
  831. vertical-align: middle;
  832. position: absolute;
  833. left: 0;
  834. top: 50%;
  835. transform: translateY(-50%);
  836. width: 6px;
  837. height: 6px;
  838. border-radius: 50%;
  839. background: $elCircle;
  840. }
  841. .tem-span {
  842. display: inline-block;
  843. vertical-align: middle;
  844. padding-bottom: 5px;
  845. font-style: normal;
  846. font-weight: 400;
  847. font-size: 13px;
  848. line-height: 20px;
  849. color: #646c73;
  850. padding-left: 15px;
  851. }
  852. }
  853. }
  854. .detail-bottom {
  855. padding: 0 15px;
  856. padding-bottom: 30px;
  857. padding-top: 40px;
  858. width: 100%;
  859. font-weight: 500;
  860. font-size: 14px;
  861. line-height: 12px;
  862. color: #140050;
  863. .text-img {
  864. width: 100%;
  865. padding-top: 20px;
  866. img {
  867. width: 100%;
  868. margin: 0 auto;
  869. }
  870. }
  871. }
  872. </style>
  873. <style lang="scss">
  874. .detail-content {
  875. .van-tabs__content {
  876. width: 100%;
  877. //height: 280px;
  878. //padding-left: 22px;
  879. //padding-right: 22px;
  880. //padding-top: 10px;
  881. }
  882. .van-tab__panel {
  883. width: 100%;
  884. height: 100%;
  885. }
  886. .van-tabs__line {
  887. display: none;
  888. }
  889. .van-tab__text {
  890. display: inline-block;
  891. padding: 3px;
  892. // font-size: 16px;
  893. color: #c4c4c4;
  894. width: 100%;
  895. height: 100%;
  896. line-height: 44px;
  897. text-align: center;
  898. font-style: normal;
  899. font-weight: 700;
  900. font-size: 14px;
  901. }
  902. .van-tab--active {
  903. .van-tab__text {
  904. color: #fff;
  905. background: #ffffff;
  906. border-radius: 4px;
  907. color: $elActiveColor;
  908. // background: $elActiveColor;
  909. }
  910. }
  911. .van-tabs__wrap {
  912. // position: fixed;
  913. padding: 2px;
  914. width: 100%;
  915. height: 50px;
  916. border-radius: 4px;
  917. //top: 48px;
  918. top: 0;
  919. background: #f2f3f5;
  920. left: 0;
  921. z-index: 333;
  922. }
  923. .van-tabs__nav--line {
  924. background: #f2f3f5;
  925. border-radius: 4px;
  926. }
  927. .van-tabs__content {
  928. //padding-top: 42px;
  929. //padding-top: 10px;
  930. }
  931. }
  932. </style>