index.vue 65 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204
  1. <template>
  2. <div
  3. class="main"
  4. :style="{
  5. backgroundImage:
  6. 'linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2)), url(' +
  7. padBgImg +
  8. ')',
  9. 'background-repeat': 'no-repeat',
  10. }"
  11. >
  12. <div class="main-left">
  13. <div
  14. class="left-top"
  15. @touchstart="gtouchstart($event)"
  16. @touchmove="gtouchmove()"
  17. @touchend="showDeleteButton"
  18. >
  19. <div class="logo-box">
  20. <img class="logo-icon" v-if="logImg" :src="logImg" alt="" />
  21. <img
  22. class="logo-icon"
  23. v-else
  24. :src="parseImgUrl('ipdImages', 'shangeyun_logo.svg')"
  25. alt=""
  26. />
  27. </div>
  28. <div class="left-time">
  29. <span>{{ nowDate }} </span>
  30. <span>{{ nowWeek }}</span>
  31. </div>
  32. <div class="weather">
  33. <img
  34. v-show="outWeather.imgname"
  35. :src="outWeather.imgname"
  36. class="weather-icon"
  37. alt=""
  38. />
  39. <span
  40. >{{ outWeather.temperature ? outWeather.temperature : "--" }}℃</span
  41. >
  42. </div>
  43. <div class="weixiin" @click="showContact">
  44. <img :src="parseImgUrl('ipdImages', 'weixin.svg')" />
  45. <span> 联系客服</span>
  46. </div>
  47. </div>
  48. <div class="left-space">
  49. <div class="text">
  50. <div>
  51. {{ officeData.localName }}
  52. </div>
  53. <!-- <div
  54. v-if="
  55. officeData.isPassengerPass === true ||
  56. officeData.isPassengerPass === false
  57. "
  58. >
  59. <img
  60. :src="parseImgUrl('ipdImages', 'vector-active.svg')"
  61. v-if="officeData.isPassengerPass"
  62. />
  63. <img
  64. :src="parseImgUrl('ipdImages', 'vector.svg')"
  65. v-if="!officeData.isPassengerPass"
  66. />
  67. <span v-if="officeData.isPassengerPass">有人</span>
  68. <span v-if="!officeData.isPassengerPass">无人</span>
  69. </div> -->
  70. </div>
  71. <div class="space-info">
  72. <div class="space-temp">
  73. <img :src="parseImgUrl('ipdImages', 'template-icon.svg')" alt="" />
  74. <span class="temp-text">温度</span>
  75. <span class="temp-num"
  76. >{{ officeData.temperature ? officeData.temperature : "--"
  77. }}<sup>℃</sup></span
  78. >
  79. </div>
  80. </div>
  81. <div class="space-env">
  82. <div
  83. class="env-item"
  84. :style="[
  85. { background: item.bgColor ? item.bgColor : '' },
  86. { opacity: item.bgColor ? 0.8 : '' },
  87. { paddingLeft: index == 0 && item.bgColor ? '15px' : '' },
  88. ]"
  89. :class="[
  90. index == 1 ? 'env-color' : '',
  91. item.bgColor ? 'env-item-radius' : '',
  92. ]"
  93. :key="'env' + index"
  94. @click="handleDetail(item)"
  95. v-for="(item, index) in envlist"
  96. >
  97. <div>
  98. <img :src="parseImgUrl('ipdImages', item.img)" alt="" />
  99. <span>{{ item.name }}</span>
  100. </div>
  101. <div class="env-text">
  102. {{ item.num }} <sup>{{ item.unit }}</sup>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="fotter" v-if="spaceData && spaceData.length > 1">
  108. <template v-for="(item, index) in spaceData">
  109. <div
  110. class="fotter-item"
  111. :class="item.active ? 'fotter-item-active' : ''"
  112. :key="index + 'nav'"
  113. v-if="index < 3"
  114. @click="changeSpace(item)"
  115. >
  116. <img
  117. v-if="item.active"
  118. :src="parseImgUrl('ipdImages', 'rectangle-active.svg')"
  119. />
  120. <img :src="parseImgUrl('ipdImages', 'rectangle1.svg')" v-else />
  121. <span>{{ item.spaceName }} </span>
  122. </div>
  123. </template>
  124. <div
  125. class="fotter-item-end"
  126. @click="moreSpace"
  127. v-if="spaceData && spaceData.length > 3"
  128. >
  129. <img :src="parseImgUrl('ipdImages', 'rectangle-fotter.svg')" />
  130. <span>…</span>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="main-right">
  135. <!--加班start-->
  136. <div
  137. class="work-btn"
  138. v-if="
  139. (roomType === '开放' && isWork) ||
  140. (roomType === '会议室' && scenarioArr && scenarioArr.length)
  141. "
  142. >
  143. <!--自动控制的加班 start-->
  144. <work-config
  145. v-if="roomType === '开放' && isWork && controlMode !== 1"
  146. :scenarioArr="scenarioArr"
  147. :workkArr="workkArr"
  148. @closeWork="closeWork"
  149. @triggerWork="triggerWork"
  150. @setForceOverTimeFlag="setForceOverTimeFlag"
  151. ></work-config>
  152. <!--手动控制的加班 start-->
  153. <manual-config
  154. v-if="roomType === '开放' && isWork && controlMode === 1"
  155. :scenarioArr="scenarioArr"
  156. :workkArr="workkArr"
  157. @closeWork="closeWork"
  158. @triggerWork="triggerWork"
  159. @setForceOverTimeFlag="setForceOverTimeFlag"
  160. ></manual-config>
  161. <scenario-config
  162. v-if="roomType === '会议室' && scenarioArr && scenarioArr.length"
  163. :activeType="activeType"
  164. :scenarioArr="scenarioArr"
  165. :spaceId="spaceInfo.spaceId"
  166. :projectId="projectId"
  167. @setHeadScene="setHeadScene"
  168. ></scenario-config>
  169. </div>
  170. <!--加班end-->
  171. <!--空调手动控制 start-->
  172. <manual-index
  173. v-if="controlMode === 1"
  174. @triggerWork="triggerWork"
  175. :seviceEquipmentList="seviceEquipmentList"
  176. :forceOverTimeFlag="forceOverTimeFlag"
  177. @updateAirTemp="updateAirTemp"
  178. :hasAir="spaceExistenceDevice.airConditioner"
  179. :airVolumes="officeData.airVolumes"
  180. :temperature="officeData.temperature"
  181. :spaceId="spaceInfo.spaceId"
  182. :projectId="projectId"
  183. :userIsControl="userIsControl"
  184. >
  185. </manual-index>
  186. <!--空调手动控制 end-->
  187. <!--空调自动控制 start-->
  188. <Air
  189. v-if="
  190. controlMode != 1 &&
  191. (officeData.temperature || spaceExistenceDevice.airConditioner)
  192. "
  193. id="airId"
  194. key="airId"
  195. @triggerWork="triggerWork"
  196. :forceOverTimeFlag="forceOverTimeFlag"
  197. @updateAirTemp="updateAirTemp"
  198. :hasAir="spaceExistenceDevice.airConditioner"
  199. :airVolumes="officeData.airVolumes"
  200. :temperature="officeData.temperature"
  201. :spaceId="spaceInfo.spaceId"
  202. :projectId="projectId"
  203. :isACATVA="isACATVA"
  204. :userIsControl="userIsControl"
  205. />
  206. <!--空调自动控制 end-->
  207. <Light
  208. v-if="spaceExistenceDevice.light && spaceInfo.spaceId"
  209. :forceOverTimeFlag="forceOverTimeFlag"
  210. :controlMode="controlMode"
  211. :seviceEquipmentList="seviceEquipmentList"
  212. @triggerWork="triggerWork"
  213. id="lightId"
  214. key="lightId"
  215. :userIsControl="userIsControl"
  216. :spaceId="spaceInfo.spaceId"
  217. :projectId="projectId"
  218. />
  219. <Curtain
  220. :spaceId="spaceInfo.spaceId"
  221. id="curtainId"
  222. key="curtainId"
  223. :userIsControl="userIsControl"
  224. v-if="spaceExistenceDevice.curtain"
  225. :projectId="projectId"
  226. />
  227. </div>
  228. <!--加班场景-->
  229. <van-popup
  230. v-model:show="isShowWork"
  231. position="right"
  232. class="popup-content"
  233. teleport="#app"
  234. >
  235. <work-overtime
  236. v-if="isShowWork && controlMode !== 1"
  237. :spaceInfo="spaceInfo"
  238. @closeWork="closeWork"
  239. :projectId="projectId"
  240. :workkArr="workkArr"
  241. ></work-overtime>
  242. <!--加班手动控制 start-->
  243. <manual-overtime
  244. v-if="isShowWork && controlMode === 1"
  245. :seviceEquipmentList="seviceEquipmentList"
  246. :enterType="enterType"
  247. :deviceItem="deviceItem"
  248. :spaceInfo="spaceInfo"
  249. @closeWork="closeWork"
  250. :projectId="projectId"
  251. :workkArr="workkArr"
  252. >
  253. </manual-overtime>
  254. </van-popup>
  255. <!--会议室场景-->
  256. <van-popup
  257. v-model:show="isShowMetting"
  258. position="right"
  259. :close-on-click-overlay="false"
  260. class="popup-content"
  261. teleport="#app"
  262. >
  263. <scenario-dailog
  264. :secenaroStatus="secenaroStatus"
  265. @closeDailog="closeDailog"
  266. >
  267. </scenario-dailog>
  268. </van-popup>
  269. <!--环境数据详情-->
  270. <van-popup
  271. v-model:show="isShowDetail"
  272. position="right"
  273. :close-on-click-overlay="true"
  274. class="popup-content"
  275. teleport="#app"
  276. >
  277. <detail :query="detailQuery" v-if="isShowDetail"></detail>
  278. </van-popup>
  279. <!--地图数据列表-->
  280. <van-popup
  281. v-model:show="isShowMap"
  282. class="map-popup"
  283. position="bottom"
  284. style="width: 100%; height: 70%"
  285. :close-on-click-overlay="true"
  286. teleport="#app"
  287. >
  288. <com-map
  289. v-if="defaultSpace.spaceId && isShowMap"
  290. :spaceData="copySpaceData"
  291. :spaceInfo="defaultSpace"
  292. :projectId="projectId"
  293. :floorId="defaultSpace.floorId"
  294. :buildingId="defaultSpace.buildingId"
  295. @changeSpace="changeSpace"
  296. ></com-map>
  297. </van-popup>
  298. <!--联系方式-->
  299. <contact
  300. :isShowContact="isShowContact"
  301. @closeDailog="closeContactDailog"
  302. ></contact>
  303. </div>
  304. </template>
  305. <script lang="ts">
  306. import {
  307. defineComponent,
  308. reactive,
  309. toRefs,
  310. ref,
  311. onBeforeMount,
  312. onMounted,
  313. nextTick,
  314. onBeforeUnmount,
  315. getCurrentInstance,
  316. } from "vue";
  317. import WorkOvertime from "./components/workOvertime/index.vue";
  318. import ManualOvertime from "./components/ManualWork/index.vue";
  319. import Contact from "./components/Contact/index.vue";
  320. import WorkConfig from "./components/workOvertime/WorkConfig.vue";
  321. import ManualConfig from "./components/ManualWork/WorkConfig.vue";
  322. import ScenarioConfig from "./components/Scenario/ScenarioConfig.vue";
  323. import MapBox from "@/views/envmonitor/components/Map/MapBox.vue";
  324. import Header from "@/components/header/Index.vue";
  325. import Comheader from "@/components/header/Comheader.vue";
  326. import Scenario from "@/views/envmonitor/components/Scenario/Scenario.vue";
  327. import Air from "@/views/envmonitor/components/Air/index.vue";
  328. import ManualIndex from "@/views/envmonitor/components/Air/manualIndex.vue";
  329. import Light from "@/views/envmonitor/components/Light/index.vue";
  330. import Curtain from "@/views/envmonitor/components/Curtain/index.vue";
  331. import TimeBox from "@/views/envmonitor/TimeBox.vue";
  332. import NavBar from "@/views/envmonitor/NavBar.vue";
  333. import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
  334. import Detail from "@/views/envmonitor/detail.vue";
  335. import ComMap from "@/views/envmonitor/components/Map/index.vue";
  336. import { Icon, Popup, Dialog, Toast } from "vant";
  337. import { useRouter, useRoute } from "vue-router";
  338. import {
  339. getCompanyInfo,
  340. getWeather,
  341. getSpaceInfo,
  342. getMeetingSceneHttp,
  343. getSetTimeHttp,
  344. changeSetTimeHttp,
  345. getSpaceEquipType,
  346. getPermanentSpace,
  347. getUserControlAuth,
  348. getSpaceMode,
  349. getSpaceTemp,
  350. querySpaceSceneConfig,
  351. queryCustomAndScence,
  352. queryWorkSpace,
  353. getPadImg,
  354. getSpaceEquipList,
  355. } from "@/apis/envmonitor";
  356. import Keys from "@/constant/key";
  357. import {
  358. formatDate,
  359. formatDateStr,
  360. getHours,
  361. getLocalNewSpaceInfo,
  362. getNowWeek,
  363. getRelNowTime,
  364. getUserInfo,
  365. parseImgUrl,
  366. setQueryConfig,
  367. } from "@/utils";
  368. import { store } from "@/store";
  369. import { SpaceInfoModel } from "@/model/userModel";
  370. import { getWorkType } from "@/utils/mapIcon";
  371. export default defineComponent({
  372. components: {
  373. MapBox,
  374. ComMap,
  375. ScenarioDailog,
  376. Scenario,
  377. Header,
  378. Comheader,
  379. NavBar,
  380. Air,
  381. ManualIndex,
  382. ManualOvertime,
  383. Light,
  384. Curtain,
  385. TimeBox,
  386. WorkOvertime,
  387. WorkConfig,
  388. ManualConfig,
  389. ScenarioConfig,
  390. Detail,
  391. Contact,
  392. [Dialog.Component.name]: Dialog.Component,
  393. VanPopup: Popup,
  394. VanIcon: Icon,
  395. },
  396. setup() {
  397. const proxyGlobal: any = getCurrentInstance();
  398. const router: any = useRouter();
  399. const route: any = useRoute();
  400. const document: any = window.document;
  401. const screenHeight: any = document.body.clientHeight;
  402. const outWeather: any = {};
  403. let secenaroStatus: any = {};
  404. // 空间数据(包括空间下的设备的状态)
  405. const officeData: any = {};
  406. let spaceEqFlagObj: SpaceInfoModel = {
  407. hasAir: true, // 有无空调
  408. hasBlowing: false, // 空调有无 变风量系统
  409. hasLamp: false, //有无灯具
  410. };
  411. const popList: any = [];
  412. const detailQuery: any = {};
  413. // 空间类型
  414. let spaceInfo: any = {};
  415. const projectId: string = store.state.user.projectId;
  416. const sceneDetail: any = {};
  417. const timeOutEvent: any = {};
  418. const touchInterval: any = {};
  419. const headerInfo: {
  420. headImg: any;
  421. headScene: string;
  422. tipText: string;
  423. tipTextSwatch: boolean;
  424. } = {
  425. headImg: "",
  426. headScene: "",
  427. tipText: "选择工作结束时间",
  428. tipTextSwatch: false,
  429. };
  430. let spaceExistenceDevice: any = {
  431. curtain: false,
  432. light: false,
  433. airConditioner: false,
  434. bodySensor: false,
  435. };
  436. let childRef: any = {};
  437. // let mapRef: any = {}
  438. let intervalTimer: any = null;
  439. const workInfo: any = {};
  440. const userInfo: any = getUserInfo();
  441. let spaceTimer: any = null;
  442. let listSen: any = [
  443. {
  444. id: 0,
  445. code: "DISCUSSING",
  446. name: "会议模式",
  447. img: "scene_work.svg",
  448. checked: true,
  449. textObj: [
  450. {
  451. text: "照明灯光已全部为您开启",
  452. status: "ok",
  453. },
  454. {
  455. text: "演示设备已为您准备",
  456. status: "ok",
  457. },
  458. {
  459. text: "空调已为您开启",
  460. type: "air",
  461. status: "ok",
  462. },
  463. ],
  464. },
  465. {
  466. id: 1,
  467. code: "PROJECTING",
  468. name: "投影模式",
  469. img: "scene_visitor.svg",
  470. checked: false,
  471. textObj: [
  472. {
  473. text: "主灯已为您关闭,氛围灯为您开启",
  474. status: "ok",
  475. },
  476. {
  477. text: "演示设备已为您开启",
  478. status: "ok",
  479. },
  480. {
  481. text: "空调已为您开启",
  482. type: "air",
  483. status: "ok",
  484. },
  485. {
  486. text: "窗帘已为您关闭",
  487. status: "ok",
  488. },
  489. ],
  490. },
  491. {
  492. id: 2,
  493. code: "ADJOURNMENT",
  494. name: "全关模式",
  495. img: "scene_rest.svg",
  496. checked: false,
  497. textObj: [
  498. {
  499. text: "照明灯光2min后将全部关闭",
  500. status: "ok",
  501. },
  502. {
  503. text: "演示设备已为您关闭",
  504. status: "ok",
  505. },
  506. {
  507. text: "空调全部关闭",
  508. type: "air",
  509. status: "ok",
  510. },
  511. {
  512. text: "窗帘已为您关闭",
  513. status: "ok",
  514. },
  515. ],
  516. },
  517. ];
  518. let userSpaceInfo: any = [];
  519. let spaceModelTimer: any = null;
  520. let spaceTempTimer: any = null;
  521. let envlist: any = [
  522. {
  523. id: 2,
  524. name: "甲醛",
  525. num: "",
  526. level: "",
  527. bgColor: "",
  528. img: "jiaquan.svg",
  529. funcid: "HCHO",
  530. code: "jiaquan",
  531. unit: "mg/m³",
  532. },
  533. {
  534. id: 0,
  535. name: "CO₂",
  536. bgColor: "",
  537. num: "",
  538. level: "",
  539. img: "co2.svg",
  540. funcid: "CO2",
  541. code: "co2",
  542. unit: "ppm",
  543. },
  544. {
  545. id: 1,
  546. name: "PM2.5",
  547. bgColor: "",
  548. num: "",
  549. level: "",
  550. funcid: "PM2d5",
  551. img: "pm2.5.svg",
  552. code: "pm25",
  553. unit: "ug/m³",
  554. },
  555. {
  556. id: 3,
  557. name: "湿度",
  558. bgColor: "",
  559. img: "humidity.svg",
  560. num: "",
  561. level: "",
  562. funcid: "Tdb,RH",
  563. code: "shidu",
  564. unit: "%",
  565. },
  566. ];
  567. let scenarioArr: any = [];
  568. let sceneConfigTimer: any = [];
  569. let realEevList: any = []; // 解决v-if报错的问题临时使用
  570. let workkArr: any = [];
  571. let spaceData: any = [];
  572. let secenTimer: any = {};
  573. let nowDate: any = formatDate("YYYY.MM.DD HH:mm");
  574. let nowWeek: any = getNowWeek();
  575. let padImgData: any = [];
  576. let controlMode: number = 0;
  577. let deviceItem: any = null;
  578. let allDevice: any = [];
  579. let spaceEquipList: any = [];
  580. let equipTimer: any = null;
  581. const proxyData = reactive({
  582. equipTimer: equipTimer,
  583. seviceEquipmentList: allDevice, // 所有的设备
  584. spaceEquipList: spaceEquipList,
  585. enterType: 1,
  586. deviceItem: deviceItem,
  587. parseImgUrl: parseImgUrl,
  588. fileUrl: proxyGlobal.proxy.$fileUrl,
  589. nowDate: nowDate,
  590. nowWeek: nowWeek,
  591. isShowWork: false,
  592. isShowMetting: false,
  593. localName: "",
  594. airTemp: "",
  595. userIsControl: true,
  596. spaceModelTimer: spaceModelTimer,
  597. spaceTempTimer: spaceTempTimer,
  598. userSpaceInfo: userSpaceInfo,
  599. spaceTimer: spaceTimer,
  600. workInfo: workInfo,
  601. intervalTimer: intervalTimer,
  602. roomType: "",
  603. showSpaceTip: false,
  604. mapOpacity: 0,
  605. opacityV: 1,
  606. childRef: childRef,
  607. hideTopImg: false,
  608. isBottom: false,
  609. isScrool: false,
  610. officeData: officeData,
  611. popList: popList,
  612. popupType: "scenario",
  613. showSecenDetailDalig: false,
  614. sceneDetail: sceneDetail,
  615. showScenario: false,
  616. projectId: projectId,
  617. spaceInfo: spaceInfo,
  618. headerInfo: headerInfo,
  619. topbgimg: "",
  620. userInfo: userInfo,
  621. deviceIcon: "arrow",
  622. visible: false,
  623. outWeather: outWeather,
  624. vanPopupIndex: "",
  625. spaceEqFlagObj: spaceEqFlagObj,
  626. spaceExistenceDevice: spaceExistenceDevice,
  627. listOffice: [
  628. {
  629. id: 0,
  630. name: "工作",
  631. code: "work",
  632. img: "scene_work.svg",
  633. checked: true,
  634. textObj: [
  635. {
  636. text: "办公区灯光已全部为您开启",
  637. status: "ok",
  638. },
  639. {
  640. text: "正在将温度调至 26℃",
  641. status: "ok",
  642. },
  643. {
  644. text: "窗帘已为您全部打开",
  645. status: "ok",
  646. },
  647. {
  648. text: "饮用水已为您准备",
  649. status: "ok",
  650. },
  651. ],
  652. },
  653. {
  654. id: 1,
  655. name: "会客",
  656. code: "guest",
  657. img: "scene_visitor.svg",
  658. checked: false,
  659. textObj: [
  660. {
  661. text: "会客区照明已为您开启",
  662. status: "ok",
  663. },
  664. {
  665. text: "空调已为您切换至会客温度,目标温度24℃",
  666. status: "ok",
  667. },
  668. {
  669. text: "窗帘已为您全部开启",
  670. status: "ok",
  671. },
  672. {
  673. text: "演示设备已为您准备",
  674. status: "ok",
  675. },
  676. {
  677. text: "饮用水已为您准备",
  678. status: "ok",
  679. },
  680. ],
  681. },
  682. {
  683. id: 2,
  684. name: "休息",
  685. code: "rest",
  686. img: "scene_rest.svg",
  687. checked: false,
  688. textObj: [
  689. {
  690. text: "主灯已关闭,氛围灯将为您开启",
  691. status: "ok",
  692. },
  693. {
  694. text: "空调将为您调节至适宜休息的温度,目标温度26℃",
  695. status: "ok",
  696. },
  697. {
  698. text: "窗帘已为您全部关闭",
  699. status: "ok",
  700. },
  701. ],
  702. },
  703. ],
  704. listSen: listSen,
  705. isACATVA: false,
  706. showWorkOff: false, // 开放办公室的 提前关闭是否展示
  707. envlist: envlist,
  708. realEevList: realEevList,
  709. navList: [
  710. {
  711. top: 0,
  712. id: "airId",
  713. code: "air",
  714. name: "温度/湿度",
  715. noShow: true,
  716. img: parseImgUrl("page-officehome", "temp.png"),
  717. activeImg: parseImgUrl("page-officehome", "temp_active.svg"),
  718. },
  719. {
  720. top: 0,
  721. id: "lightId",
  722. code: "lamp",
  723. name: "光照",
  724. noShow: false,
  725. img: parseImgUrl("page-officehome", "lamp.png"),
  726. activeImg: parseImgUrl("page-officehome", "lamp_active.svg"),
  727. },
  728. {
  729. top: 0,
  730. id: "curtainId",
  731. code: "curtain",
  732. name: "窗帘",
  733. noShow: false,
  734. img: parseImgUrl("page-officehome", "curtain-nav.svg"),
  735. activeImg: parseImgUrl("page-officehome", "curtain-nav-active.svg"),
  736. },
  737. {
  738. top: 0,
  739. id: 4,
  740. code: "mySpace",
  741. name: "常驻空间",
  742. noShow: false,
  743. activeImg: parseImgUrl("page-officehome", "mySpaceIcon.svg"),
  744. img: parseImgUrl("page-officehome", "mySpaceIcon.svg"),
  745. },
  746. {
  747. top: 0,
  748. id: 5,
  749. code: "switchSpace",
  750. name: "我的",
  751. noShow: true,
  752. activeImg: parseImgUrl("page-officehome", "mapIcon.png"),
  753. img: parseImgUrl("page-officehome", "mapIcon.png"),
  754. },
  755. ],
  756. // 上班=ATWORK 讨论=DISCUSSING 投影=PROJECTING 散会=ADJOURNMENT 下班=OFFWORK
  757. meetingRoomSence: [
  758. {
  759. code: "DISCUSSING",
  760. name: "讨论",
  761. },
  762. {
  763. code: "PROJECTING",
  764. name: "演示",
  765. },
  766. {
  767. code: "ADJOURNMENT",
  768. name: "散会",
  769. },
  770. ],
  771. nextCusStartTime: 0, // 第二天服务定制开始时间
  772. cusEndTime: 0,
  773. cusStartTime: 0, // 当天服务定制-开始时间
  774. isShowContact: false,
  775. showContact() {
  776. proxyData.isShowContact = true;
  777. },
  778. closeContactDailog() {
  779. proxyData.isShowContact = false;
  780. },
  781. padBgImg: "",
  782. // 设置平板背景图
  783. // reviewBaseUrl: `/image-service/common/file_get?systemId=dataPlatform`,
  784. setPadBgImg() {
  785. if (
  786. proxyData.padImgData.isBgDefault === 0 &&
  787. proxyData.padImgData.bgImage &&
  788. proxyData.padImgData.bgImage.fileId
  789. ) {
  790. proxyData.padBgImg =
  791. proxyData.fileUrl + `&key=${proxyData.padImgData.bgImage.fileId}`;
  792. } else {
  793. // debugger;
  794. if (proxyData.roomType == "个人") {
  795. proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img2.png");
  796. } else if (proxyData.roomType === "会议室") {
  797. proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img3.png");
  798. } else if (proxyData.roomType === "开放") {
  799. proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img1.png");
  800. } else {
  801. proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img1.png");
  802. }
  803. }
  804. },
  805. logImg: "",
  806. // 设置平板logo
  807. setPadLogo() {
  808. if (
  809. proxyData.padImgData.isLogoDefault === 0 &&
  810. proxyData.padImgData.logoImage &&
  811. proxyData.padImgData.logoImage.fileId
  812. ) {
  813. // 公司提供的
  814. proxyData.logImg =
  815. proxyData.fileUrl + `&key=${proxyData.padImgData.logoImage.fileId}`;
  816. } else {
  817. proxyData.logImg = "";
  818. }
  819. },
  820. padImgData: padImgData,
  821. padNumber: 0,
  822. // 获取pad的背景图
  823. getPadImg() {
  824. let params: any = {
  825. funcType: proxyData.officeData.roomFuncType,
  826. spaceId: proxyData.spaceInfo.spaceId,
  827. };
  828. let str: any = setQueryConfig(params);
  829. // debugger;
  830. if (proxyData.padNumber < 1) {
  831. proxyData.padNumber = 1;
  832. getPadImg(str).then((res) => {
  833. if (res.result === "success") {
  834. proxyData.padImgData = res.data;
  835. proxyData.setPadBgImg(); // 设置平板背景
  836. proxyData.setPadLogo(); // 设置平板logo
  837. }
  838. });
  839. }
  840. },
  841. /**
  842. * 加班
  843. */
  844. triggerWork(type: any = 1, deviceItem: any = null) {
  845. // console.log(type);
  846. proxyData.enterType = type;
  847. proxyData.deviceItem = deviceItem || null;
  848. proxyData.isShowWork = true;
  849. },
  850. // 关于手动控制是否展示加班弹窗的问题处理
  851. checkDeviceShowWork() {
  852. proxyData.spaceEquipList.map((item: any) => {
  853. item.id = item.equipmentId;
  854. });
  855. proxyData.seviceEquipmentList = proxyData.spaceEquipList;
  856. },
  857. /**
  858. * 关闭加班
  859. */
  860. closeWork() {
  861. proxyData.isShowWork = false;
  862. // console.log("关闭加班功能---");
  863. proxyData.queryCustomAndScenceTimer(0);
  864. },
  865. forceOverTimeFlag: false,
  866. setForceOverTimeFlag(flag: any) {
  867. // debugger
  868. if (proxyData.roomType === "开放" && flag) {
  869. proxyData.forceOverTimeFlag = true;
  870. } else {
  871. proxyData.forceOverTimeFlag = false;
  872. }
  873. },
  874. // 获取公司信息
  875. async getCompanyInfo() {
  876. const res: any = await getCompanyInfo({ companyId: Keys.companyKey });
  877. const data = res.data;
  878. // store.commit(UserMutationTypes.SET_PROJECT_ID, 'Pj1101080259')
  879. // const location: any = data.sagaCareCoords.split(',')
  880. // const targetLocationInfo: any = {
  881. // longitude: location[0],
  882. // latitude: location[1]
  883. // }
  884. // console.log(targetLocationInfo)
  885. },
  886. // 获取天气信息
  887. getWeather() {
  888. const params: any = {
  889. openid: proxyData.userInfo.openid,
  890. pubname: proxyData.userInfo.pubname,
  891. projectId: store.state.user.projectId,
  892. };
  893. const str: string = setQueryConfig(params);
  894. getWeather(str).then((res) => {
  895. const content: any = res?.content ?? {};
  896. proxyData.outWeather = content;
  897. const text: string = content.text;
  898. proxyData.getWeatherIcon(text);
  899. proxyData.getnowTime(text);
  900. });
  901. },
  902. // 设置当前背景图
  903. getnowTime(text: string) {
  904. // 头部背景图片
  905. const now = getHours();
  906. if (text.indexOf("霾") > -1) {
  907. proxyData.topbgimg = parseImgUrl("weather", "office_smog.jpg");
  908. } else {
  909. if (now >= 6 && now < 19) {
  910. // 白天
  911. proxyData.topbgimg = parseImgUrl("weather", "office_bright.jpg");
  912. } else {
  913. // 夜晚
  914. proxyData.topbgimg = parseImgUrl("weather", "office_night.jpg");
  915. }
  916. }
  917. },
  918. // 设置天气icon
  919. getWeatherIcon(text: string) {
  920. if (text && text.indexOf("晴") > -1) {
  921. proxyData.outWeather.imgname = parseImgUrl("weather", "sun.png");
  922. } else if (text && text.indexOf("雨") > -1) {
  923. proxyData.outWeather.imgname = parseImgUrl("weather", "rain.png");
  924. } else if (
  925. (text && text.indexOf("阴") > -1) ||
  926. text.indexOf("云") > -1
  927. ) {
  928. proxyData.outWeather.imgname = parseImgUrl("weather", "cloudy.png");
  929. } else if (text && text.indexOf("霾") > -1) {
  930. proxyData.outWeather.imgname = parseImgUrl("weather", "mai.png");
  931. } else if (text && text.indexOf("雾") > -1) {
  932. proxyData.outWeather.imgname = parseImgUrl("weather", "fog.png");
  933. } else if (text && text.indexOf("风") > -1) {
  934. proxyData.outWeather.imgname = parseImgUrl("weather", "wind.png");
  935. } else if (text && text.indexOf("雷") > -1) {
  936. proxyData.outWeather.imgname = parseImgUrl("weather", "thunder.png");
  937. } else {
  938. proxyData.outWeather.imgname = parseImgUrl("weather", "sun.png");
  939. }
  940. },
  941. // 判断空间类型
  942. checkSpaceType(roomFuncType: string) {
  943. let roomType: any = getWorkType(roomFuncType);
  944. if (roomType === "个人") {
  945. proxyData.roomType = "个人";
  946. proxyData.headerInfo.headImg = parseImgUrl(
  947. "page-officehome",
  948. "office_person_2.png"
  949. );
  950. proxyData.headerInfo.headScene = "工作";
  951. proxyData.popList = proxyData.listOffice;
  952. } else if (roomType === "会议室") {
  953. proxyData.roomType = "会议室";
  954. proxyData.popList = JSON.parse(JSON.stringify(proxyData.listSen));
  955. proxyData.headerInfo.headImg = parseImgUrl(
  956. "page-officehome",
  957. "office_normal_2.png"
  958. );
  959. // 获取会议室场
  960. proxyData.getPageMeetingSceneHttp();
  961. } else if (roomType === "开放") {
  962. // debugger
  963. proxyData.roomType = "开放";
  964. proxyData.headerInfo.headImg = parseImgUrl(
  965. "page-officehome",
  966. "office_publi_2.png"
  967. );
  968. } else {
  969. proxyData.roomType = "其它";
  970. proxyData.headerInfo.headImg = parseImgUrl(
  971. "page-officehome",
  972. "office_publi_2.png"
  973. );
  974. }
  975. if (roomType !== "会议室") {
  976. proxyData.timerSpaceInfo();
  977. }
  978. },
  979. /**
  980. * 检查用户可使用的权限
  981. */
  982. checkUserSpace() {
  983. let flag: any = false;
  984. // let flag: any = true
  985. for (let i = 0; i < proxyData.userSpaceInfo.length; i++) {
  986. if (
  987. proxyData.spaceInfo.spaceId === proxyData.userSpaceInfo[i].sp_id
  988. ) {
  989. flag = true;
  990. break;
  991. }
  992. }
  993. proxyData.userIsControl = flag;
  994. },
  995. /**
  996. * 获取用户控制权限
  997. */
  998. getUserControlAuth() {
  999. getUserControlAuth()
  1000. .then((res) => {
  1001. let resData: any = res;
  1002. if (resData.result === "success") {
  1003. proxyData.userSpaceInfo = resData.data;
  1004. } else {
  1005. proxyData.userSpaceInfo = [];
  1006. }
  1007. proxyData.checkUserSpace();
  1008. })
  1009. .catch(() => {
  1010. proxyData.userSpaceInfo = [];
  1011. proxyData.checkUserSpace();
  1012. });
  1013. },
  1014. controlMode: controlMode, // 当前空间的模式 0:自动控制 1:手动控制
  1015. // 获取空间信息
  1016. getSpaceInfo() {
  1017. // const userInfo =
  1018. const data: any = {
  1019. criteria: {
  1020. spaceId: proxyData.spaceInfo.spaceId,
  1021. projectId: proxyData.userInfo.projectId,
  1022. },
  1023. pubname: proxyData.userInfo.pubname,
  1024. openid: proxyData.userInfo.openid,
  1025. };
  1026. getSpaceInfo(data)
  1027. .then((res) => {
  1028. const content: any = res?.content ?? [];
  1029. console.log("timer===", 1);
  1030. if (content[0]) {
  1031. proxyData.officeData = content[0];
  1032. }
  1033. proxyData.officeData = proxyData.officeData
  1034. ? proxyData.officeData
  1035. : {};
  1036. if (proxyData.officeData.localName) {
  1037. proxyData.localName = proxyData.officeData.localName;
  1038. }
  1039. if (proxyData.officeData.temperature) {
  1040. proxyData.officeData.temperature =
  1041. proxyData.officeData.temperature.toFixed(1) * 1;
  1042. }
  1043. // proxyData.controlMode = proxyData.officeData.controlMode || 1;
  1044. proxyData.controlMode = proxyData.officeData.controlMode;
  1045. // 环境数据
  1046. proxyData.checkSpaceType(proxyData.officeData.roomFuncType);
  1047. proxyData.formatSpaceInfo(content);
  1048. proxyData.getPadImg();
  1049. // proxyData.setPageheight()
  1050. proxyData.loadinngEnd();
  1051. // 获取pad的背景图
  1052. })
  1053. .catch(() => {
  1054. proxyData.loadinngEnd();
  1055. proxyData.timerSpaceInfo();
  1056. });
  1057. },
  1058. // 定时调获取空调接口
  1059. getSpaceModeTimer() {
  1060. proxyData.spaceModelTimer = setTimeout(() => {
  1061. proxyData.getSpaceMode();
  1062. clearTimeout(proxyData.spaceModelTimer);
  1063. proxyData.spaceModelTimer = null;
  1064. }, 1000);
  1065. },
  1066. // 获取运行模式
  1067. getSpaceMode() {
  1068. getSpaceMode()
  1069. .then((res) => {
  1070. proxyData.getSpaceModeTimer();
  1071. })
  1072. .catch(() => {
  1073. proxyData.getSpaceModeTimer();
  1074. });
  1075. },
  1076. // 定时调用获取温度
  1077. getSpaceTempTimer() {
  1078. proxyData.spaceTempTimer = setTimeout(() => {
  1079. clearTimeout(proxyData.spaceTempTimer);
  1080. proxyData.spaceTempTimer = null;
  1081. proxyData.getSpaceTemp();
  1082. });
  1083. },
  1084. // 获取空间空调设备温度
  1085. getSpaceTemp() {
  1086. getSpaceTemp()
  1087. .then((res) => {
  1088. proxyData.getSpaceTempTimer();
  1089. })
  1090. .catch(() => {
  1091. proxyData.getSpaceTempTimer();
  1092. });
  1093. },
  1094. // 设置环境参数的背景颜色
  1095. setEnvBg(key: any, text: any) {
  1096. let bgColor: any = "";
  1097. if (key === "humidity") {
  1098. // 湿度
  1099. if (text === "干燥" || text === "潮湿") {
  1100. bgColor =
  1101. "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
  1102. } else {
  1103. bgColor = "";
  1104. }
  1105. } else if (key === "hcho") {
  1106. // 甲醛
  1107. if (text === "超标") {
  1108. bgColor =
  1109. "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
  1110. } else {
  1111. bgColor = "";
  1112. }
  1113. } else if (key === "co2") {
  1114. if (text === "略高") {
  1115. bgColor =
  1116. "linear-gradient(180deg, rgba(205, 11, 0, 0.5) 0%, #CD0B00 100%)";
  1117. } else if (text === "超标") {
  1118. bgColor =
  1119. "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
  1120. } else {
  1121. bgColor = "";
  1122. }
  1123. } else if (key === "pm25") {
  1124. if (text === "良") {
  1125. bgColor =
  1126. "linear-gradient(180deg, rgba(205, 11, 0, 0.2) 0%, #CD0B00 100%)";
  1127. } else if (text === "轻度污染") {
  1128. bgColor =
  1129. "linear-gradient(180deg, rgba(205, 11, 0, 0.4) 0%, #CD0B00 100%)";
  1130. } else if (text === "中度污染") {
  1131. bgColor =
  1132. "linear-gradient(180deg, rgba(205, 11, 0, 0.6) 0%, #CD0B00 100%)";
  1133. } else if (text === "重度污染") {
  1134. bgColor =
  1135. "linear-gradient(180deg, rgba(205, 11, 0, 0.8) 0%, #CD0B00 100%)";
  1136. } else if (text === "严重污染") {
  1137. bgColor =
  1138. "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
  1139. } else {
  1140. bgColor = "";
  1141. }
  1142. }
  1143. return bgColor;
  1144. },
  1145. // 格式化环境数据(处理环境数据展示的级别)
  1146. checkLevel(value: string, name: string) {
  1147. let objList = {
  1148. humidity: {
  1149. range: [30, 70],
  1150. text: ["干燥", "健康", "潮湿"],
  1151. },
  1152. co2: {
  1153. range: [800, 1000, 1500],
  1154. text: ["健康", "达标", "略高", "超标"],
  1155. },
  1156. pm25: {
  1157. range: [35, 75, 115, 150, 250],
  1158. text: [
  1159. "健康",
  1160. "良",
  1161. "轻度污染",
  1162. "中度污染",
  1163. "重度污染",
  1164. "严重污染",
  1165. ],
  1166. },
  1167. hcho: {
  1168. range: [0.1],
  1169. text: ["健康", "超标"],
  1170. },
  1171. };
  1172. let sortArr = [value, ...objList[name].range].sort((a, b) => {
  1173. return a - b;
  1174. });
  1175. let level = sortArr.findIndex((item) => item === value);
  1176. let levelTxt = objList[name].text[level];
  1177. let bgColor: any = proxyData.setEnvBg(name, levelTxt);
  1178. return {
  1179. level,
  1180. levelTxt,
  1181. bgColor,
  1182. };
  1183. },
  1184. /**
  1185. *设置当前页面的高度
  1186. */
  1187. setPageheight() {
  1188. nextTick(() => {
  1189. document.getElementById("envBox").style.height =
  1190. document.getElementById("envBox").offsetHeight + "px";
  1191. });
  1192. },
  1193. // 空间信息数据格式化
  1194. formatSpaceInfo(content: any = []) {
  1195. for (let i = 0; i < content.length; i++) {
  1196. let item = content[i];
  1197. if (item.co2 || item.co2 == 0) {
  1198. let obj: any = proxyData.checkLevel(item.co2, "co2");
  1199. proxyData.envlist[1].level = obj.levelTxt;
  1200. proxyData.envlist[1].bgColor = obj.bgColor;
  1201. proxyData.envlist[1].num = item.co2;
  1202. } else {
  1203. proxyData.envlist[1].level = "--";
  1204. proxyData.envlist[1].num = "--";
  1205. proxyData.envlist[1].bgColor = "";
  1206. }
  1207. if (item.pm25 || item.pm25 === 0) {
  1208. let obj: any = proxyData.checkLevel(item.pm25, "pm25");
  1209. proxyData.envlist[2].level = obj.levelTxt;
  1210. proxyData.envlist[2].bgColor = obj.bgColor;
  1211. proxyData.envlist[2].num = item.pm25;
  1212. } else {
  1213. proxyData.envlist[2].level = "--";
  1214. proxyData.envlist[2].num = "--";
  1215. proxyData.envlist[2].bgColor = "";
  1216. }
  1217. if (item.hcho || item.hcho == 0) {
  1218. let obj: any = proxyData.checkLevel(item.hcho, "hcho");
  1219. proxyData.envlist[0].level = obj.levelTxt;
  1220. proxyData.envlist[0].bgColor = obj.bgColor;
  1221. proxyData.envlist[0].num = item.hcho.toFixed(2);
  1222. } else {
  1223. proxyData.envlist[0].level = "--";
  1224. proxyData.envlist[0].num = "--";
  1225. proxyData.envlist[0].bgColor = "";
  1226. }
  1227. if (item.humidity || item.humidity == 0) {
  1228. let obj: any = proxyData.checkLevel(item.humidity, "humidity");
  1229. proxyData.envlist[3].level = obj.levelTxt;
  1230. proxyData.envlist[3].bgColor = obj.bgColor;
  1231. proxyData.envlist[3].num = item.humidity.toFixed(0);
  1232. } else {
  1233. proxyData.envlist[3].level = "--";
  1234. proxyData.envlist[3].num = "--";
  1235. proxyData.envlist[3].bgColor = "";
  1236. }
  1237. }
  1238. },
  1239. activeType: "", // 当前会议室场景
  1240. // 获取会议室场景(如果是会议室的才调此接口)
  1241. getPageMeetingSceneHttp() {
  1242. const params: { spaceId: string } = {
  1243. spaceId: proxyData.spaceInfo.spaceId,
  1244. };
  1245. getMeetingSceneHttp(params)
  1246. .then((res) => {
  1247. let resSen: string = res?.content ?? "";
  1248. if (resSen === "OFFWORK") {
  1249. resSen = "ADJOURNMENT";
  1250. }
  1251. proxyData.activeType = resSen;
  1252. // 定时调空间数据
  1253. proxyData.timerSpaceInfo();
  1254. })
  1255. .catch(() => {
  1256. proxyData.timerSpaceInfo();
  1257. });
  1258. },
  1259. // 切换场景的状态
  1260. secenaroStatus: secenaroStatus,
  1261. // 设置场景名称
  1262. setHeadScene(item: any) {
  1263. proxyData.isShowMetting = true;
  1264. proxyData.secenaroStatus = {
  1265. localName: proxyData.officeData.localName,
  1266. loading: item.loading,
  1267. lodingText: item.lodingText,
  1268. sceneName: item.sceneName,
  1269. };
  1270. console.log(proxyData.secenaroStatus);
  1271. },
  1272. closeDailog() {
  1273. proxyData.isShowMetting = false;
  1274. },
  1275. isShowDetail: false,
  1276. detailQuery: detailQuery,
  1277. handleDetail(item: any) {
  1278. proxyData.isShowDetail = true;
  1279. proxyData.detailQuery.funcid = item.funcid;
  1280. proxyData.detailQuery.spaceId = proxyData.spaceInfo.spaceId;
  1281. // router.push({
  1282. // path: '/envmonitor-detail',
  1283. // query: {
  1284. // funcid: item.funcid,
  1285. // spaceId: proxyData.spaceInfo.spaceId
  1286. // }
  1287. // })
  1288. },
  1289. // 获取空调设备温度
  1290. updateAirTemp(airTemp: any) {
  1291. proxyData.airTemp = airTemp;
  1292. proxyData.setHeadSceneAirTemp();
  1293. },
  1294. // 设置场景切换时候的温度
  1295. setHeadSceneAirTemp() {
  1296. if (
  1297. proxyData.sceneDetail &&
  1298. proxyData.sceneDetail.textObj &&
  1299. proxyData.sceneDetail.textObj.length
  1300. ) {
  1301. if (
  1302. proxyData.airTemp &&
  1303. (proxyData.sceneDetail.code == "DISCUSSING" ||
  1304. proxyData.sceneDetail.code == "PROJECTING")
  1305. ) {
  1306. for (let i = 0; i < proxyData.sceneDetail.textObj.length; i++) {
  1307. let item: any = proxyData.sceneDetail.textObj;
  1308. if (item.type === "air") {
  1309. item.text = item.text + ",目标温度" + proxyData.airTemp;
  1310. }
  1311. }
  1312. }
  1313. }
  1314. },
  1315. // 提前关闭
  1316. handlePreClose() {
  1317. let endDate: any = formatDate();
  1318. let endTime: any = getHours();
  1319. if (endTime < 10) {
  1320. endTime = `0${endTime}`;
  1321. }
  1322. const params = {
  1323. projectId: proxyData.projectId,
  1324. objectId: proxyData.spaceInfo.spaceId, // 空间ID
  1325. endDate: endDate, // 结束日期 "20210310",
  1326. endTime: endTime + "0000", // 结束时间 "090000"
  1327. type: 3, // 0 预约加班,1 取消,2 我来了/确定, 3 我走了
  1328. };
  1329. changeSetTimeHttp(params).then((res) => {
  1330. const resData: any = res;
  1331. if (resData.result == "success") {
  1332. proxyData.changeLampStatus();
  1333. }
  1334. });
  1335. },
  1336. // 提前关闭更改状态
  1337. changeLampStatus() {
  1338. proxyData.showWorkOff = false;
  1339. proxyData.headerInfo.tipText = "选择工作结束时间";
  1340. proxyData.headerInfo.tipTextSwatch = true;
  1341. },
  1342. // 获取空间下的设备信息
  1343. getEquipments() {
  1344. let params: { spaceId: string } = {
  1345. spaceId: proxyData.spaceInfo.spaceId,
  1346. // projectId: proxyData.projectId,
  1347. };
  1348. let queryParams: any = setQueryConfig(params);
  1349. getSpaceEquipType(queryParams).then((res) => {
  1350. let resData: any = res;
  1351. if (resData.result === "success") {
  1352. let data: any = resData?.data ?? [];
  1353. for (let key in proxyData.spaceExistenceDevice) {
  1354. let flag: any = false;
  1355. for (let i = 0; i < data.length; i++) {
  1356. if (key == data[i]) {
  1357. flag = true;
  1358. }
  1359. }
  1360. proxyData.spaceExistenceDevice[key] = flag;
  1361. }
  1362. // app端底部的导航判断
  1363. if (proxyData.spaceExistenceDevice.light) {
  1364. proxyData.navList[1].noShow = true;
  1365. } else {
  1366. proxyData.navList[1].noShow = false;
  1367. }
  1368. if (proxyData.spaceExistenceDevice.curtain) {
  1369. proxyData.navList[2].noShow = true;
  1370. } else {
  1371. proxyData.navList[2].noShow = false;
  1372. }
  1373. }
  1374. });
  1375. },
  1376. // 时间格式转换
  1377. hourMiChange(tempStr: number) {
  1378. // 转为时间 19.3 - 19:30 19.41-19:41 19-19:00
  1379. let str = tempStr.toString();
  1380. let newStr = "";
  1381. let dLen = str.length > 2 ? str.split(".")[1].length : str;
  1382. if (dLen === 1) {
  1383. str = str.replace(".", "") + "0";
  1384. newStr = str.slice(0, 2) + ":" + str.slice(2);
  1385. } else if (dLen === 2) {
  1386. str = str.replace(".", "");
  1387. newStr = str.slice(0, 2) + ":" + str.slice(2);
  1388. } else {
  1389. newStr = str + ":00";
  1390. }
  1391. return newStr;
  1392. },
  1393. // 点击切换会议室场景
  1394. handlePopup(type: string = "scenario") {
  1395. if (proxyData.userIsControl) {
  1396. proxyData.showScenario = !proxyData.showScenario;
  1397. if (proxyData.showScenario) {
  1398. proxyData.deviceIcon = "arrow-down";
  1399. } else {
  1400. proxyData.deviceIcon = "arrow";
  1401. }
  1402. proxyData.popupType = type;
  1403. } else {
  1404. Toast("您没有当前空间的控制权限!");
  1405. }
  1406. },
  1407. // 切换空间
  1408. triggerCheckSpace() {
  1409. let ele: any = document.getElementById("envContent");
  1410. let houseEle: any = document.getElementById("houseDes");
  1411. let houseHeight: any = houseEle.offsetHeight;
  1412. proxyData.opacityV = 0;
  1413. proxyData.mapOpacity = 1;
  1414. ele.scrollTop = 0;
  1415. let top: any = 0;
  1416. let interval: any = setInterval(() => {
  1417. top = top + 15;
  1418. if (top < screenHeight - houseHeight) {
  1419. ele.style.top = top + "px";
  1420. } else {
  1421. ele.style.top = screenHeight - houseHeight + "px";
  1422. clearInterval(interval);
  1423. }
  1424. }, 10);
  1425. proxyData.hideTopImg = true;
  1426. proxyData.isBottom = true;
  1427. },
  1428. /**
  1429. * 加载loading
  1430. */
  1431. loadingStart() {
  1432. Toast.loading({
  1433. duration: 0, // 持续展示 toast
  1434. forbidClick: true,
  1435. message: "加载中...",
  1436. });
  1437. },
  1438. /**
  1439. * 结束
  1440. */
  1441. loadinngEnd() {
  1442. Toast.clear();
  1443. },
  1444. // 清除定时器
  1445. clearTimerSpaceInfo() {
  1446. clearTimeout(proxyData.spaceTimer);
  1447. proxyData.spaceTimer = null;
  1448. },
  1449. // 定时调空间
  1450. timerSpaceInfo(timer: any = 5000) {
  1451. proxyData.spaceTimer = setTimeout(() => {
  1452. proxyData.getSpaceInfo();
  1453. proxyData.clearTimerSpaceInfo();
  1454. }, timer);
  1455. },
  1456. isWork: false,
  1457. isMetting: false,
  1458. // 判断对应的办公室的场景展示
  1459. checkIsSpaceScene() {
  1460. proxyData.scenarioArr.map((item: any) => {
  1461. if (item.sceneType === "OVERTIME") {
  1462. proxyData.isWork = true;
  1463. }
  1464. });
  1465. },
  1466. /**
  1467. * 获取场景列表
  1468. */
  1469. scenarioArr: scenarioArr,
  1470. sceneConfigTimer: sceneConfigTimer,
  1471. clearSceneConfigTimer() {
  1472. clearTimeout(proxyData.sceneConfigTimer);
  1473. },
  1474. // 定时获取场景的配置
  1475. querySpaceSceneConfigTimer(timer: any = 100000) {
  1476. proxyData.clearSceneConfigTimer();
  1477. proxyData.sceneConfigTimer = setTimeout(() => {
  1478. proxyData.querySpaceSceneConfig();
  1479. proxyData.clearSceneConfigTimer();
  1480. }, timer);
  1481. },
  1482. querySpaceSceneConfig() {
  1483. let params: any = {
  1484. spaceId: proxyData.spaceInfo.spaceId,
  1485. };
  1486. let str: any = setQueryConfig(params);
  1487. // debugger;
  1488. querySpaceSceneConfig(str)
  1489. .then((res) => {
  1490. let resData: any = res;
  1491. let data: any = resData?.data ?? [];
  1492. proxyData.scenarioArr = data;
  1493. proxyData.checkIsSpaceScene();
  1494. proxyData.querySpaceSceneConfigTimer();
  1495. })
  1496. .catch((error: any) => {
  1497. proxyData.querySpaceSceneConfigTimer();
  1498. });
  1499. },
  1500. /**
  1501. *查询空间加班记录
  1502. */
  1503. workkArr: workkArr,
  1504. secenTimer: secenTimer,
  1505. // 清除查询加班记录的定时器
  1506. clearSecenTimer() {
  1507. clearTimeout(proxyData.secenTimer);
  1508. proxyData.secenTimer = null;
  1509. },
  1510. // 清除定时器
  1511. clearEquipTimer() {
  1512. clearTimeout(proxyData.equipTimer);
  1513. proxyData.equipTimer = null;
  1514. },
  1515. // 定时器
  1516. getSpaceEquipListTimer(timerLen: any = 30000) {
  1517. proxyData.clearEquipTimer();
  1518. proxyData.equipTimer = setTimeout(() => {
  1519. proxyData.getSpaceEquipList();
  1520. proxyData.clearEquipTimer();
  1521. }, timerLen);
  1522. },
  1523. // 查询空间下面受控的设备
  1524. getSpaceEquipList() {
  1525. let params: any = {
  1526. spaceId: proxyData.spaceInfo.spaceId,
  1527. };
  1528. let str: any = setQueryConfig(params);
  1529. getSpaceEquipList(str)
  1530. .then((res: any) => {
  1531. let data: any = res.data || [];
  1532. proxyData.spaceEquipList = data;
  1533. proxyData.checkDeviceShowWork(); // 判断手动控制的设备是否要开启手动控制功能
  1534. // proxyData.getSpaceEquipListTimer();
  1535. })
  1536. .catch((error: any) => {
  1537. // proxyData.getSpaceEquipListTimer();
  1538. });
  1539. },
  1540. // 定时查空间的加班记录
  1541. queryCustomAndScenceTimer(timer: any = 10000) {
  1542. proxyData.clearSecenTimer();
  1543. proxyData.secenTimer = setTimeout(() => {
  1544. proxyData.queryCustomAndScence();
  1545. proxyData.clearSecenTimer();
  1546. }, timer);
  1547. },
  1548. // 定时查空间的加班记录
  1549. queryCustomAndScence() {
  1550. let params: any = {
  1551. spaceId: proxyData.spaceInfo.spaceId,
  1552. };
  1553. let str: any = setQueryConfig(params);
  1554. queryCustomAndScence(str)
  1555. .then((res) => {
  1556. let resData: any = res?.data ?? [];
  1557. // 手动控制的情况下走新的服务定制
  1558. proxyData.workkArr = resData;
  1559. for (let i = 0; i < resData.length; i++) {
  1560. let customSceneList: any = resData[i]?.customSceneList ?? [];
  1561. customSceneList = customSceneList.sort(proxyData.compare);
  1562. }
  1563. proxyData.queryCustomAndScenceTimer();
  1564. })
  1565. .catch(() => {
  1566. proxyData.queryCustomAndScenceTimer();
  1567. });
  1568. },
  1569. // 数组排序
  1570. compare(obj1: any, obj2: any) {
  1571. var val1 = obj1.startTime;
  1572. var val2 = obj2.startTime;
  1573. if (val1 < val2) {
  1574. return -1;
  1575. } else if (val1 > val2) {
  1576. return 1;
  1577. } else {
  1578. return 0;
  1579. }
  1580. },
  1581. // 格式化当前页面展示的时间
  1582. formateWorkTime() {},
  1583. /**
  1584. * 空间相关的接口
  1585. */
  1586. init() {
  1587. proxyData.padNumber = 0;
  1588. // proxyData.roomType = "";
  1589. // 获取场景配置
  1590. proxyData.getSpaceInfo();
  1591. // 动态获取场景配置
  1592. proxyData.querySpaceSceneConfig();
  1593. // 获取空间下受控设备
  1594. proxyData.getSpaceEquipList();
  1595. // 查询加班记录
  1596. proxyData.queryCustomAndScence();
  1597. // 获取空间下的设备信息
  1598. proxyData.getEquipments();
  1599. },
  1600. /**
  1601. *删除参数
  1602. */
  1603. updatePageUrl() {
  1604. let history: any = window.history;
  1605. let url: any = window.location.origin + window.location.pathname;
  1606. history.replaceState("", "", url);
  1607. },
  1608. // 平板当前空间
  1609. spaceData: spaceData,
  1610. copySpaceData: spaceData,
  1611. floorId: "",
  1612. buildingId: "",
  1613. // 获取pad当前绑定的空间
  1614. queryWorkSpace() {
  1615. let params: any = {
  1616. criteria: {
  1617. //类型:Object 必有字段 备注:无
  1618. projectId: proxyData.userInfo.projectId,
  1619. spaceName: "",
  1620. macAddress: proxyData.userInfo.mac, //类型:String 必有字段 备注:mac地址
  1621. },
  1622. orders: [
  1623. //类型:Array 必有字段 备注:无
  1624. {
  1625. //类型:Object 必有字段 备注:无
  1626. column: "isMajorSpace", //类型:String 必有字段 备注:无
  1627. asc: false, //类型:Boolean 必有字段 备注:无
  1628. },
  1629. ],
  1630. };
  1631. queryWorkSpace(params).then((res) => {
  1632. let resData: any = res;
  1633. if (resData.result === "success") {
  1634. proxyData.spaceData = resData?.content ?? [];
  1635. // proxyData.copySpaceData = resData?.content ?? [];
  1636. } else {
  1637. proxyData.spaceData = [];
  1638. }
  1639. proxyData.spaceData.map((item: any) => {
  1640. if (proxyData.spaceInfo.spaceId === item.spaceId) {
  1641. item.active = true;
  1642. proxyData.spaceInfo = item;
  1643. } else {
  1644. item.active = false;
  1645. }
  1646. // if (item.isMajorSpace) {
  1647. // item.active = true;
  1648. // proxyData.spaceInfo = item;
  1649. // } else {
  1650. // item.active = false;
  1651. // }
  1652. });
  1653. proxyData.copySpaceData = JSON.parse(
  1654. JSON.stringify(proxyData.spaceData)
  1655. );
  1656. });
  1657. },
  1658. // 重置空间状态
  1659. resetSpaceStatus() {
  1660. /**
  1661. *重新获取设备的时候,先初始化数据
  1662. */
  1663. proxyData.spaceExistenceDevice = {
  1664. curtain: false,
  1665. light: false,
  1666. airConditioner: false,
  1667. bodySensor: false,
  1668. };
  1669. proxyData.spaceData.map((item: any) => {
  1670. item.active = false;
  1671. });
  1672. proxyData.controlMode = 0; // 模式变成自动的
  1673. proxyData.isWork = false;
  1674. proxyData.roomType = "";
  1675. proxyData.officeData.temperature = "";
  1676. proxyData.spaceExistenceDevice = spaceExistenceDevice;
  1677. // 切换空间的时候把加班按钮平板
  1678. proxyData.setForceOverTimeFlag(false);
  1679. },
  1680. // 更多空间
  1681. isShowMap: false,
  1682. defaultSpace: spaceInfo,
  1683. moreSpace() {
  1684. proxyData.isShowMap = true;
  1685. proxyData.defaultSpace = proxyData.spaceInfo;
  1686. },
  1687. // 数组元素更换位置
  1688. elChangeExForArray(item: any) {
  1689. let index1: any = 1;
  1690. let index2: any = 0;
  1691. for (let i = 0; i < proxyData.spaceData.length; i++) {
  1692. if (item.spaceId === proxyData.spaceData[i].spaceId) {
  1693. proxyData.spaceData[i].active = true;
  1694. if (i > 2) {
  1695. index2 = i;
  1696. break;
  1697. }
  1698. }
  1699. }
  1700. if (index2) {
  1701. let temp = proxyData.spaceData[index1];
  1702. proxyData.spaceData[index1] = proxyData.spaceData[index2];
  1703. proxyData.spaceData[index2] = temp;
  1704. }
  1705. },
  1706. // 切换空间
  1707. changeSpace(item: any, type: any = 0) {
  1708. //清除空间下所有的定时器
  1709. proxyData.clearAll();
  1710. // 重置当前选中空间的状态
  1711. proxyData.resetSpaceStatus();
  1712. proxyData.spaceInfo = item;
  1713. if (type === 1) {
  1714. proxyData.defaultSpace = item;
  1715. proxyData.elChangeExForArray(item);
  1716. }
  1717. item.active = true;
  1718. proxyData.init();
  1719. },
  1720. timeOutEvent: timeOutEvent,
  1721. touchNumber: 0,
  1722. gtouchstart(e: any) {
  1723. proxyData.touchNumber = 0;
  1724. proxyData.timeOutEvent = setTimeout(function () {
  1725. proxyData.touchNumber = 1;
  1726. proxyData.longPress();
  1727. }, 500); //这里设置定时器,定义长按500毫秒触发长按事件
  1728. return false;
  1729. },
  1730. //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
  1731. showDeleteButton() {
  1732. console.log("dddd-");
  1733. clearInterval(proxyData.touchInterval);
  1734. proxyData.touchInterval = null;
  1735. clearTimeout(proxyData.timeOutEvent); //清除定时器
  1736. if (proxyData.timeOutEvent != 0) {
  1737. }
  1738. return false;
  1739. },
  1740. //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
  1741. gtouchmove() {
  1742. clearTimeout(this.timeOutEvent); //清除定时器
  1743. proxyData.timeOutEvent = 0;
  1744. },
  1745. touchInterval: touchInterval,
  1746. //真正长按后应该执行的内容
  1747. longPress() {
  1748. proxyData.timeOutEvent = 0;
  1749. proxyData.touchInterval = setInterval(() => {
  1750. proxyData.touchNumber++;
  1751. if (proxyData.touchNumber === 6) {
  1752. clearInterval(proxyData.touchInterval);
  1753. proxyData.touchInterval = null;
  1754. router.push({
  1755. name: "home",
  1756. query: { mac: proxyData.userInfo.mac, type: "logoOut" },
  1757. });
  1758. }
  1759. }, 1000);
  1760. //执行长按要执行的内容,如弹出菜单
  1761. // console.log("长按");
  1762. },
  1763. // 定时器清除
  1764. clearAll() {
  1765. proxyData.clearTimerSpaceInfo();
  1766. proxyData.clearSceneConfigTimer();
  1767. proxyData.clearSecenTimer();
  1768. proxyData.clearEquipTimer();
  1769. },
  1770. });
  1771. onBeforeUnmount(() => {
  1772. proxyData.clearAll();
  1773. });
  1774. onMounted(() => {
  1775. let spaceId: any = route.query.spaceId;
  1776. proxyData.spaceInfo = {
  1777. spaceId: spaceId,
  1778. };
  1779. proxyData.defaultSpace = {
  1780. spaceId: spaceId,
  1781. };
  1782. proxyData.init();
  1783. // 获取当前平板绑定的空间
  1784. proxyData.queryWorkSpace();
  1785. proxyData.getWeather();
  1786. });
  1787. return {
  1788. ...toRefs(proxyData),
  1789. };
  1790. },
  1791. });
  1792. </script>
  1793. <style lang="scss" scoped>
  1794. .main {
  1795. display: flex;
  1796. justify-content: space-between;
  1797. width: 100%;
  1798. height: 100%;
  1799. box-sizing: border-box;
  1800. padding: 3.33vh 20px 0 20px;
  1801. font-size: 0;
  1802. background-image: linear-gradient(
  1803. 0deg,
  1804. rgba(69, 33, 0, 0.2),
  1805. rgba(69, 33, 0, 0.2)
  1806. );
  1807. background-size: 100% 100%;
  1808. overflow: hidden;
  1809. .main-left {
  1810. // padding-left: 20px;
  1811. display: inline-block;
  1812. //width: 54%;
  1813. .left-top {
  1814. width: 100%;
  1815. overflow: hidden;
  1816. white-space: nowrap;
  1817. text-overflow: ellipsis;
  1818. -o-text-overflow: ellipsis;
  1819. .logo-box {
  1820. display: inline-block;
  1821. vertical-align: middle;
  1822. width: 60px;
  1823. height: 20px;
  1824. }
  1825. .left-time {
  1826. span {
  1827. font-family: "Montserrat";
  1828. font-style: normal;
  1829. font-weight: 400;
  1830. font-size: 16px;
  1831. line-height: 20px;
  1832. color: #ffffff;
  1833. }
  1834. }
  1835. .logo-icon {
  1836. display: inline-block;
  1837. vertical-align: middle;
  1838. width: 60px;
  1839. height: 20px;
  1840. margin-right: 5px;
  1841. }
  1842. div {
  1843. vertical-align: middle;
  1844. display: inline-block;
  1845. font-family: "Montserrat";
  1846. font-style: normal;
  1847. font-weight: 400;
  1848. font-size: 16px;
  1849. line-height: 20px;
  1850. color: #ffffff;
  1851. span {
  1852. display: inline-block;
  1853. vertical-align: middle;
  1854. &:nth-child(1) {
  1855. padding: 10px;
  1856. }
  1857. }
  1858. }
  1859. .weather {
  1860. padding-left: 22px;
  1861. line-height: 24px;
  1862. // font-size: 0;
  1863. // padding-right: 5px;
  1864. .weather-icon {
  1865. width: 24px;
  1866. height: 24px;
  1867. margin-right: 10px;
  1868. display: inline-block;
  1869. vertical-align: middle;
  1870. }
  1871. span {
  1872. display: inline-block;
  1873. vertical-align: middle;
  1874. font-family: "Montserrat";
  1875. font-style: normal;
  1876. font-weight: 400;
  1877. font-size: 16px;
  1878. padding-top: 2px;
  1879. }
  1880. }
  1881. .weixiin {
  1882. margin-left: 20px;
  1883. img {
  1884. margin-right: 5px;
  1885. width: 24px;
  1886. height: 24px;
  1887. display: inline-block;
  1888. vertical-align: middle;
  1889. }
  1890. }
  1891. }
  1892. .left-space {
  1893. padding-top: 12vh;
  1894. padding-right: 30px;
  1895. .text {
  1896. position: relative;
  1897. width: 100%;
  1898. overflow: hidden;
  1899. white-space: nowrap;
  1900. text-overflow: ellipsis;
  1901. -o-text-overflow: ellipsis;
  1902. div {
  1903. display: inline-block;
  1904. vertical-align: middle;
  1905. &:nth-child(1) {
  1906. font-style: normal;
  1907. font-weight: 500;
  1908. font-size: 40px;
  1909. line-height: 58px;
  1910. color: #ffffff;
  1911. }
  1912. &:nth-child(2) {
  1913. position: absolute;
  1914. bottom: 12px;
  1915. width: 70px;
  1916. height: 25px;
  1917. line-height: 25px;
  1918. text-align: center;
  1919. margin-left: 10px;
  1920. background: #edf1f5;
  1921. border-radius: 10px;
  1922. img {
  1923. display: inline-block;
  1924. vertical-align: middle;
  1925. width: 15px;
  1926. height: 15px;
  1927. // margin-top: 4px;
  1928. }
  1929. span {
  1930. display: inline-block;
  1931. vertical-align: middle;
  1932. margin-left: 4px;
  1933. font-weight: 400;
  1934. font-size: 12px;
  1935. line-height: 15px;
  1936. color: #8b949e;
  1937. }
  1938. }
  1939. }
  1940. }
  1941. }
  1942. .space-info {
  1943. // padding-top: 48px;
  1944. padding-top: 6vh;
  1945. .space-temp {
  1946. padding-bottom: 13px;
  1947. // border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
  1948. overflow: hidden;
  1949. white-space: nowrap;
  1950. text-overflow: ellipsis;
  1951. -o-text-overflow: ellipsis;
  1952. img {
  1953. display: inline-block;
  1954. vertical-align: middle;
  1955. width: 22px;
  1956. height: 40px;
  1957. }
  1958. span {
  1959. display: inline-block;
  1960. vertical-align: middle;
  1961. padding-left: 14px;
  1962. }
  1963. .temp-text {
  1964. font-family: "Noto Sans SC";
  1965. font-style: normal;
  1966. font-weight: 500;
  1967. font-size: 32px;
  1968. line-height: 46px;
  1969. text-align: center;
  1970. color: #ffffff;
  1971. padding-left: 13px;
  1972. }
  1973. .temp-num {
  1974. position: relative;
  1975. padding-left: 24px;
  1976. font-family: "Montserrat";
  1977. font-style: normal;
  1978. font-weight: 400;
  1979. font-size: 60px;
  1980. line-height: 73px;
  1981. color: #ffffff;
  1982. sup {
  1983. position: absolute;
  1984. top: 0;
  1985. font-family: "Noto Sans SC";
  1986. font-style: normal;
  1987. font-weight: 500;
  1988. font-size: 13px;
  1989. line-height: 19px;
  1990. color: #ffffff;
  1991. }
  1992. }
  1993. }
  1994. }
  1995. .space-env {
  1996. display: flex;
  1997. // padding-top: 20px;
  1998. padding-top: 5vh;
  1999. justify-content: space-between;
  2000. text-align: left;
  2001. overflow: hidden;
  2002. white-space: nowrap;
  2003. text-overflow: ellipsis;
  2004. -o-text-overflow: ellipsis;
  2005. .env-item {
  2006. padding-top: 8px;
  2007. height: 88px;
  2008. &:nth-child(1) {
  2009. text-align: left;
  2010. width: 129px;
  2011. }
  2012. &:nth-child(2) {
  2013. // text-align: center;
  2014. padding-left: 20px;
  2015. width: 129px;
  2016. }
  2017. &:nth-child(3) {
  2018. // text-align: center;
  2019. padding-left: 20px;
  2020. width: 125px;
  2021. }
  2022. &:nth-child(4) {
  2023. // text-align: center;
  2024. padding-left: 20px;
  2025. width: 100px;
  2026. }
  2027. div {
  2028. img {
  2029. display: inline-block;
  2030. vertical-align: middle;
  2031. width: 20px;
  2032. height: 20px;
  2033. margin-right: 5px;
  2034. }
  2035. span {
  2036. display: inline-block;
  2037. vertical-align: middle;
  2038. font-size: 16px;
  2039. line-height: 23px;
  2040. text-align: center;
  2041. color: #ffffff;
  2042. }
  2043. &:nth-child(2) {
  2044. padding-top: 10px;
  2045. font-family: "Montserrat";
  2046. font-style: normal;
  2047. font-weight: 400;
  2048. font-size: 32px;
  2049. line-height: 39px;
  2050. color: #ffffff;
  2051. sup {
  2052. font-family: "Noto Sans SC";
  2053. font-style: normal;
  2054. font-weight: 500;
  2055. font-size: 13px;
  2056. line-height: 19px;
  2057. }
  2058. }
  2059. }
  2060. .env-text {
  2061. position: relative;
  2062. width: 100%;
  2063. // text-align: left;
  2064. sup {
  2065. position: absolute;
  2066. // right: -5px;
  2067. top: 10px;
  2068. }
  2069. }
  2070. }
  2071. .env-item-radius {
  2072. border-radius: 25px;
  2073. }
  2074. .env-color {
  2075. // background: linear-gradient(
  2076. // 180deg,
  2077. // rgba(205, 11, 0, 0) 0%,
  2078. // #cd0b00 100%
  2079. // );
  2080. // opacity: 0.8;
  2081. // border-radius: 25px;
  2082. }
  2083. }
  2084. }
  2085. .main-right {
  2086. //width: 45%;
  2087. // width: 330px;
  2088. padding-bottom: 20px;
  2089. display: inline-block;
  2090. overflow: auto;
  2091. .work-btn {
  2092. width: 100%;
  2093. height: 98px;
  2094. font-size: 14px;
  2095. text-align: left;
  2096. }
  2097. }
  2098. .fotter {
  2099. position: fixed;
  2100. font-size: 0;
  2101. left: 0;
  2102. bottom: 0;
  2103. z-index: 666;
  2104. .fotter-item {
  2105. position: relative;
  2106. display: inline-block;
  2107. vertical-align: middle;
  2108. width: 186px;
  2109. height: 40px;
  2110. font-size: 0;
  2111. img {
  2112. width: 100%;
  2113. height: 40px;
  2114. }
  2115. &:nth-child(1) {
  2116. left: 0;
  2117. z-index: 333;
  2118. }
  2119. &:nth-child(2) {
  2120. margin-left: -25px;
  2121. z-index: 222;
  2122. }
  2123. &:nth-child(3) {
  2124. margin-left: -25px;
  2125. z-index: 111;
  2126. }
  2127. span {
  2128. position: absolute;
  2129. display: inline-block;
  2130. width: 128px;
  2131. height: 18px;
  2132. left: 50%;
  2133. top: 50%;
  2134. transform: translateY(-40%) translateX(-50%);
  2135. font-family: "Noto Sans SC";
  2136. font-style: normal;
  2137. font-weight: 400;
  2138. font-size: 16px;
  2139. line-height: 18px;
  2140. text-align: center;
  2141. color: #c3c7cb;
  2142. word-wrap: break-word; /*强制换行*/
  2143. overflow: hidden; /*超出隐藏*/
  2144. text-overflow: ellipsis; /*隐藏后添加省略号*/
  2145. white-space: nowrap; /*强制不换行*/
  2146. }
  2147. }
  2148. .fotter-item-end {
  2149. position: relative;
  2150. display: inline-block;
  2151. vertical-align: middle;
  2152. width: 93px;
  2153. height: 40px;
  2154. margin-left: -30px;
  2155. text-align: center;
  2156. z-index: 1;
  2157. img {
  2158. width: 100%;
  2159. }
  2160. span {
  2161. position: absolute;
  2162. left: 50%;
  2163. top: 50%;
  2164. transform: translate(-50%, -50%);
  2165. font-family: "Noto Sans SC";
  2166. font-style: normal;
  2167. font-weight: 400;
  2168. font-size: 16px;
  2169. text-align: center;
  2170. color: #c3c7cb;
  2171. }
  2172. }
  2173. .fotter-item-active {
  2174. margin-bottom: 0px;
  2175. z-index: 999;
  2176. img {
  2177. height: 40px;
  2178. }
  2179. span {
  2180. color: #1f2429;
  2181. }
  2182. }
  2183. }
  2184. }
  2185. </style>
  2186. <style lang="scss">
  2187. .map-popup {
  2188. background: $elBg;
  2189. }
  2190. </style>