|
@@ -1,531 +1,536 @@
|
|
|
-<template>
|
|
|
- <!-- <u-sticky bgColor="#fff"> </u-sticky> -->
|
|
|
-
|
|
|
- <scroll-view scroll-x>
|
|
|
- <view>
|
|
|
- <!-- 下拉选择 -->
|
|
|
- <!-- <view class="searchSelect shadow" v-if="flag">
|
|
|
- <view class="cu-bar search bg-white">
|
|
|
- <view class="search-form round" style="margin-top: 0">
|
|
|
- <input
|
|
|
- @focus="InputFocus"
|
|
|
- @blur="InputBlur"
|
|
|
- @input="handleInput()"
|
|
|
- v-model="searchInput"
|
|
|
- :adjust-position="false"
|
|
|
- type="text"
|
|
|
- placeholder=""
|
|
|
- confirm-type="search"
|
|
|
- style="border: none !important"
|
|
|
- />
|
|
|
- <text class="cuIcon-search"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="select-items">
|
|
|
- <view
|
|
|
- class="site-item"
|
|
|
- v-if="!searchList.length"
|
|
|
- style="text-align: center"
|
|
|
- >暂无结果</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="select-item"
|
|
|
- v-for="(item, index) in searchList"
|
|
|
- @click="clickSelectItem(item, index)"
|
|
|
- :key="index"
|
|
|
- >{{ item.owner_name }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <!-- 下拉选择 end -->
|
|
|
-
|
|
|
- <!-- 图表 -->
|
|
|
- <!-- <view class="section1 section bg-white padding-xs">
|
|
|
- <view
|
|
|
- class="
|
|
|
- static-tabs
|
|
|
- grid
|
|
|
- margin-bottom
|
|
|
- text-center
|
|
|
- col-3
|
|
|
- margin-top-sm margin-bottom-sm
|
|
|
- "
|
|
|
- >
|
|
|
- <view
|
|
|
- :class="['padding-sm ', Inv == 0 ? 'active' : '']"
|
|
|
- @click="Inv = 0"
|
|
|
- >报警信息统计</view
|
|
|
- >
|
|
|
- <view
|
|
|
- :class="['padding-sm ', Inv == 1 ? 'active' : '']"
|
|
|
- @click="Inv = 1"
|
|
|
- >数据等级统计</view
|
|
|
- >
|
|
|
- <view
|
|
|
- :class="['padding-sm ', Inv == 2 ? 'active' : '']"
|
|
|
- @click="Inv = 2"
|
|
|
- >设备运行状态</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="time text-center"
|
|
|
- >统计时段:{{ staticData.statisticalPeriod }}
|
|
|
- </view>
|
|
|
- <view style="height: 570rpx">
|
|
|
- <view v-if="Inv == 0"> </view>
|
|
|
- <view v-if="Inv == 1"> </view>
|
|
|
- <view v-if="Inv == 2" class="chart3-box">
|
|
|
- <ul class="chart3-icon">
|
|
|
- <li>
|
|
|
- <image
|
|
|
- src="@/static/images/index/chart3-1.png"
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <image
|
|
|
- src="@/static/images/index/chart3-2.png"
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <image
|
|
|
- src="@/static/images/index/chart3-3.png"
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <image
|
|
|
- src="@/static/images/index/chart3-4.png"
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <image
|
|
|
- src="@/static/images/index/chart3-5.png"
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <!-- 图表 end-->
|
|
|
-
|
|
|
- <!-- 轮播图 开始 -->
|
|
|
- <u-swiper :list="arrayList.swiperList" indicator indicatorMode="line" radius="0" height="160" circular> </u-swiper>
|
|
|
- <!-- 轮播图 结束 -->
|
|
|
-
|
|
|
- <!-- 宫格列表 -->
|
|
|
- <view class="section2 section bg-white" style="margin-bottom: 10px" v-if="arrayList.recentlyUsed.length > 0">
|
|
|
- <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">最近使用</view>
|
|
|
- <view class="cu-list grid col-5 no-border">
|
|
|
- <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.recentlyUsed" :key="index">
|
|
|
- <image :src="item.icon" style="width: 40px; height: 40px"></image>
|
|
|
- <!-- <view class="cu-tag badge" v-if="item.badge != 0">
|
|
|
- <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
|
|
|
- </view> -->
|
|
|
- <text style="font-size: 13px">{{ item.menuName }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 宫格列表 end -->
|
|
|
-
|
|
|
- <!-- 宫格列表 -->
|
|
|
- <view class="section2 section bg-white">
|
|
|
- <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">常用功能</view>
|
|
|
- <view class="cu-list grid col-5 no-border">
|
|
|
- <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.cuIconList" :key="index">
|
|
|
- <image :src="item.icon" style="width: 40px; height: 40px"></image>
|
|
|
- <!-- <view class="cu-tag badge" v-if="item.badge != 0">
|
|
|
- <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
|
|
|
- </view> -->
|
|
|
- <text style="font-size: 13px">{{ item.menuName }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 宫格列表 end -->
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import searchSelect from "@/components/searchSelect/searchSelect.vue";
|
|
|
-
|
|
|
-import json from "@/static/js/json.js"; //引入api请求封装方法
|
|
|
-import * as jwx from "@/utils/jssdk.js"; //引入js sdk的封装
|
|
|
-
|
|
|
-import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
|
|
|
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
|
|
|
-import useXunJianStore from "@/store/modules/xunJian.js";
|
|
|
-
|
|
|
-import { scan_push, getHomePageData, getFunctionalModuleStatistics,getAppRouters} from "@/api/index";
|
|
|
-
|
|
|
-const settingsStore = useXunJianStore(); //全局变量值Store
|
|
|
-const BASE_URL = inject("$BASE_URL");
|
|
|
-
|
|
|
-const arrayList = reactive({
|
|
|
- InputBottom: 0,
|
|
|
- staticData: "",
|
|
|
- indicator: [],
|
|
|
- datavalue: [],
|
|
|
- dataname: [],
|
|
|
- Inv: 0,
|
|
|
- flag: false,
|
|
|
- searchList: [],
|
|
|
- searchList2: [],
|
|
|
- searchInput: "",
|
|
|
- selectedCode: 10012,
|
|
|
- codeResult: "",
|
|
|
-
|
|
|
- swiperList: ["../static/images/index/banner1.png", "../static/images/index/banner2.jpg", "../static/images/index/banner3.jpg"],
|
|
|
- // cuIconList: json.cuIconList,
|
|
|
- recentlyUsed: [],
|
|
|
-});
|
|
|
-
|
|
|
-onLoad((option) => {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //获取首页标题
|
|
|
- if (uni.getStorageSync("homeTitle")) {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: uni.getStorageSync("homeTitle"),
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: "首页",
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- if (uni.getStorageSync("recentlyUsed")) {
|
|
|
- arrayList.recentlyUsed = uni.getStorageSync("recentlyUsed");
|
|
|
- }
|
|
|
-
|
|
|
- // var res = uni.getStorageSync("selectedCode");
|
|
|
- // var res2 = uni.getStorageSync("selectedName");
|
|
|
- // if (res) {
|
|
|
- // uni.setNavigationBarTitle({
|
|
|
- // title: res2,
|
|
|
- // });
|
|
|
- // }
|
|
|
-
|
|
|
- // // 图表切换渲染
|
|
|
- // hackReset.value = false;
|
|
|
- // nextTick(() => {
|
|
|
- // hackReset.value = true;
|
|
|
- // });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- getAppRoutersData()
|
|
|
-
|
|
|
-});
|
|
|
-
|
|
|
-async function init() {
|
|
|
- window.location.href = BASE_URL + "Com/getPageAuthorization1";
|
|
|
-}
|
|
|
-//扫码
|
|
|
-function scanQRCode() {
|
|
|
- // console.log(1);
|
|
|
- // scanCode();
|
|
|
- // 将this赋值给that
|
|
|
- let that = this;
|
|
|
- // 微信公众号获取位置
|
|
|
- jwx.configWeiXin((jweixin) => {
|
|
|
- jweixin.scanQRCode({
|
|
|
- needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
|
|
|
- scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
|
|
|
- success: function (res) {
|
|
|
- setTimeout(function () {
|
|
|
- /* 放1000ms后执行的代码 */
|
|
|
- alert(res.resultStr);
|
|
|
- that.getCodeResult({
|
|
|
- ercode: res.resultStr,
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function scanCode() {
|
|
|
- uni.scanCode({
|
|
|
- scanType: ["qrCode"],
|
|
|
- success: (res) => {
|
|
|
- console.log("扫码成功", res);
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.log("扫码失败", err);
|
|
|
- },
|
|
|
- complete: () => {
|
|
|
- console.log("扫码结束");
|
|
|
- },
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 扫码成功后请求
|
|
|
-async function getCodeResult(param = {}) {
|
|
|
- scan_push(param).then((res) => {
|
|
|
- if (res.data.flag) {
|
|
|
- uni.showToast({
|
|
|
- title: "扫码成功",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-//获取地理位置
|
|
|
-function getLocation() {
|
|
|
- // 将this赋值给that
|
|
|
- let that = this;
|
|
|
- // 微信公众号获取位置
|
|
|
- jwx.configWeiXin((jweixin) => {
|
|
|
- alert(22);
|
|
|
- jweixin.getLocation({
|
|
|
- type: "gcj02", // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
|
|
|
- success: function (res) {
|
|
|
- alert(res.longitude);
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 九宫格页面跳转
|
|
|
-function navItemClick(item) {
|
|
|
- if (item.path) {
|
|
|
- item.sort = 0;
|
|
|
-
|
|
|
- arrayList.recentlyUsed.push(item);
|
|
|
-
|
|
|
- if (arrayList.recentlyUsed.length > 0) {
|
|
|
- arrayList.recentlyUsed = arrayList.recentlyUsed.filter((currentValue, currentIndex, selfArr) => {
|
|
|
- return selfArr.findIndex((x) => x.path === currentValue.path) === currentIndex;
|
|
|
- });
|
|
|
-
|
|
|
- arrayList.recentlyUsed.filter((el) => {
|
|
|
- if (el.path === item.path) {
|
|
|
- el.sort++;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- arrayList.recentlyUsed = settingsStore.sortEvent(arrayList.recentlyUsed, 1);
|
|
|
-
|
|
|
- uni.setStorageSync("recentlyUsed", arrayList.recentlyUsed);
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: item.path,
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- title: "Tips",
|
|
|
- content: "此模块开发中~",
|
|
|
- showCancel: false,
|
|
|
- success: function (res) {
|
|
|
- if (res.confirm) {
|
|
|
- } else if (res.cancel) {
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function showTag() {
|
|
|
- arrayList.flag = !arrayList.flag;
|
|
|
-}
|
|
|
-// 下拉选择
|
|
|
-function clickSelectItem(item, index) {
|
|
|
- arrayList.staticData = "";
|
|
|
- arrayList.selectedCode = item.owner_code;
|
|
|
- uni.setStorageSync("selectedCode", item.owner_code);
|
|
|
- uni.setStorageSync("selectedName", item.owner_name);
|
|
|
- arrayList.searchInput = item.owner_name;
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: arrayList.searchInput,
|
|
|
- });
|
|
|
-
|
|
|
- getHomeData({
|
|
|
- company_code: uni.getStorageSync("selectedCode"),
|
|
|
- });
|
|
|
- getHandleData({
|
|
|
- company_code: uni.getStorageSync("selectedCode"),
|
|
|
- });
|
|
|
-
|
|
|
- arrayList.flag = false;
|
|
|
-}
|
|
|
-
|
|
|
-function handleInput() {
|
|
|
- var newlist = arrayList.searchList2.filter((item) => item.owner_name.indexOf(arrayList.searchInput) > -1);
|
|
|
- arrayList.searchList = newlist;
|
|
|
-}
|
|
|
-
|
|
|
-function InputFocus(e) {
|
|
|
- arrayList.InputBottom = e.detail.height;
|
|
|
-}
|
|
|
-
|
|
|
-function InputBlur(e) {
|
|
|
- arrayList.InputBottom = 0;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-function getAppRoutersData() {
|
|
|
- getAppRouters({
|
|
|
-
|
|
|
- domain :window.location.host.indexOf('localhost') != -1
? 'localhost:81'
: window.location.host,
|
|
|
- }).then((res) => {
|
|
|
- console.log(res.data)
|
|
|
- arrayList.cuIconList=res.data
|
|
|
- console.log(window.location.host)
|
|
|
-
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-//echarts图表请求
|
|
|
-async function getHomeData(param = {}) {
|
|
|
- getHomePageData(param).then((res) => {
|
|
|
- // console.log('首页请求staticData')
|
|
|
- // console.log(res.data.data[0])
|
|
|
- arrayList.staticData = res.data.data[0];
|
|
|
-
|
|
|
- // var data = res.data.data[0]
|
|
|
-
|
|
|
- var datavalue = [
|
|
|
- arrayList.staticData.fire_water_count,
|
|
|
- arrayList.staticData.alarm_host_count,
|
|
|
- arrayList.staticData.electrical_fire_count,
|
|
|
- arrayList.staticData.other_count,
|
|
|
- arrayList.staticData.video_monitoring_count,
|
|
|
- ];
|
|
|
- var dataname = ["消防水系统", "报警主机", "电气火灾", "其他", "监控视频"];
|
|
|
- var color = ["#3C8BF0", "#06CDF8", "#0ECB70", "#6744EF", "#FFD803"];
|
|
|
-
|
|
|
- var aa = [
|
|
|
- arrayList.staticData.fire_water_count,
|
|
|
- arrayList.staticData.alarm_host_count,
|
|
|
- arrayList.staticData.electrical_fire_count,
|
|
|
- arrayList.staticData.other_count,
|
|
|
- arrayList.staticData.video_monitoring_count,
|
|
|
- ];
|
|
|
- aa.sort(function (a, b) {
|
|
|
- return a - b;
|
|
|
- });
|
|
|
- aa = aa.pop();
|
|
|
- var datamax = [aa, aa, aa, aa, aa];
|
|
|
-
|
|
|
- arrayList.datavalue = datavalue;
|
|
|
- arrayList.dataname = dataname;
|
|
|
-
|
|
|
- dataname.map((val, ind) => {
|
|
|
- arrayList.indicator.push({
|
|
|
- name: val,
|
|
|
- max: datamax[ind],
|
|
|
- color: color[ind],
|
|
|
- });
|
|
|
- });
|
|
|
- arrayList.indicator = arrayList.indicator.slice(-5);
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// 未处理告警请求
|
|
|
-async function getHandleData(param = {}) {
|
|
|
- getFunctionalModuleStatistics(param).then((res) => {
|
|
|
- arrayList.cuIconList[0].badge = res.data.data[0].comprehensive_alarm_count;
|
|
|
- arrayList.cuIconList[2].badge = res.data.data[0].fire_brigade_inspector_count;
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 自定义导航事件
|
|
|
-onNavigationBarButtonTap((e) => {
|
|
|
- if (e.float == "right") {
|
|
|
- // alert("你点击了扫一扫");
|
|
|
- scanQRCode();
|
|
|
- } else {
|
|
|
- // alert("你点击了获取位置");
|
|
|
- // getLocation()
|
|
|
- showTag();
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #f5f6f7;
|
|
|
-}
|
|
|
-
|
|
|
-.select-items {
|
|
|
- overflow: auto;
|
|
|
- height: 80vh;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs {
|
|
|
- border-radius: 50rpx;
|
|
|
- border: 1rpx solid #4074e7;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs > view {
|
|
|
- color: #4074e7;
|
|
|
- font-size: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs > view.active {
|
|
|
- color: #fff;
|
|
|
- background: #4074e7;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs > view:first-child {
|
|
|
- border-top-left-radius: 50rpx;
|
|
|
- border-bottom-left-radius: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs > view:nth-child(2) {
|
|
|
- border-left: 1px solid #4074e7;
|
|
|
- border-right: 1px solid #4074e7;
|
|
|
-}
|
|
|
-
|
|
|
-.static-tabs > view:last-child {
|
|
|
- border-top-right-radius: 50rpx;
|
|
|
- border-bottom-right-radius: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 检测时间 */
|
|
|
-.time {
|
|
|
- border-radius: 50rpx;
|
|
|
- background: #fafcff;
|
|
|
- border: 1px solid #e8f1ff;
|
|
|
- padding: 20rpx;
|
|
|
- color: #666666;
|
|
|
- font-size: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.chart3-box {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.chart3-icon {
|
|
|
- width: 90%;
|
|
|
- position: absolute;
|
|
|
- top: 60rpx;
|
|
|
- left: 30rpx;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.chart3-icon li {
|
|
|
- padding-top: 25rpx;
|
|
|
-}
|
|
|
-
|
|
|
-ul,
|
|
|
-li {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- list-style: none;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <!-- <u-sticky bgColor="#fff"> </u-sticky> -->
|
|
|
+
|
|
|
+ <scroll-view scroll-x>
|
|
|
+ <view>
|
|
|
+ <!-- 下拉选择 -->
|
|
|
+ <!-- <view class="searchSelect shadow" v-if="flag">
|
|
|
+ <view class="cu-bar search bg-white">
|
|
|
+ <view class="search-form round" style="margin-top: 0">
|
|
|
+ <input
|
|
|
+ @focus="InputFocus"
|
|
|
+ @blur="InputBlur"
|
|
|
+ @input="handleInput()"
|
|
|
+ v-model="searchInput"
|
|
|
+ :adjust-position="false"
|
|
|
+ type="text"
|
|
|
+ placeholder=""
|
|
|
+ confirm-type="search"
|
|
|
+ style="border: none !important"
|
|
|
+ />
|
|
|
+ <text class="cuIcon-search"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select-items">
|
|
|
+ <view
|
|
|
+ class="site-item"
|
|
|
+ v-if="!searchList.length"
|
|
|
+ style="text-align: center"
|
|
|
+ >暂无结果</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="select-item"
|
|
|
+ v-for="(item, index) in searchList"
|
|
|
+ @click="clickSelectItem(item, index)"
|
|
|
+ :key="index"
|
|
|
+ >{{ item.owner_name }}</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 下拉选择 end -->
|
|
|
+
|
|
|
+ <!-- 图表 -->
|
|
|
+ <!-- <view class="section1 section bg-white padding-xs">
|
|
|
+ <view
|
|
|
+ class="
|
|
|
+ static-tabs
|
|
|
+ grid
|
|
|
+ margin-bottom
|
|
|
+ text-center
|
|
|
+ col-3
|
|
|
+ margin-top-sm margin-bottom-sm
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ :class="['padding-sm ', Inv == 0 ? 'active' : '']"
|
|
|
+ @click="Inv = 0"
|
|
|
+ >报警信息统计</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ :class="['padding-sm ', Inv == 1 ? 'active' : '']"
|
|
|
+ @click="Inv = 1"
|
|
|
+ >数据等级统计</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ :class="['padding-sm ', Inv == 2 ? 'active' : '']"
|
|
|
+ @click="Inv = 2"
|
|
|
+ >设备运行状态</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="time text-center"
|
|
|
+ >统计时段:{{ staticData.statisticalPeriod }}
|
|
|
+ </view>
|
|
|
+ <view style="height: 570rpx">
|
|
|
+ <view v-if="Inv == 0"> </view>
|
|
|
+ <view v-if="Inv == 1"> </view>
|
|
|
+ <view v-if="Inv == 2" class="chart3-box">
|
|
|
+ <ul class="chart3-icon">
|
|
|
+ <li>
|
|
|
+ <image
|
|
|
+ src="@/static/images/index/chart3-1.png"
|
|
|
+ style="width: 64rpx; height: 64rpx"
|
|
|
+ ></image>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <image
|
|
|
+ src="@/static/images/index/chart3-2.png"
|
|
|
+ style="width: 64rpx; height: 64rpx"
|
|
|
+ ></image>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <image
|
|
|
+ src="@/static/images/index/chart3-3.png"
|
|
|
+ style="width: 64rpx; height: 64rpx"
|
|
|
+ ></image>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <image
|
|
|
+ src="@/static/images/index/chart3-4.png"
|
|
|
+ style="width: 64rpx; height: 64rpx"
|
|
|
+ ></image>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <image
|
|
|
+ src="@/static/images/index/chart3-5.png"
|
|
|
+ style="width: 64rpx; height: 64rpx"
|
|
|
+ ></image>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 图表 end-->
|
|
|
+
|
|
|
+ <!-- 轮播图 开始 -->
|
|
|
+ <u-swiper :list="arrayList.swiperList" indicator indicatorMode="line" radius="0" height="160" circular> </u-swiper>
|
|
|
+ <!-- 轮播图 结束 -->
|
|
|
+
|
|
|
+ <!-- 宫格列表 -->
|
|
|
+ <view class="section2 section bg-white" style="margin-bottom: 10px" v-if="arrayList.recentlyUsed.length > 0">
|
|
|
+ <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">最近使用</view>
|
|
|
+ <view class="cu-list grid col-5 no-border">
|
|
|
+ <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.recentlyUsed" :key="index">
|
|
|
+ <image :src="item.icon" style="width: 40px; height: 40px"></image>
|
|
|
+ <!-- <view class="cu-tag badge" v-if="item.badge != 0">
|
|
|
+ <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
|
|
|
+ </view> -->
|
|
|
+ <text style="font-size: 13px">{{ item.menuName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 宫格列表 end -->
|
|
|
+
|
|
|
+ <!-- 宫格列表 -->
|
|
|
+ <view class="section2 section bg-white">
|
|
|
+ <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">常用功能</view>
|
|
|
+ <view class="cu-list grid col-5 no-border">
|
|
|
+ <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.cuIconList" :key="index">
|
|
|
+ <image :src="item.icon" style="width: 40px; height: 40px"></image>
|
|
|
+ <!-- <view class="cu-tag badge" v-if="item.badge != 0">
|
|
|
+ <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
|
|
|
+ </view> -->
|
|
|
+ <text style="font-size: 13px">{{ item.menuName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 宫格列表 end -->
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import searchSelect from "@/components/searchSelect/searchSelect.vue";
|
|
|
+
|
|
|
+import json from "@/static/js/json.js"; //引入api请求封装方法
|
|
|
+import * as jwx from "@/utils/jssdk.js"; //引入js sdk的封装
|
|
|
+
|
|
|
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
|
|
|
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
|
|
|
+import useXunJianStore from "@/store/modules/xunJian.js";
|
|
|
+
|
|
|
+import { scan_push, getHomePageData, getFunctionalModuleStatistics,getAppRouters} from "@/api/index";
|
|
|
+
|
|
|
+const settingsStore = useXunJianStore(); //全局变量值Store
|
|
|
+const BASE_URL = inject("$BASE_URL");
|
|
|
+
|
|
|
+const arrayList = reactive({
|
|
|
+ InputBottom: 0,
|
|
|
+ staticData: "",
|
|
|
+ indicator: [],
|
|
|
+ datavalue: [],
|
|
|
+ dataname: [],
|
|
|
+ Inv: 0,
|
|
|
+ flag: false,
|
|
|
+ searchList: [],
|
|
|
+ searchList2: [],
|
|
|
+ searchInput: "",
|
|
|
+ selectedCode: 10012,
|
|
|
+ codeResult: "",
|
|
|
+
|
|
|
+ swiperList: ["../static/images/index/banner1.png", "../static/images/index/banner2.jpg", "../static/images/index/banner3.jpg"],
|
|
|
+ // cuIconList: json.cuIconList,
|
|
|
+ recentlyUsed: [],
|
|
|
+});
|
|
|
+
|
|
|
+onLoad((option) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //获取首页标题
|
|
|
+ if (uni.getStorageSync("homeTitle")) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: uni.getStorageSync("homeTitle"),
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: "首页",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (uni.getStorageSync("recentlyUsed")) {
|
|
|
+ arrayList.recentlyUsed = uni.getStorageSync("recentlyUsed");
|
|
|
+ }
|
|
|
+
|
|
|
+ // var res = uni.getStorageSync("selectedCode");
|
|
|
+ // var res2 = uni.getStorageSync("selectedName");
|
|
|
+ // if (res) {
|
|
|
+ // uni.setNavigationBarTitle({
|
|
|
+ // title: res2,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 图表切换渲染
|
|
|
+ // hackReset.value = false;
|
|
|
+ // nextTick(() => {
|
|
|
+ // hackReset.value = true;
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ getAppRoutersData()
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+async function init() {
|
|
|
+ window.location.href = BASE_URL + "Com/getPageAuthorization1";
|
|
|
+}
|
|
|
+//扫码
|
|
|
+function scanQRCode() {
|
|
|
+ // console.log(1);
|
|
|
+ // scanCode();
|
|
|
+ // 将this赋值给that
|
|
|
+ let that = this;
|
|
|
+ // 微信公众号获取位置
|
|
|
+ jwx.configWeiXin((jweixin) => {
|
|
|
+ jweixin.scanQRCode({
|
|
|
+ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
|
|
|
+ scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
|
|
|
+ success: function (res) {
|
|
|
+ setTimeout(function () {
|
|
|
+ /* 放1000ms后执行的代码 */
|
|
|
+ alert(res.resultStr);
|
|
|
+ that.getCodeResult({
|
|
|
+ ercode: res.resultStr,
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function scanCode() {
|
|
|
+ uni.scanCode({
|
|
|
+ scanType: ["qrCode"],
|
|
|
+ success: (res) => {
|
|
|
+ console.log("扫码成功", res);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("扫码失败", err);
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ console.log("扫码结束");
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 扫码成功后请求
|
|
|
+async function getCodeResult(param = {}) {
|
|
|
+ scan_push(param).then((res) => {
|
|
|
+ if (res.data.flag) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "扫码成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+//获取地理位置
|
|
|
+function getLocation() {
|
|
|
+ // 将this赋值给that
|
|
|
+ let that = this;
|
|
|
+ // 微信公众号获取位置
|
|
|
+ jwx.configWeiXin((jweixin) => {
|
|
|
+ alert(22);
|
|
|
+ jweixin.getLocation({
|
|
|
+ type: "gcj02", // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
|
|
|
+ success: function (res) {
|
|
|
+ alert(res.longitude);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 九宫格页面跳转
|
|
|
+function navItemClick(item) {
|
|
|
+ if (item.path) {
|
|
|
+ item.sort = 0;
|
|
|
+
|
|
|
+ arrayList.recentlyUsed.push(item);
|
|
|
+
|
|
|
+ if (arrayList.recentlyUsed.length > 0) {
|
|
|
+ arrayList.recentlyUsed = arrayList.recentlyUsed.filter((currentValue, currentIndex, selfArr) => {
|
|
|
+ return selfArr.findIndex((x) => x.path === currentValue.path) === currentIndex;
|
|
|
+ });
|
|
|
+
|
|
|
+ arrayList.recentlyUsed.filter((el) => {
|
|
|
+ if (el.path === item.path) {
|
|
|
+ el.sort++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ arrayList.recentlyUsed = settingsStore.sortEvent(arrayList.recentlyUsed, 1);
|
|
|
+
|
|
|
+ uni.setStorageSync("recentlyUsed", arrayList.recentlyUsed);
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.path,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: "Tips",
|
|
|
+ content: "此模块开发中~",
|
|
|
+ showCancel: false,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ } else if (res.cancel) {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function showTag() {
|
|
|
+ arrayList.flag = !arrayList.flag;
|
|
|
+}
|
|
|
+// 下拉选择
|
|
|
+function clickSelectItem(item, index) {
|
|
|
+ arrayList.staticData = "";
|
|
|
+ arrayList.selectedCode = item.owner_code;
|
|
|
+ uni.setStorageSync("selectedCode", item.owner_code);
|
|
|
+ uni.setStorageSync("selectedName", item.owner_name);
|
|
|
+ arrayList.searchInput = item.owner_name;
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: arrayList.searchInput,
|
|
|
+ });
|
|
|
+
|
|
|
+ getHomeData({
|
|
|
+ company_code: uni.getStorageSync("selectedCode"),
|
|
|
+ });
|
|
|
+ getHandleData({
|
|
|
+ company_code: uni.getStorageSync("selectedCode"),
|
|
|
+ });
|
|
|
+
|
|
|
+ arrayList.flag = false;
|
|
|
+}
|
|
|
+
|
|
|
+function handleInput() {
|
|
|
+ var newlist = arrayList.searchList2.filter((item) => item.owner_name.indexOf(arrayList.searchInput) > -1);
|
|
|
+ arrayList.searchList = newlist;
|
|
|
+}
|
|
|
+
|
|
|
+function InputFocus(e) {
|
|
|
+ arrayList.InputBottom = e.detail.height;
|
|
|
+}
|
|
|
+
|
|
|
+function InputBlur(e) {
|
|
|
+ arrayList.InputBottom = 0;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function getAppRoutersData() {
|
|
|
+ getAppRouters({
|
|
|
+
|
|
|
+ domain :window.location.host.indexOf('localhost') != -1
|
|
|
+ ? 'localhost:81'
|
|
|
+ : window.location.host,
|
|
|
+ platformType:'MOB'
|
|
|
+ // domain :'172.16.120.165:13201'
|
|
|
+ // domain :'172.16.120.165:13203'
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res.data)
|
|
|
+ arrayList.cuIconList=res.data
|
|
|
+ console.log(window.location.host)
|
|
|
+
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//echarts图表请求
|
|
|
+async function getHomeData(param = {}) {
|
|
|
+ getHomePageData(param).then((res) => {
|
|
|
+ // console.log('首页请求staticData')
|
|
|
+ // console.log(res.data.data[0])
|
|
|
+ arrayList.staticData = res.data.data[0];
|
|
|
+
|
|
|
+ // var data = res.data.data[0]
|
|
|
+
|
|
|
+ var datavalue = [
|
|
|
+ arrayList.staticData.fire_water_count,
|
|
|
+ arrayList.staticData.alarm_host_count,
|
|
|
+ arrayList.staticData.electrical_fire_count,
|
|
|
+ arrayList.staticData.other_count,
|
|
|
+ arrayList.staticData.video_monitoring_count,
|
|
|
+ ];
|
|
|
+ var dataname = ["消防水系统", "报警主机", "电气火灾", "其他", "监控视频"];
|
|
|
+ var color = ["#3C8BF0", "#06CDF8", "#0ECB70", "#6744EF", "#FFD803"];
|
|
|
+
|
|
|
+ var aa = [
|
|
|
+ arrayList.staticData.fire_water_count,
|
|
|
+ arrayList.staticData.alarm_host_count,
|
|
|
+ arrayList.staticData.electrical_fire_count,
|
|
|
+ arrayList.staticData.other_count,
|
|
|
+ arrayList.staticData.video_monitoring_count,
|
|
|
+ ];
|
|
|
+ aa.sort(function (a, b) {
|
|
|
+ return a - b;
|
|
|
+ });
|
|
|
+ aa = aa.pop();
|
|
|
+ var datamax = [aa, aa, aa, aa, aa];
|
|
|
+
|
|
|
+ arrayList.datavalue = datavalue;
|
|
|
+ arrayList.dataname = dataname;
|
|
|
+
|
|
|
+ dataname.map((val, ind) => {
|
|
|
+ arrayList.indicator.push({
|
|
|
+ name: val,
|
|
|
+ max: datamax[ind],
|
|
|
+ color: color[ind],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ arrayList.indicator = arrayList.indicator.slice(-5);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 未处理告警请求
|
|
|
+async function getHandleData(param = {}) {
|
|
|
+ getFunctionalModuleStatistics(param).then((res) => {
|
|
|
+ arrayList.cuIconList[0].badge = res.data.data[0].comprehensive_alarm_count;
|
|
|
+ arrayList.cuIconList[2].badge = res.data.data[0].fire_brigade_inspector_count;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 自定义导航事件
|
|
|
+onNavigationBarButtonTap((e) => {
|
|
|
+ if (e.float == "right") {
|
|
|
+ // alert("你点击了扫一扫");
|
|
|
+ scanQRCode();
|
|
|
+ } else {
|
|
|
+ // alert("你点击了获取位置");
|
|
|
+ // getLocation()
|
|
|
+ showTag();
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #f5f6f7;
|
|
|
+}
|
|
|
+
|
|
|
+.select-items {
|
|
|
+ overflow: auto;
|
|
|
+ height: 80vh;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs {
|
|
|
+ border-radius: 50rpx;
|
|
|
+ border: 1rpx solid #4074e7;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs > view {
|
|
|
+ color: #4074e7;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs > view.active {
|
|
|
+ color: #fff;
|
|
|
+ background: #4074e7;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs > view:first-child {
|
|
|
+ border-top-left-radius: 50rpx;
|
|
|
+ border-bottom-left-radius: 50rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs > view:nth-child(2) {
|
|
|
+ border-left: 1px solid #4074e7;
|
|
|
+ border-right: 1px solid #4074e7;
|
|
|
+}
|
|
|
+
|
|
|
+.static-tabs > view:last-child {
|
|
|
+ border-top-right-radius: 50rpx;
|
|
|
+ border-bottom-right-radius: 50rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 检测时间 */
|
|
|
+.time {
|
|
|
+ border-radius: 50rpx;
|
|
|
+ background: #fafcff;
|
|
|
+ border: 1px solid #e8f1ff;
|
|
|
+ padding: 20rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.chart3-box {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.chart3-icon {
|
|
|
+ width: 90%;
|
|
|
+ position: absolute;
|
|
|
+ top: 60rpx;
|
|
|
+ left: 30rpx;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.chart3-icon li {
|
|
|
+ padding-top: 25rpx;
|
|
|
+}
|
|
|
+
|
|
|
+ul,
|
|
|
+li {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+</style>
|