vue 调用同步异步方法

谁践踏了优雅 2022-09-06 00:17 185阅读 0赞

<div class="warningContent">

<div class="warningTitle" @click="showAll">

<el-tooltip

class="item"

effect="dark"

content="点击展示全部预警信息"

placement="top"

</el-tooltip>

<span>(</span><span>\{ \{ warningList.length == 4 ? "0" : numberAll \}\}</span

><span>)</span>

</div>

<div class="quanbuAll" v-if="isShowAll">

<div class="quanTitle">

<div class="titleName">预警信息</div>

<ul class="quanTitle\_ul">

<li :class="\{ activeLi: showUlLiIndex == 0 \}" @click="clickYuJing(0)">

全部预警<span>(</span><span>\{ \{ numberAll \}\}</span

><span>)</span>

</li>

<li :class="\{ activeLi: showUlLiIndex == 1 \}" @click="clickYuJing(1)">

天气预警<span>(</span><span>\{ \{ numberTQ \}\}</span

><span>)</span>

</li>

<li :class="\{ activeLi: showUlLiIndex == 2 \}" @click="clickYuJing(2)">

建筑评分预警<span>(</span><span>\{ \{ numberJZ \}\}</span

><span>)</span>

</li>

</ul>

<div class="shutImg" @click="handleClose">

<img src="@/assets/secondPage/shut.png" alt="" />

</div>

<div class="quanbuContent">

<div

class="rdyqlistItemFa"

v-for="(item, index) in warningList"

:key="index"

@click="handleMouserOver(item)"

<div class="quanbuNumber">\{ \{ index + 1 \}\}</div>

<img src="../../assets/image/rightImage/warning/yujing\_icon.png" />

<div class="warningSub2">

