Merge remote-tracking branch 'origin/master'
| | |
| | | if (this.loading) { |
| | | return |
| | | } |
| | | this.loading = true |
| | | if (this.activeTab == 0) { |
| | | if (!this.__check()) { |
| | | return |
| | | } |
| | | this.loading = true |
| | | loginByPassword({ |
| | | username: this.username.trim(), |
| | | password: this.password, |
| | |
| | | if (!smsCode) { |
| | | return Message.error('请输入验证码') |
| | | } |
| | | this.loading = true |
| | | loginByPhone({ phone, code: smsCode }).then(res => { |
| | | if (this.isRemPsd) { |
| | | localStorage.setItem('phone', this.username.trim()) |
| | | } |
| | | Cookies.set('dm_user_token', res) |
| | | this.$router.push('index') |
| | | }).catch(e => { |
| | | this.refreshCaptcha() |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | |
| | | background-size: 100% 100%; |
| | | padding-left: 40px; |
| | | padding-top: 60px; |
| | | |
| | | .h2{ |
| | | color: $primary-color; |
| | | background-color: #fff; |
| | |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .h3 { |
| | | font-size: 28px; |
| | | font-weight: 700; |
| | |
| | | min-width="80px" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="memberNames" |
| | | label="乘车人" |
| | | min-width="180px" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="companyName" |
| | | label="所属组织" |
| | | min-width="150px" |
| | |
| | | <span v-if="row.endTime">止:{{ row.endTime.slice(0,16) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="memberNames" |
| | | label="乘车人" |
| | | min-width="180px" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="planUseDate" |
| | | label="出发时间" |
| | |
| | | yarn-error.log* |
| | | pnpm-debug.log* |
| | | lerna-debug.log* |
| | | |
| | | screen |
| | | node_modules |
| | | .DS_Store |
| | | dist |
| | |
| | | ::-webkit-scrollbar { |
| | | display: none; |
| | | } |
| | | |
| | | .swiper-wrapper { |
| | | display: block !important; |
| | | } |
| | | .empty_wrap{ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .empty_wrap img{ |
| | | width: 100px; |
| | | } |
| | | p{ |
| | | padding: 0; |
| | | margin: 0; |
| | |
| | | <img src="@/assets/images/nenghao_ic1.png" class="co2" alt=""> |
| | | <div> |
| | | <div class="name">本年累计循环烟箱</div> |
| | | <div><span class="num" v-if="data1.smokeBoxTotal">{{ data1.smokeBoxTotal.toLocaleString() }}</span><span>只</span></div> |
| | | <div><span class="num" v-if="data1.smokeBoxTotal">{{ data1.smokeBoxTotal.toLocaleString() |
| | | }}</span><span>只</span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" /> |
| | | <div class="content"> |
| | | <div class="name">上月用电(kw·h)</div> |
| | | <div class="num" v-if="data1.electricityQuantity">{{ data1.electricityQuantity.toLocaleString() }}</div> |
| | | <div class="num" v-if="data1.electricityQuantity || data1.electricityQuantity == 0">{{ data1.electricityQuantity.toLocaleString() }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="static"> |
| | |
| | | <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" /> |
| | | <div class="content"> |
| | | <div class="name">上月用水(t)</div> |
| | | <div class="num" v-if="data1.waterQuantity">{{ data1.waterQuantity.toLocaleString() }}</div> |
| | | <div class="num" v-if="data1.waterQuantity || data1.waterQuantity == 0">{{ data1.waterQuantity.toLocaleString() }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="static"> |
| | |
| | | <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" /> |
| | | <div class="content"> |
| | | <div class="name">上月用气(t)</div> |
| | | <div class="num" v-if="data1.gasQuantity">{{ data1.gasQuantity.toLocaleString() }}</div> |
| | | <div class="num" v-if="data1.gasQuantity || data1.gasQuantity == 0">{{ data1.gasQuantity.toLocaleString() }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="static"> |
| | |
| | | <div class="center_box_two"> |
| | | <img class="bg" src="@/assets/images/img_city@2x.png" alt="" /> |
| | | <div class="item item1"> |
| | | <div class="num fs_linear">{{ data1.workHouseQuantity }}<span class="unit">kw·h</span></div> |
| | | <div class="num fs_linear">{{ data1.workHouseQuantity || 0 }}<span class="unit">kw·h</span></div> |
| | | <div class="name">联合工房</div> |
| | | <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="item item2"> |
| | | <div class="num fs_linear">{{ data1.officeQuantity }}<span class="unit">kw·h</span></div> |
| | | <div class="num fs_linear">{{ data1.officeQuantity || 0 }}<span class="unit">kw·h</span></div> |
| | | <div class="name">办公楼</div> |
| | | <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="item item3"> |
| | | <div class="num fs_linear">{{ data1.parkQuantity }}<span class="unit">kw·h</span></div> |
| | | <div class="num fs_linear">{{ data1.parkQuantity || 0 }}<span class="unit">kw·h</span></div> |
| | | <div class="name">物流园区</div> |
| | | <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="item item4"> |
| | | <div class="num fs_linear">{{ data1.productHouseQuantity }}<span class="unit">kw·h</span></div> |
| | | <div class="num fs_linear">{{ data1.productHouseQuantity || 0 }}<span class="unit">kw·h</span></div> |
| | | <div class="name">成品库</div> |
| | | <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="item item5"> |
| | | <div class="num fs_linear">{{ data1.powerQuantity }}<span class="unit">kw·h</span></div> |
| | | <div class="num fs_linear">{{ data1.powerQuantity || 0 }}<span class="unit">kw·h</span></div> |
| | | <div class="name">动力站房</div> |
| | | <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="bottom_wrap"> |
| | | <div class="bottom bottom1"> |
| | | <div class="num fs_linear">{{ data1.yesterdayElectricity }}</div> |
| | | <div class="num fs_linear">{{ data1.yesterdayElectricity || 0 }}</div> |
| | | <div class="name">昨日用电</div> |
| | | <div class="unit">kw·h</div> |
| | | <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="bottom bottom2"> |
| | | <div class="num">{{ data1.todayElectricity }}</div> |
| | | <div class="num">{{ data1.todayElectricity || 0 }}</div> |
| | | <div class="name">今日用电</div> |
| | | <div class="unit">kw·h</div> |
| | | <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="bottom bottom3"> |
| | | <div class="num fs_linear">{{ data1.monthElectricity }}</div> |
| | | <div class="num fs_linear">{{ data1.monthElectricity || 0 }}</div> |
| | | <div class="name">本月用电</div> |
| | | <div class="unit">kw·h</div> |
| | | <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" /> |
| | |
| | | <img src="@/assets/images/ic_co2@2x.png" class="co2" alt=""> |
| | | <div> |
| | | <div class="name">本月累计碳排放</div> |
| | | <div><span class="num" v-if="data1.carbon">{{ data1.carbon.toLocaleString() }}</span><span>吨</span></div> |
| | | <div><span class="num" v-if="data1.carbon">{{ data1.carbon.toLocaleString() }}</span><span>吨</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | const data3 = ref([]) |
| | | const getData3 = () => { |
| | | data3.value = [ |
| | | { carNo: '皖A87772', maxOil: 50, quantity: 50 }, |
| | | { carNo: '皖A81222', maxOil: 50, quantity: 26 }, |
| | | { carNo: '皖A85035', maxOil: 50, quantity: 24 }, |
| | | { carNo: '皖A86057', maxOil: 50, quantity: 14 }, |
| | | { carNo: '皖A81272', maxOil: 50, quantity: 9 }, |
| | | { carNo: '皖A87772', maxOil: 50, quantity: 1 }, |
| | | ] |
| | | data3.value = data3.value.map(i => { |
| | | if (i.quantity && i.maxOil) { |
| | | i.rate = ((i.quantity / i.maxOil) * 25).toFixed(0) |
| | | } |
| | | return i |
| | | }) |
| | | return |
| | | zxlastMonthOil().then(res => { |
| | | const result = res.data || [] |
| | | data3.value = result.map(i => { |
| | |
| | | .load_wrap { |
| | | width: 100%; |
| | | height: 250px; |
| | | |
| | | .loadRef { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #d2e0ff; |
| | | |
| | | .tab{ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .separate { |
| | | width: 1px; |
| | | height: 14px; |
| | |
| | | height: 980px; |
| | | color: #ffffff; |
| | | position: relative; |
| | | |
| | | .main_bg { |
| | | position: absolute; |
| | | left: 0; |
| | |
| | | <span class="item">故障</span> |
| | | <span class="item">离线</span> |
| | | </div> |
| | | <template v-for="(item, i) in dataList1" :key="i"> |
| | | <div class="one-swiper list_content"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1"> |
| | | <div class="line"> |
| | | <span class="item name">{{ item.deviceTypeName }}</span> |
| | | <span class="item">{{ item.statusTotal }}</span> |
| | |
| | | <span class="item">{{ item.offlineNum }}</span> |
| | | </div> |
| | | <div class="separate"></div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="separate"></div> |
| | | <div class="item"> |
| | | <div>维保率</div> |
| | | <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{ ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div> |
| | | <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{ |
| | | ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div> |
| | | </div> |
| | | </div> |
| | | <div class="footer"> |
| | |
| | | <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt=""> |
| | | <div class="name">告警信息</div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item" v-for="i in 5"> |
| | | <div class="list two-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i"> |
| | | <div class="icon"> |
| | | <div class="circle"></div> |
| | | <div class="line"></div> |
| | |
| | | <div class="content"> |
| | | <div class="header"> |
| | | <div class="time"> |
| | | <span>123</span> |
| | | <span>{{ item.time }}</span> |
| | | <span class="status">处理中</span> |
| | | </div> |
| | | <div class="have_time">已经发生<span>1</span>分钟</div> |
| | |
| | | <div class="wrap"> |
| | | <div class="title"> |
| | | <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt=""> |
| | | <span>消防警告</span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="title"> |
| | | <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt=""> |
| | | <span>A厂房3车间门口</span> |
| | | <span>{{ item.addr }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import FirePercent from '@/components/FirePercent.vue' |
| | | import dayjs from 'dayjs' |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import { |
| | | getFightingalarmData, |
| | | getFightingHandle, |
| | |
| | | const getData1 = () => { |
| | | getFightingDeAlarm().then(res => { |
| | | dataList1.value = res.data |
| | | loopFn1() |
| | | }) |
| | | } |
| | | const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4'] |
| | | const dataList2 = ref([]) |
| | | const getData2 = () => { |
| | | let temp = [] |
| | | temp.push({ name: '真实报警数', num: 10, rate: 20 }) |
| | | temp.push({ name: '误报警数', num: 30, rate: 60 }) |
| | | temp.push({ name: '已解除', num: 20, rate: 40 }) |
| | | temp.push({ name: '处理中', num: 8, rate: 16 }) |
| | | dataList2.value = temp |
| | | return |
| | | getFightingalarmData().then(res => { |
| | | const result = res.data || {} |
| | | let temp = [] |
| | |
| | | dataList6.value = res.data |
| | | }) |
| | | } |
| | | const dataList7 = ref([]) |
| | | const getData7 = () => { |
| | | dataList7.value = [ |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | { name: '消防告警', addr: '厂区门口', time: '2022-02-02' }, |
| | | ] |
| | | loopFn2() |
| | | } |
| | | |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | | return { delay: time, disableOnInteraction: false } |
| | | } else { |
| | | return false |
| | | } |
| | | } |
| | | const loopFn1 = () => { |
| | | var newSwiper1 = new Swiper('.one-swiper', { |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 5, |
| | | autoplay: autoplayFlag(dataList1.value, 5, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | const loopFn2 = () => { |
| | | var newSwiper1 = new Swiper('.two-swiper', { |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 4, |
| | | autoplay: autoplayFlag(dataList7.value, 4, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getData1() |
| | |
| | | getData4() |
| | | getData5() |
| | | getData6() |
| | | getData7() |
| | | |
| | | initWatergage() |
| | | initLiquidlevel() |
| | |
| | | |
| | | .list_wrap { |
| | | padding: 10px 0; |
| | | height: 227px; |
| | | overflow: auto; |
| | | |
| | | .list_content { |
| | | height: 170px; |
| | | overflow: hidden; |
| | | |
| | | .line_wrap { |
| | | height: 34px !important; |
| | | } |
| | | } |
| | | |
| | | .list { |
| | | .line { |
| | |
| | | } |
| | | |
| | | .list { |
| | | height: 330px; |
| | | overflow: auto; |
| | | height: 320px; |
| | | overflow: hidden; |
| | | margin-top: 15px; |
| | | scrollbar-width: none; |
| | | |
| | | .item { |
| | | display: flex; |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | height: 80px !important; |
| | | |
| | | .icon { |
| | | width: 40px; |
| | |
| | | } |
| | | |
| | | .wrap { |
| | | height: 40px; |
| | | height: 34px; |
| | | background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%); |
| | | border-radius: 2px 0px 0px 2px; |
| | | display: flex; |
| | |
| | | </div> |
| | | <div class="search_wrap"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt=""> |
| | | <input class="input" type="text" @blur="getData2" v-model="taskCode"> |
| | | <input class="input" type="text" placeholder="订单查询" @keyup.enter="getData2" @blur="getData2" |
| | | v-model="taskCode"> |
| | | <!-- <span>订单查询</span> --> |
| | | </div> |
| | | </div> |
| | |
| | | <span class="item">位置</span> |
| | | <span class="item">任务下达时间</span> |
| | | </div> |
| | | <div class="line" v-for="(item, i) in transportTask" :key="i"> |
| | | <div class="one-swiper list"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line one-swiper-slide swiper-slide item" @click="taskClick(item)" |
| | | v-for="(item, i) in transportTask" :key="i"> |
| | | <span class="item">{{ item.carNo }}</span> |
| | | <span class="item">{{ item.statusStr }}</span> |
| | | <span class="item">{{ item.address }}</span> |
| | | <span class="item">{{ item.taskDate }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <span>出库能力</span> |
| | | </div> |
| | | <div class="right"> |
| | | <img src="@/assets/images/LogisticsCenter/position.png" class="posi" alt=""> |
| | | <span>全省</span> |
| | | <img src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt=""> |
| | | <img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/position.png" class="posi" alt=""> |
| | | <span @click="showPro = !showPro">{{ activeCity.name }}</span> |
| | | <img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt=""> |
| | | <div v-if="showPro" class="select_op"> |
| | | <div class="line" @click="cityClick(item)" v-for="item in cityList">{{ item.name }}</div> |
| | | </div> |
| | | <div class="select_op"> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | </div> |
| | | </div> |
| | | <div class="static_wrap"> |
| | |
| | | <div class="echart_wrap"> |
| | | <div class="echart3" id="echart3"></div> |
| | | <div class="pie_text"> |
| | | <!-- <div class="fs30">{{ cneterData.PlanTotal }}%</div> --> |
| | | <div class="fs30">{{ cneterData.PlanTotal || 30 }}%</div> |
| | | </div> |
| | | </div> |
| | | <div class="text">计划完成量</div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- --> |
| | | <div class="modal_wrap" v-if="showModal"> |
| | | <div class="title_head"> |
| | | <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | <span>皖a222</span> |
| | | </div> |
| | | <div class="info"> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">运输单号:</div> |
| | | <div class="val">471342</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">司机信息:</div> |
| | | <div class="val">孙文武 17493932936</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">总运输量:</div> |
| | | <div class="val">22万支</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">当前位置:</div> |
| | | <div class="val">安徽省合肥市包河区繁华大道123米处</div> |
| | | </div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">合同1:1231231</div> |
| | | <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">合同2:1231231</div> |
| | | </div> |
| | | <div class="ht_info"> |
| | | <div class="item"> |
| | | <div class="la">发货仓库:</div> |
| | | <div class="val">芜湖成品</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">预计到达:</div> |
| | | <div class="val">2024-12-04 14:00</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">到货地点:</div> |
| | | <div class="val">江门烟草物流配送中心</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">运输量:</div> |
| | | <div class="val">300万支</div> |
| | | </div> |
| | | </div> |
| | | <div class="tab1"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt=""> |
| | | <span>物流信息</span> |
| | | </div> |
| | | <div class="item" v-for="item, i in 3"> |
| | | <div class="icon_wrap"> |
| | | <img v-if="i !== 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt=""> |
| | | <img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt=""> |
| | | <div class="line"></div> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="status">车辆启运-电子锁气运</div> |
| | | <div class="time">2024-04-02 12:00</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="modal_mask" v-if="showModal" @click="showModal = false"></div> |
| | | </div> |
| | | </v-scale-screen> |
| | | </template> |
| | |
| | | import Percent from '@/components/percent.vue' |
| | | import dayjs from 'dayjs' |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import chinaJSON from '@/assets/china.json' |
| | | import { |
| | | getStoreOperationList, |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: StockOutData.value |
| | | data: [3, 7] |
| | | } |
| | | ] |
| | | } |
| | |
| | | echarts.registerMap('china', chinaJSON) |
| | | var points = [ |
| | | // 点坐标 |
| | | { value: [110.81, 33.40], itemStyle: { color: '#c1bb1f' }, name: '北京', total: 0, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [116.55, 40.01], itemStyle: { color: '#3eef1d' }, name: '北京', total: 0, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [113.11, 28.40], itemStyle: { color: '#3eef1d' }, name: '北京', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [106.44, 29.50], itemStyle: { color: '#3eef1d' }, name: '北京', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [112.85, 38.95], itemStyle: { color: '#3eef1d' }, name: '北京', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [82.78, 43.27], itemStyle: { color: '#3eef1d' }, name: '北京', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | { value: [117.1582, 36.8701], itemStyle: { color: '#6ae5e0' }, name: '山东', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [117.29, 32.0581], itemStyle: { color: '#6ae5e0' }, name: '安徽', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [114.3896, 30.6628], itemStyle: { color: '#6ae5e0' }, name: '湖北', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [119.5313, 29.8773], itemStyle: { color: '#6ae5e0' }, name: '浙江', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [113.12244, 23.009505], itemStyle: { color: '#6ae5e0' }, name: '广东', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [103.9526, 30.7617], itemStyle: { color: '#6ae5e0' }, name: '四川', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | ] |
| | | var lineToLf = [ |
| | | { name: '11', coords: [[110.81, 33.40], [116.55, 40.01]], lineStyle: { color: '#c1bb1f' } }, |
| | | { name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } } |
| | | { name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } } |
| | | ] |
| | | const option = { |
| | | backgroundColor: 'transparent', // 设置背景色透明 |
| | |
| | | }, |
| | | label: { |
| | | show: false, |
| | | triggerOn: 'click', |
| | | position: 'right', |
| | | formatter: '{b}', |
| | | color: '#97e9e1', |
| | |
| | | data: points, |
| | | tooltip: { |
| | | show: true, |
| | | triggerOn: 'click', |
| | | backgroundColor: 'rgba(0,0,0,0)', |
| | | padding: 0, |
| | | borderWidth: 0, |
| | |
| | | } |
| | | ] |
| | | }) |
| | | myChart.on('click', function (params) { |
| | | console.log(params.name) |
| | | |
| | | }) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | |
| | | |
| | | const transportTask = ref([]) |
| | | const taskCode = ref('') |
| | | const showModal = ref(false) |
| | | const modalInfo = ref({}) |
| | | const modalTab = ref(0) |
| | | const modalTabClick = (val) => { |
| | | modalTab.value = val |
| | | } |
| | | const taskClick = (item) => { |
| | | modalInfo.value = item |
| | | showModal.value = true |
| | | } |
| | | const getData2 = () => { |
| | | getStoreTaskList({ code: taskCode.value }).then(res => { |
| | | let temp = res.data || [] |
| | | temp = temp.splice(0, 5) |
| | | // temp = temp.splice(0, 5) |
| | | transportTask.value = temp.map(item => { |
| | | item.taskDate = item.taskDate.slice(5, 16) |
| | | return item |
| | | }) |
| | | loopFn1() |
| | | }) |
| | | } |
| | | |
| | | const cneterData = ref({}) |
| | | const showPro = ref(false) |
| | | const cityList = ref([ |
| | | { name: '全省', id: 0 }, |
| | | { name: '合肥仓', id: 1 }, |
| | | { name: '芜湖仓', id: 2 }, |
| | | { name: '滁州仓', id: 3 }, |
| | | { name: '蚌埠仓', id: 4 }, |
| | | ]) |
| | | const activeCity = ref({ name: '全省', id: 0 }) |
| | | const colors = ['#0193FE', '#FFB642'] |
| | | const StockOutData = ref([]) |
| | | const cityClick = (item) => { |
| | | activeCity.value = item |
| | | showPro.value = false |
| | | cneterData.value = {} |
| | | setTimeout(() => { |
| | | getData3() |
| | | }, 400) |
| | | } |
| | | const initEchart1 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | const option = { |
| | |
| | | }) |
| | | } |
| | | |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | | return { delay: time, disableOnInteraction: false } |
| | | } else { |
| | | return false |
| | | } |
| | | } |
| | | const loopFn1 = () => { |
| | | var newSwiper1 = new Swiper('.one-swiper', { |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 5, |
| | | autoplay: autoplayFlag(transportTask.value, 5, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | |
| | | const initData = () => { |
| | | getData1() |
| | | getData2() |
| | |
| | | |
| | | initMap() |
| | | // initEchart2() |
| | | // initEchart3() |
| | | initEchart3() |
| | | // initEchart4() |
| | | // initEchart5() |
| | | window.addEventListener('click', () => { |
| | | |
| | | }) |
| | | }) |
| | | |
| | | |
| | |
| | | color: #D2E0FF; |
| | | font-size: 12px; |
| | | border: 1px solid #D2E0FF; |
| | | |
| | | .icon { |
| | | width: 12px; |
| | | height: 14px; |
| | |
| | | <style lang="scss" scoped> |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .swiper-wrapper { |
| | | display: block !important; |
| | | } |
| | | |
| | | .main_content { |
| | |
| | | } |
| | | |
| | | .list_wrap { |
| | | .list { |
| | | height: 200px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | height: 40px; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | cursor: pointer; |
| | | |
| | | &:nth-of-type(2n) { |
| | | background: rgba(134, 156, 201, 0.05); |
| | |
| | | font-weight: bold; |
| | | font-size: 18px; |
| | | position: relative; |
| | | &:hover{ |
| | | .select_op{ |
| | | display: block; |
| | | } |
| | | } |
| | | background-image: -webkit-linear-gradient(top, |
| | | |
| | | /* background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 66%, |
| | | #85b4ff 72%, |
| | | #74a9ff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | -webkit-text-fill-color: transparent; */ |
| | | |
| | | .left { |
| | | display: flex; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | position: relative; |
| | | |
| | | .posi { |
| | | width: 16px; |
| | |
| | | margin-left: 2px; |
| | | } |
| | | } |
| | | |
| | | .select_op{ |
| | | position: absolute; |
| | | top: 26px; |
| | | right: 0px; |
| | | right: -10px; |
| | | width: 90px; |
| | | z-index: 11; |
| | | display: none; |
| | | z-index: 1199999; |
| | | background: radial-gradient( 64% 83% at 50% 50%, rgba(19,88,173,0.8) 0%, rgba(5,18,32,0.86) 100%); |
| | | color: #fff; |
| | | |
| | | .line{ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 36px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | color: #fff; |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | .modal_wrap { |
| | | width: 600px; |
| | | height: 556px; |
| | | background: rgba(0, 30, 63, 0.5); |
| | | border: 1px solid #c6eef7; |
| | | backdrop-filter: blur(5px); |
| | | position: fixed; |
| | | top: 20%; |
| | | left: 50%; |
| | | transform: translate(-50%, 0); |
| | | z-index: 999; |
| | | padding: 24px; |
| | | |
| | | .title_head { |
| | | display: flex; |
| | | align-items: center; |
| | | font-weight: bold; |
| | | font-size: 17px; |
| | | margin-bottom: 20px; |
| | | |
| | | img { |
| | | width: 20px; |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | .info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | width: 55%; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | width: 45%; |
| | | } |
| | | |
| | | .dian { |
| | | width: 4px; |
| | | height: 4px; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .la { |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.16); |
| | | margin: 0 -24px; |
| | | margin-bottom: 20px; |
| | | padding-left: 12px; |
| | | |
| | | .tab { |
| | | color: #869CC9; |
| | | font-size: 14px; |
| | | margin-left: 12px; |
| | | height: 42px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border-bottom: 2px solid #06182e; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #00F2F3; |
| | | border-bottom: 2px solid #00F2F3; |
| | | } |
| | | } |
| | | |
| | | .ht_info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | padding: 10px 10px 0; |
| | | background-color: #0d2845; |
| | | margin-bottom: 20px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | width: 55%; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | width: 45%; |
| | | } |
| | | |
| | | .la { |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tab1 { |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | font-style: 16px; |
| | | font-weight: 600; |
| | | margin-bottom: 20px; |
| | | |
| | | img { |
| | | width: 24px; |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | .item { |
| | | display: flex; |
| | | margin-left: 6px; |
| | | |
| | | &:nth-last-child(1) { |
| | | .content { |
| | | .time { |
| | | padding-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .icon_wrap { |
| | | width: 24px; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .dian { |
| | | width: 12px; |
| | | height: 12px; |
| | | } |
| | | |
| | | .dian_ac { |
| | | width: 24px; |
| | | height: 24px; |
| | | } |
| | | |
| | | .line { |
| | | width: 1px; |
| | | height: 100%; |
| | | border: 1px dashed #8a9bc5; |
| | | } |
| | | } |
| | | |
| | | .content { |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | |
| | | .status { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | margin-bottom: 5px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .text { |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .time { |
| | | font-size: 12px; |
| | | padding-bottom: 12px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .modal_mask { |
| | | position: fixed; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 99; |
| | | background-color: rgba(0, 0, 0, 0.1); |
| | | /* background-color: red; */ |
| | | } |
| | | |
| | | .second_title { |
| | | height: 24px; |
| | | display: flex; |
| | |
| | | </div> |
| | | <div class="one-swiper list_temp"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line swiper-slide one-swiper-slide" v-for="item in dataList3"> |
| | | <div class="line swiper-slide one-swiper-slide" @click="showModal = true" v-for="item in dataList3"> |
| | | <span class="item flag"><span :class="{ flag_bg: item.type == 1 || item.type == 3 }">{{ item.type |
| | | == 1 |
| | | || item.type == 3 ? '出' : '入' }}</span></span> |
| | |
| | | <span class="item id_card">{{ item.carCodeFront }}</span> |
| | | <span class="item status">{{ statusMap[item.status].label }}</span> |
| | | <span class="item addr">{{ item.repertotyAddress }}</span> |
| | | <span class="item time" v-if="item.confirmTaskDate">{{ item.confirmTaskDate.slice(5, 16) }}</span> |
| | | <span class="item time">{{ item.confirmTaskDate ? item.confirmTaskDate.slice(5, 16) : '-' |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box_two"> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> |
| | | <span>在途:{{ 8 }}</span> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_kongxian@2x.png" alt=""> |
| | | <span>空闲:{{ 8 }}</span> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_lixian@2x.png" alt=""> |
| | | <span>离线:{{ 8 }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="echart_wrap"> |
| | | <div ref="echartMap" class="echart_map" id="echartMap"></div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="right_box"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="modal_mask" v-if="showModal" @click="showModal = false"></div> |
| | | </div> |
| | | </v-scale-screen> |
| | | </template> |
| | |
| | | color: ['#1984ff', '#184b8d'], |
| | | img: icKongxian, |
| | | data: [ |
| | | { name: '腾冲市', value: [117.25, 31.49] }, |
| | | { name: '', value: [117.25, 31.49] }, |
| | | ], |
| | | }, |
| | | { |
| | |
| | | color: ['#f16c08', '#7f3710'], |
| | | img: icLixian, |
| | | data: [ |
| | | { name: '腾冲市', value: [118.5, 31.08] }, |
| | | { name: '', value: [118.5, 31.08] }, |
| | | ], |
| | | } |
| | | ] |
| | |
| | | }, |
| | | } |
| | | }, |
| | | symbolSize: [24, 30], |
| | | symbolSize: [32, 40], |
| | | hoverAnimation: true, |
| | | |
| | | zlevel: 99, |
| | |
| | | { name: "滁州市", value: 0 }, |
| | | { name: "芜湖市", value: 1 }, |
| | | { name: "阜阳市", value: 0 }, |
| | | { name: "蚌埠市", value: 0 }, |
| | | { name: "蚌埠市", value: 4 }, |
| | | { name: "淮南市", value: 0 }, |
| | | { name: "马鞍山市", value: 0 }, |
| | | { name: "安庆市", value: 0 }, |
| | | { name: "马鞍山市", value: 6 }, |
| | | { name: "安庆市", value: 2 }, |
| | | { name: "黄山市", value: 0 }, |
| | | { name: "铜陵市", value: 0 }, |
| | | { name: "铜陵市", value: 40 }, |
| | | { name: "宿州市", value: 0 }, |
| | | { name: "淮北市", value: 0 }, |
| | | { name: "六安市", value: 0 }, |
| | |
| | | geo: [{ |
| | | map: 'js', |
| | | roam: false, //是否允许缩放 |
| | | zoom: 1.1, //默认显示级别 |
| | | zoom: 1.2, //默认显示级别 |
| | | scaleLimit: { |
| | | min: 0, |
| | | max: 3 |
| | |
| | | type: 'map', |
| | | mapType: 'js', |
| | | geoIndex: -1, |
| | | zoom: 1.1, //默认显示级别 |
| | | zoom: 1.2, //默认显示级别 |
| | | label: { |
| | | show: true, |
| | | color: '#ffffff', |
| | |
| | | } |
| | | |
| | | .time { |
| | | flex: 8; |
| | | flex: 6; |
| | | margin-left: 6px; |
| | | } |
| | | } |
| | | } |
| | |
| | | .center_box_two { |
| | | flex: 1; |
| | | width: 100%; |
| | | position: relative; |
| | | |
| | | .list { |
| | | position: absolute; |
| | | top: 10px; |
| | | left: 20px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-weight: 500; |
| | | font-size: 20px; |
| | | margin-bottom: 18px; |
| | | |
| | | img { |
| | | width: 36px; |
| | | height: 36px; |
| | | margin-right: 15px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .echart_wrap { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | .echart_map { |
| | | width: 100%; |
| | | height: 100%; |
| | | /* transform: rotate(60deg); */ |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .list { |
| | | margin-top: 22px; |
| | | height: 240px; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | scrollbar-width: none; |
| | | |
| | | .item { |
| | |
| | | top: 20%; |
| | | left: 50%; |
| | | transform: translate(-50%, 0); |
| | | z-index: 99; |
| | | z-index: 999; |
| | | padding: 24px; |
| | | |
| | | .title_head { |
| | |
| | | } |
| | | } |
| | | |
| | | .modal_mask { |
| | | position: fixed; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 99; |
| | | background-color: rgba(0, 0, 0, 0.1); |
| | | /* background-color: red; */ |
| | | } |
| | | |
| | | .bg { |
| | | position: absolute; |
| | | left: 0; |
| | |
| | | <div class="rate"> |
| | | <div class="la"> |
| | | <span>车位使用率</span> |
| | | <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ data.parkingUseRate }}%</span> |
| | | <span class="num">{{ data.parkingUseRate }}%</span> |
| | | </div> |
| | | <div class="val"> |
| | | <Percent :rate="data.parkingUseRate" /> |
| | |
| | | <div class="car_static"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ data.internalJobCarTotal + |
| | | <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ |
| | | data.internalJobCarTotal + |
| | | data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div> |
| | | <div>货车</div> |
| | | </div> |
| | |
| | | <div class="menus"> |
| | | <div class="search_wrap"> |
| | | <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt=""> |
| | | <input v-model="dataValue5" @blur="getData5" @keyup.enter="getData5" class="input" type="text" placeholder="搜索监控名称"> |
| | | <input v-model="dataValue5" @blur="getData5" @keyup.enter="getData5" class="input" type="text" |
| | | placeholder="搜索监控名称"> |
| | | </div> |
| | | <div class="menu_wrap"> |
| | | <div class="menu" v-for="menu, i in data5"> |
| | |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="one_swiper_wrap"> |
| | | <div class="list one-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="one-swiper-slide swiper-slide item" v-for="item in warningList"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="item.title0 && item.createDate0" class="item_wrap"> |
| | | <img :src="item.img0" class="avatar" alt=""> |
| | | <div class="content"> |
| | | <div class="header"> |
| | | <div class="name">{{ item.title0 }}</div> |
| | | <div class="have_time">已经发生{{ item.haveTime0 }}</div> |
| | | </div> |
| | | <div class="wrap"> |
| | | <div class="line addr"> |
| | | <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt=""> |
| | | <span>{{ item.addr0 }}</span> |
| | | </div> |
| | | <div class="line time"> |
| | | <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> |
| | | <span>{{ item.createDate0 }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="garden_warning"> |
| | | <div class="com_header"> |
| | |
| | | <div class="dept">拜访部门</div> |
| | | <div class="dept">超时时长</div> |
| | | </div> |
| | | <div class="three-swiper list"> |
| | | <div v-if="dataList3.length > 0" class="three-swiper list"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3"> |
| | | <div class="line"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="empty_wrap"> |
| | | <img v-if="dataList3.length == 0" src="@/assets/images/default_empty.png" alt=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | gap: 4, |
| | | label: { |
| | | show: false, |
| | | formatter: '', |
| | | lineHeight: 0, |
| | | position: 'inside' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'none', // 当鼠标悬浮在某个数据项上时触发 |
| | |
| | | item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟') |
| | | return item |
| | | }) |
| | | // loopFn1() |
| | | let temp = [] |
| | | warningList.value.forEach((item, i) => { |
| | | // console.log(i); |
| | | if (i == 0 || i % 2 == 0) { |
| | | console.log(i) |
| | | temp.push(item) |
| | | } else { |
| | | temp[temp.length - 1].addr0 = item.addr |
| | | temp[temp.length - 1].createDate0 = item.createDate |
| | | temp[temp.length - 1].haveTime0 = item.haveTime |
| | | temp[temp.length - 1].img0 = item.img |
| | | temp[temp.length - 1].title0 = item.title |
| | | } |
| | | }) |
| | | warningList.value = temp |
| | | // console.log('temp', warningList.value); |
| | | loopFn1() |
| | | }) |
| | | } |
| | | const tasClick = (val) => { |
| | |
| | | const loopFn1 = () => { |
| | | var newSwiper1 = new Swiper('.one-swiper', { |
| | | initialSlide: 0, |
| | | loop: true, // 循环模式选项 |
| | | // loop: true, // 循环模式选项 |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 1, |
| | | slidesPerGroup: 2, |
| | | slidesPerColumn: 2, |
| | | // autoplay: { delay: 500, disableOnInteraction: false }, |
| | | autoplay: warningList.value.length > 2 ? { delay: 500, disableOnInteraction: false } : false, |
| | | slidesPerView: 2, |
| | | autoplay: warningList.value.length > 1 ? { delay: 4000, disableOnInteraction: false } : false, |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 3, |
| | | autoplay: autoplayFlag(dataList2.value, 3, 2000), |
| | | autoplay: autoplayFlag(dataList2.value, 3, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | .menu_wrap { |
| | | margin-top: 15px; |
| | | max-height: 440px; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | |
| | | .menu { |
| | | .menu_name { |
| | |
| | | margin-right: 20px; |
| | | |
| | | /* one-swiper */ |
| | | .one_swiper_wrap{ |
| | | height: 140px; |
| | | overflow: hidden; |
| | | } |
| | | .list { |
| | | height: 124px; |
| | | overflow: auto; |
| | | height: 204px; |
| | | overflow: hidden; |
| | | margin-top: 15px; |
| | | scrollbar-width: none; |
| | | display: flex; |
| | |
| | | margin-left: 20px; |
| | | |
| | | .item { |
| | | width: 366px; |
| | | /* width: 50%; */ |
| | | float: left; |
| | | width: 736px; |
| | | height: 102px !important; |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | |
| | | &:nth-of-type(2n) { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | /* border: 1px solid; */ |
| | | .item_wrap { |
| | | width: 368px; |
| | | height: 90px; |
| | | padding: 10px; |
| | | background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%); |
| | | border: 1px solid #006E81; |
| | | display: flex; |
| | | margin-right: 10px; |
| | | |
| | | &:nth-of-type(2n) { |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | .table { |
| | | .list { |
| | | height: 102px !important; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | |
| | | .item { |
| | | height: 34px !important; |
| | |
| | | .table { |
| | | .list { |
| | | height: 102px !important; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | |
| | | .item { |
| | | height: 34px !important; |
| | |
| | | color: '#61d3f9' |
| | | }])] |
| | | const temp = [] |
| | | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: '100.0' }) |
| | | temp.push({ name: '已叫号', value: data4.value?.calledNum || 0, rate: (data4.value.calledNum / data4.value?.signedNum * 100).toFixed(1)}) |
| | | temp.push({ name: '已作业', value: data4.value?.workedNum || 0, rate: (data4.value.workedNum / data4.value?.signedNum * 100).toFixed(1) }) |
| | | temp.push({ name: '已完成', value: data4.value?.doneNum || 0, rate: (data4.value.doneNum / data4.value?.signedNum * 100).toFixed(1) }) |
| | | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100.0' : 0 }) |
| | | temp.push({ name: '已叫号', value: data4.value?.calledNum || 0, rate: data4.value?.signedNum ? (data4.value.calledNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | | temp.push({ name: '已作业', value: data4.value?.workedNum || 0, rate: data4.value?.signedNum ? (data4.value.workedNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | | temp.push({ name: '已完成', value: data4.value?.doneNum || 0, rate: data4.value?.signedNum ? (data4.value.doneNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | | console.log('temp', temp) |
| | | |
| | | const option = { |
| | |
| | | maxSize: '80%', |
| | | gap: 4, |
| | | label: { |
| | | show: false |
| | | show: false, |
| | | formatter: '', |
| | | lineHeight: 0, |
| | | position: 'inside' |
| | | }, |
| | | |
| | | itemStyle: { //去掉默认白色边框线 |
| | |
| | | |
| | | const data7 = ref([]) |
| | | const getData7 = () => { |
| | | cnwarningList({ size: 7 }).then(res => { |
| | | cnwarningList({ size: 10 }).then(res => { |
| | | const result = res.data || [] |
| | | data7.value = result.map(item => { |
| | | item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟') |
| | |
| | | padding: 0px 24px 0px; |
| | | height: 200px; |
| | | margin-top: 20px; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | |
| | | .line { |
| | | display: flex; |
| | |
| | | |
| | | .two-swiper { |
| | | height: 180px; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | height: 30px; |
| | | |
| | | &:nth-of-type(2n) { |
| | | &:nth-of-type(2n + 1) { |
| | | background: rgba(12, 153, 236, 0.2); |
| | | } |
| | | |
| | | &:nth-of-type(2n + 1) { |
| | | &:nth-of-type(2n) { |
| | | background: rgba(1, 15, 35, 0.61); |
| | | box-shadow: inset 0px 0px 40px 0px rgba(23, 51, 108, 0.66); |
| | | } |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | } |
| | | } |
| | | |
| | | .header { |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | font-size: 14px; |
| | | color: #01ABFE; |
| | | background: rgba(1, 15, 35, 0.61) !important; |
| | | box-shadow: inset 0px 0px 40px 0px rgba(23, 51, 108, 0.66) !important; |
| | | } |
| | | } |
| | | } |
| | |
| | | align-items: center; |
| | | |
| | | .name { |
| | | font-size: 12px; |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | } |
| | | |
| | |
| | | |
| | | .list { |
| | | height: 220px; |
| | | overflow: auto; |
| | | overflow: hidden; |
| | | margin-top: 15px; |
| | | scrollbar-width: none; |
| | | |
| | | .item { |
| | | display: flex; |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | height: 110px; |
| | | |
| | | .icon { |
| | | width: 40px; |
| | | display: flex; |
| | |
| | | |
| | | }, |
| | | build: { |
| | | outDir: 'platform_screen' |
| | | outDir: 'screen' |
| | | }, |
| | | server: { |
| | | proxy: { |
| | | "/gateway_interface": { |
| | | target: "http://192.168.0.103:10010", |
| | | // target: "http://10.50.250.253:8088/gateway_interface", |
| | | // target: "http://192.168.0.103:10010", |
| | | target: "http://10.50.250.253:8088/gateway_interface", |
| | | // target: "http://192.168.0.173/gateway_interface", |
| | | changeOrigin: true, |
| | | rewrite: (path) => path.replace(/^\/gateway_interface/, ""), |