\{ \{

item.html

? item.html

: \`$\{item.buildingName\}消防安全综合评分下降$\{item.scoreV1Diff\}分，请及时关注\`

\}\}

</div>

</div>

<ul class="warningCont">

<marquee

:scrollamount="warningList.length > 3 ? 1.5 : 0"

direction="up"

Align="Middle"

Behaviour="Scroll"

onMouseOver="this.stop()"

onMouseOut="this.start()"

<li

v-for="(item, index) in warningList"

:key="index"

@click="handleMouserOver(item)"

<img src="../../assets/image/rightImage/warning/yujing\_icon.png" />

<div class="warningSub">

\{ \{

item.html

? item.html

: \`$\{item.buildingName\}消防安全综合评分下降$\{item.scoreV1Diff\}分，请及时关注\`

\}\}

</div>

</li>

</marquee>

</ul>

<div class="warningDetaile" v-if="isShowWarningDetail">

<div class="shut" @click="handleShut">

<img src="../../assets/image/rightImage/shut.png" />

</div>

<div

class="stateImg"

v-if="warningDetaile.name == item.name"

v-for="(item, index) in warningImg"

:key="index"

<img :src="item.img" />

</div>

<div style="font-size: 20px">\{ \{ warningDetaile.fbsj \}\}</div>

<div style="font-size: 20px">

\{ \{ warningDetaile.name \}\}<span>(</span

><span>\{ \{ warningDetaile.fbtype \}\}</span

><span>)</span>

</div>

<div class="warningContHtml">

\{ \{ warningDetaile.html \}\}

</div>

<div style="font-size: 20px">防御指引:</div>

<div class="subwarningDetaile">

<div>

\{ \{ warningDetaile.fyzy \}\}

</div>

<div class="warningBuidingDetaile" v-if="showScoreWarning">

<div class="shut" @click="handleShutScore">

<img src="../../assets/image/rightImage/shut.png" />

</div>

<div class="title">

\{ \{ \`$\{buildingName\}消防安全综合评分下降$\{scoreV1Diff\}分，请及时关注\` \}\}

</div>

<div class="tableCont">

<div class="tableContHead">

</div>

<div class="tableLi">

<div style="color: \#eabb00">\{ \{ leftScore \}\}</div>

<div style="color: \#eabb00">\{ \{ rightScore \}\}</div>

</div>

<div class="tableLi2">

<div class="tableItemO">消防安全</div>

<div class="tableItemOne">

<div class="scoreCont">

<div

class="SubscoreCont"

v-for="(item, index) in leftData"

:key="index"

<span>\{ \{ item.itemName \}\}</span

><span>: </span

><span style="color: \#eabb00"> \{ \{ item.scoreV2 \}\}</span>

</div>

<div class="tableItemTwo">

<div class="scoreCont">

<div

class="SubscoreCont"

v-for="(item, index) in rightData"

:key="index"

<span>\{ \{ item.itemName \}\}</span

><span>: </span

><span style="color: \#eabb00"> \{ \{ item.scoreV2 \}\}</span>

</div>

</template>

import \{

getHistoryWarningInfo,

getFireIotScoreLogBoApi,

getFireIotScoreLogBoByBuildingIdApi,

\} from "../../api/rightApi";

export default \{

data() \{

return \{

warningDetaile: \{\},

isShowWarningDetail: false, // 详情默认隐藏，鼠标移入显示

showScoreWarning: false, // 建筑评分预警

isShowAll: false, // 全部预警列表

scoreWarning: \[\], // 建筑评分预警项

leftScore: "",

rightScore: "",

buildingName: "",

scoreV1Diff: "",

numberAll: "",

numberTQ: "",

numberJZ: "",

showUlLiIndex: 0,

titleList: \[

name: "全部预警",

\},

name: "天气预警",

\},

name: "建筑评分预警",

\},

\],

leftData: \[

name: "消防设施状态运行",

score: 20,

\},

name: "消防管理",

score: 35,

\},

name: "消防设施维护保养",

score: 15,

\},

name: "灭火救援能力",

score: 5,

\},

name: "消防监督检查情况",

score: 5,

\},

name: "火灾发生情况",

score: 10,

\},

\],

rightData: \[

name: "消防设施状态运行",

score: 10,

\},

name: "消防管理",

score: 35,

\},

name: "消防设施维护保养",

score: 15,

\},

name: "灭火救援能力",

score: 12,

\},

name: "消防监督检查情况",

score: 5,

\},

name: "火灾发生情况",

score: 10,

\},

\],

warningList: \[

html: "高温黄色预警：预计未来连续三天我市将出现35℃以上的高温天气",

\},

html: "雷电黄色预警：预计未来6小时我市城区有雷电活动",

\},

html: "高温黄色预警：预计未来连续三天我市将出现35℃以上的高温天气",

\},

html: "雷电黄色预警：预计未来6小时我市城区有雷电活动",

\},

\],

warningImg: \[

name: "高温黄色",

img: require("../../assets/image/rightImage/warningEn/gaowenhuang.png"),

\},

name: "高温红色",

img: require("../../assets/image/rightImage/warningEn/gaowenhong.png"),

\},

name: "高温橙色",

img: require("../../assets/image/rightImage/warningEn/gaowencehng.png"),

\},

name: "雷电黄色",

img: require("../../assets/image/rightImage/warningEn/leidianhuang.png"),

\},

name: "雷电红色",

img: require("../../assets/image/rightImage/warningEn/leidianhong.png"),

\},

name: "雷电橙色",

img: require("../../assets/image/rightImage/warningEn/leidiancheng.png"),

\},

name: "大风黄色",

img: require("../../assets/image/rightImage/warningEn/dafenghunag.png"),

\},

name: "大风蓝色",

img: require("../../assets/image/rightImage/warningEn/dafenglan.png"),

\},

name: "大风红色",

img: require("../../assets/image/rightImage/warningEn/dafenghong.png"),

\},

name: "大风橙色",

img: require("../../assets/image/rightImage/warningEn/dafengcheng.png"),

\},

name: "暴雨黄色",

img: require("../../assets/image/rightImage/warningEn/baoyuhuang.png"),

\},

name: "暴雨红色",

img: require("../../assets/image/rightImage/warningEn/baoyuhong.png"),

\},

name: "暴雨蓝色",

img: require("../../assets/image/rightImage/warningEn/baoyulan.png"),

\},

name: "台风蓝色",

img: require("../../assets/image/rightImage/warningEn/taifenglan.png"),

\},

name: "台风黄色",

img: require("../../assets/image/rightImage/warningEn/taifenghuang.png"),

\},

name: "台风红色",

img: require("../../assets/image/rightImage/warningEn/taifenghong.png"),

\},

name: "台风橙色",

img: require("../../assets/image/rightImage/warningEn/taifengcheng.png"),

\},

\],

\};

\},

created() \{

this.getHistoryWarningInfo();

this.getHistoryWarningInfo2();

// this.getFireIotScoreLogBoApi2(); // 初始化不单独调用建筑评分接口

setInterval(() => \{

this.getHistoryWarningInfo();

\}, 5 \* 60 \* 1000);

\},

mounted() \{

this.$emit("showWarningInformation", this.warningList.length);

this.$Bus.$on("closeShowWarningDetail", () => \{

// this.isShowWarningDetail = false;

this.isShowAll = false;

this.isShowWarningDetail = false;

this.showScoreWarning = false;

\});

\},

methods: \{

handleMouserOver(item) \{

this.$Bus.$emit("closeToday\_JQ"); // 关闭今日警情

if (item.html) \{

// 天气预警详情弹框

this.isShowWarningDetail = true;

this.showScoreWarning = false;

this.warningDetaile = item;

\} else \{

// 建筑评分预警详情弹框

this.isShowWarningDetail = false;

this.showScoreWarning = true;

this.buildingName = item.buildingName;

this.scoreV1Diff = item.scoreV1Diff;

this.getFireIotScoreLogBoByBuildingIdApi(item.buildingId);

\},

async getHistoryWarningInfo() \{

await this.getFireIotScoreLogBoApi();

getHistoryWarningInfo(\{ fbDw: "上海中心气象台" \}).then((res) => \{

this.warningList = \[\];

if (res.status == 200) \{

this.warningList = res.data.data;

this.warningList = this.warningList.concat(this.scoreWarning);

this.numberAll = this.warningList.length;

\});

\},

// 联合天气调用 建筑评分预警

async getFireIotScoreLogBoApi() \{

await getFireIotScoreLogBoApi().then((res) => \{

this.scoreWarning = \[\];

if (res.data.code == 200) \{

res.data.data.forEach((v) => \{

if (v.scoreV1Trend == "fall" && v.scoreV1Diff >= 1) \{

this.scoreWarning.push(v);

\});

this.numberJZ = this.scoreWarning.length;

\});

\},

// 单独调用天气预警

getHistoryWarningInfo2() \{

getHistoryWarningInfo(\{ fbDw: "上海中心气象台" \}).then((res) => \{

this.warningList = \[\];

this.scoreWarning = \[\];

if (res.status == 200) \{

this.warningList = res.data.data;

this.numberTQ = this.warningList.length;

\});

\},

// 单独调用建筑评分预警2

async getFireIotScoreLogBoApi2() \{

//  this.scoreWarning = \[\]; // error

await getFireIotScoreLogBoApi().then((res) => \{

this.scoreWarning = \[\];

if (res.data.code == 200) \{

res.data.data.forEach((v) => \{

if (v.scoreV1Trend == "fall" && v.scoreV1Diff >= 1) \{

this.scoreWarning.push(v);

\});

// this.scoreWarning = Array.from(new Set(this.scoreWarning));

this.numberJZ = this.scoreWarning.length;

this.warningList = this.scoreWarning;

\});

\},

// 评分详情弹框数据

getFireIotScoreLogBoByBuildingIdApi(id) \{

getFireIotScoreLogBoByBuildingIdApi(id).then((res) => \{

if (res.data.code == 200) \{

this.leftScore = res.data.dataJson.left.score;

this.rightScore = res.data.dataJson.right.score;

this.leftData = res.data.dataJson.left.buildingList;

this.rightData = res.data.dataJson.right.buildingList;

\});

\},

showAll() \{

this.isShowAll = true;

this.showUlLiIndex = 0;

this.$Bus.$emit("closeToday\_JQ"); // 关闭今日警情

\},

handleClose() \{

this.isShowAll = false;

this.isShowWarningDetail = false;

this.showScoreWarning = false;

this.getHistoryWarningInfo();

\},

handleShut() \{

this.isShowWarningDetail = false;

\},

handleShutScore() \{

this.showScoreWarning = false;

\},

clickYuJing(index) \{

this.showUlLiIndex = index;

switch (index) \{

case 0:

// 全部预警

this.getHistoryWarningInfo();

break;

case 1:

// 天气预警

this.getHistoryWarningInfo2();

break;

case 2:

// 建筑评分预警

this.getFireIotScoreLogBoApi2();

break;

\},

\};

</script>

.warningContent \{

width: 720px;

height: 150px;

// opacity: 0.85;

opacity: 1;

background: \#003a5f;

border: 1px solid \#00fcff;

border-radius: 8px;

box-sizing: border-box;

padding: 10px 20px;

position: absolute;

top: 15px;

left: 150px;

.warningTitle \{

font-size: 20px;

font-family: Source Han Sans CN, Source Han Sans CN-Bold;

font-weight: 700;

margin-bottom: 5px;

color: \#ff6f00;

cursor: pointer;

.warningCont \{

height: 100px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

overflow-x: hidden;

overflow-y: scroll;

color: \#ff6f00;

li \{

width: 680px;

height: 30px;

line-height: 30px;

list-style: none;

display: flex;

flex-direction: row;

justify-content: flex-start;

align-items: center;

font-size: 18px;

cursor: pointer;

.warningSub \{

margin-left: 20px;

white-space: nowrap;

text-overflow: ellipsis;

overflow-x: hidden;

.warningCont::-webkit-scrollbar \{

/\*滚动条整体样式\*/

width: 5px; /\*高宽分别对应横竖滚动条的尺寸\*/

height: 5px;

.warningCont::-webkit-scrollbar-thumb \{

border-radius: 10px;

width: 1px;

background: \#05cff3;

.warningBuidingDetaile \{

position: absolute;

// top: 165px;

// left: 20px;

top: -2px;

left: 729px;

width: 686px;

height: 448px;

background: \#041c31;

border: 1px solid \#00bbff;

border-radius: 5px;

box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;

box-sizing: border-box;

padding: 30px 20px;

font-size: 18px;

color: \#fff !important;

z-index: 999;

.shut \{

width: 32px;

height: 32px;

position: absolute;

top: 20px;

right: 20px;

cursor: pointer;

.title \{

width: 560px;

margin-left: 30px;

.tableCont \{

width: 650px;

height: 325px;

margin-top: 20px;

border: 1px solid \#004f82;

.tableContHead \{

height: 40px;

line-height: 40px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

background: \#033b6e;

text-align: center;

div:nth-of-type(1) \{

width: 20%;

div:nth-of-type(2) \{

width: 40%;

border-left: 1px solid \#004f82;

border-right: 1px solid \#004f82;

div:nth-of-type(3) \{

width: 40%;

.tableLi \{

height: 40px;

line-height: 40px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

// background: \#033B6E;

text-align: center;

// padding-top: 15px;

div:nth-of-type(1) \{

width: 20%;

div:nth-of-type(2) \{

width: 40%;

border-left: 1px solid \#004f82;

border-right: 1px solid \#004f82;

div:nth-of-type(3) \{

width: 40%;

.tableLi2 \{

height: 40px;

line-height: 40px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

// background: \#033B6E;

text-align: center;

.tableItemO \{

width: 19.8%;

height: 245px;

line-height: 245px;

margin-top: 203px;

border: 1px solid \#004f82;

border-left: none;

border-bottom: none;

.tableItemOne \{

width: 40%;

height: 245px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

margin-right: -1px;

.score \{

width: 20%;

height: 245px;

line-height: 245px;

margin-top: 203px;

border: 1px solid \#004f82;

border-left: none;

border-right: none;

border-bottom: none;

.scoreCont \{

width: 92%;

height: 245px;

border: 1px solid \#004f82;

margin-top: 203px;

padding-left: 20px;

border-bottom: none;

border-left: none;

border-right: none;

.SubscoreCont \{

font-size: 16px;

text-align: left;

padding-left: 20px;

margin-left: -20px;

.SubscoreCont:nth-child(2n + 1) \{

background: \#042645;

.tableItemTwo \{

width: 40%;

height: 245px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

.score \{

width: 20%;

height: 245px;

line-height: 245px;

margin-top: 203px;

border: 1px solid \#004f82;

border-left: none;

border-right: none;

border-bottom: none;

.scoreCont \{

width: 92%;

height: 245px;

border: 1px solid \#004f82;

margin-top: 203px;

padding-left: 20px;

border-bottom: none;

.SubscoreCont \{

font-size: 16px;

text-align: left;

padding-left: 20px;

margin-left: -20px;

.SubscoreCont:nth-child(2n + 1) \{

background: \#042645;

.warningDetaile \{

position: absolute;

// top: 165px;

// left: 120px;

top: -2px;

left: 729px;

width: 512px;

height: 372px;

// opacity: 0.9;

background: \#041c31;

border: 1px solid \#00bbff;

border-radius: 5px;

box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;

box-sizing: border-box;

padding: 30px 20px;

font-size: 18px;

color: \#fff !important;

z-index: 999;

.warningContHtml \{

height: 80px;

overflow-y: scroll;

overflow-x: hidden;

.warningContHtml::-webkit-scrollbar \{

/\*滚动条整体样式\*/

width: 5px; /\*高宽分别对应横竖滚动条的尺寸\*/

height: 20px;

.warningContHtml::-webkit-scrollbar-thumb \{

border-radius: 10px;

width: 1px;

background: \#05cff3;

.shut \{

width: 32px;

height: 32px;

position: absolute;

top: 20px;

right: 20px;

cursor: pointer;

.stateImg \{

img \{

width: 88px;

height: 74px;

.subwarningDetaile \{

height: 90px;

overflow-y: scroll;

overflow-x: hidden;

.subwarningDetaile::-webkit-scrollbar \{

/\*滚动条整体样式\*/

width: 5px; /\*高宽分别对应横竖滚动条的尺寸\*/

height: 5px;

.subwarningDetaile::-webkit-scrollbar-thumb \{

border-radius: 10px;

width: 1px;

background: \#05cff3;

.quanbuAll \{

width: 723px;

height: 400px;

background: \#041c31;

border: 1px solid \#00bbff;

border-radius: 5px;

opacity: 1;

position: absolute;

// top: -3px;

// left: 729px;

// top: 165px;

top: -3px;

left: -2px;

z-index: 999;

box-sizing: border-box;

padding: 15px;

box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;

.quanTitle \{

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

margin-bottom: 10px;

.quanTitle\_ul \{

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

margin-top: -8px;

li \{

height: 30px;

// line-height: 30px;

background-color: \#112842;

color: \#9e9e9e;

box-sizing: border-box;

padding: 5px 10px;

margin: 0 10px;

cursor: pointer;

.activeLi \{

color: \#67e3ec;

box-shadow: rgb(0, 187, 255) 0px 0px 10px inset !important;

.titleName \{

font-size: 20px;

font-family: SourceHanSansCN, SourceHanSansCN-Medium;

font-weight: 500;

color: \#94c5ff;

margin-bottom: 10px;

.quanbuContent \{

width: 700px;

height: 315px;

overflow-x: hidden;

overflow-y: scroll;

.rdyqlistItemFa \{

width: 700px;

display: flex;

flex-direction: row;

justify-content: flex-start;

align-items: center;

cursor: pointer;

.warningSub2 \{

width: 650px;

margin-left: 10px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

.quanbuNumber \{

// width: 30px;

min-width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

font-size: 16px;

color: \#fff;

// background: \#3ef2ff;

background: \#034768;

border-radius: 5px;

padding: 3px;

margin: 5px;

margin-right: 10px;

.quanDetail \{

width: 60px;

height: 30px;

text-align: center;

line-height: 22px;

color: \#58e3ec;

border: 2px solid \#58e3ec;

border-radius: 15px;

box-sizing: border-box;

padding: 3px;

margin: 7px;

margin-right: 10px;

cursor: pointer;

// .rdyqlistItem2 \{

//   width: 85%;

//   height: 36px;

//   line-height: 36px;

//   overflow: hidden;

//   cursor: pointer;

//   white-space: nowrap;

//   text-overflow: ellipsis;

//   padding: 0 5px;

//   // background: rgba(44, 162, 219, 0.4) !important;

// \}

// .rdyqlistItem2:nth-of-type(2n) \{

//   background: transparent;

//   // background: rgba(44, 162, 219, 0.4);

// \}

// .rdyqlistItem2:nth-of-type(2n + 1) \{

//   background: rgba(44, 162, 219, 0.4);

// \}

.quanbuContent::-webkit-scrollbar \{

/\*滚动条整体样式\*/

width: 5px; /\*高宽分别对应横竖滚动条的尺寸\*/

height: 20px;

.quanbuContent::-webkit-scrollbar-thumb \{

border-radius: 10px;

width: 5px;

height: 100px;

background: \#05cff3;

</style>

vue 调用同步异步方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue $emit 同步调用

相关同步方法调用异步防范_[转]关于同步方法里面调用异步方法的探究

相关 Dubbo源码分析（十）同步调用与异步调用

相关 Spring Boot 调用@Async异步方法创建线程2种方式（调用外部的异步方法，调用内部的异步方法）

相关 vue 调用同步异步方法

相关 js 中异步方法变成同步方法

相关 C# 委托的同步调用和异步调用

相关 HttpClient同步调用与 HttpAsyncClient 异步调用

相关 React中怎么实现后台调用（异步+同步）

相关 grpc-java springboot 同步异步调用 demo