From 6139494798e7f91d7864fff4ed09ce9a08395ece Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 24 十月 2024 18:29:54 +0800
Subject: [PATCH] ll
---
pda/utils/service.js | 13
admin/src/views/platform/platformReason.vue | 77 ++---
admin/src/components/business/OperaPlatformWindow.vue | 4
screen/src/components/FirePercent.vue | 44 +++
admin/src/components/business/OperaPlatformReasonWindow.vue | 36 -
admin/src/views/platform/platform.vue | 6
pda/pages/index/center.vue | 22
screen/src/router/index.js | 2
screen/src/views/FireFighting.vue | 239 +++++++++++-----
screen/src/views/TaskEfficiency.vue | 359 +++++++++++++++++++++++++
10 files changed, 628 insertions(+), 174 deletions(-)
diff --git a/admin/src/components/business/OperaPlatformReasonWindow.vue b/admin/src/components/business/OperaPlatformReasonWindow.vue
index 902fa39..6879f18 100644
--- a/admin/src/components/business/OperaPlatformReasonWindow.vue
+++ b/admin/src/components/business/OperaPlatformReasonWindow.vue
@@ -1,33 +1,23 @@
<template>
- <GlobalWindow
- :title="title"
- width="50%"
- :visible.sync="visible"
- :confirm-working="isWorking"
- @confirm="confirm"
- >
+ <GlobalWindow :title="title" width="50%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="鍏ュ洯鍘熷洜锛�" prop="reason">
- <el-input v-model="form.reason" placeholder="璇疯緭鍏ュ叆鍥師鍥�" v-trim/>
+ <el-input v-model="form.reason" placeholder="璇疯緭鍏ュ叆鍥師鍥�" v-trim />
</el-form-item>
<el-form-item label="浣滀笟鏈堝彴缁勶細" prop="groupId">
- <el-select v-model="form.groupId" >
- <el-option
- v-for="item in groupList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
+ <el-select v-model="form.groupId">
+ <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
- <el-form-item label="浣滀笟鏁伴噺闄愬埗锛堜竾鍙�/澶╋級锛�" prop="limitNum" >
- <el-input type="number" v-model="form.limitNum" placeholder="璇疯緭鍏ヤ綔涓氭暟閲忛檺鍒讹紙涓囧彧/澶╋級" v-trim/>
+ <el-form-item label="浣滀笟鏁伴噺闄愬埗锛堜竾鏀�/澶╋級锛�" prop="limitNum">
+ <el-input type="number" v-model="form.limitNum" placeholder="璇疯緭鍏ヤ綔涓氭暟閲忛檺鍒讹紙涓囨敮/澶╋級" v-trim />
</el-form-item>
<el-form-item label="鎺掑簭鐮�(鍗囧簭)锛�" prop="sortnum">
- <el-input type="number" v-model="form.sortnum" placeholder="璇疯緭鍏ユ帓搴忕爜(鍗囧簭)" v-trim/>
+ <el-input type="number" v-model="form.sortnum" placeholder="璇疯緭鍏ユ帓搴忕爜(鍗囧簭)" v-trim />
</el-form-item>
<el-form-item label="璇存槑锛�" prop="remark">
- <el-input type="textarea" v-model="form.remark" placeholder="璇疯緭鍏ヨ鏄�" v-trim/>
+ <el-input type="textarea" v-model="form.remark" placeholder="璇疯緭鍏ヨ鏄�" v-trim />
</el-form-item>
</el-form>
</GlobalWindow>
@@ -41,7 +31,7 @@
name: 'OperaPlatformReasonWindow',
extends: BaseOpera,
components: { GlobalWindow },
- data () {
+ data() {
return {
// 琛ㄥ崟鏁版嵁
groupList: [],
@@ -60,7 +50,7 @@
}
}
},
- created () {
+ created() {
this.config({
api: '/platform/platformReason',
'field.id': 'id'
@@ -72,7 +62,7 @@
* @title 绐楀彛鏍囬
* @target 缂栬緫鐨勫璞�
*/
- open (title, target) {
+ open(title, target) {
this.title = title
this.loadGroupList()
this.visible = true
@@ -91,7 +81,7 @@
}
})
},
- loadGroupList () {
+ loadGroupList() {
allList({})
.then(res => {
this.groupList = res || []
@@ -102,7 +92,7 @@
}
</script>
<style scoped>
-.labelTip{
+.labelTip {
font-size: 12px;
color: #666666;
}
diff --git a/admin/src/components/business/OperaPlatformWindow.vue b/admin/src/components/business/OperaPlatformWindow.vue
index dd746de..a8bcd00 100644
--- a/admin/src/components/business/OperaPlatformWindow.vue
+++ b/admin/src/components/business/OperaPlatformWindow.vue
@@ -32,8 +32,8 @@
<el-form-item label="鍚屾椂浣滀笟鏁伴噺锛�" prop="workingNum">
<el-input type="number" v-model="form.workingNum" placeholder="璇疯緭鍏ュ悓鏃朵綔涓氭暟閲�" v-trim />
</el-form-item>
- <el-form-item label="鏈堝彴浣滀笟鏁堢巼(涓囧彧/灏忔椂)锛�" prop="workRate">
- <el-input type="number" v-model="form.workRate" placeholder="璇疯緭鍏ユ湀鍙颁綔涓氭晥鐜�(涓囧彧/灏忔椂)" v-trim />
+ <el-form-item label="鏈堝彴浣滀笟鏁堢巼(涓囨敮/灏忔椂)锛�" prop="workRate">
+ <el-input type="number" v-model="form.workRate" placeholder="璇疯緭鍏ユ湀鍙颁綔涓氭晥鐜�(涓囨敮/灏忔椂)" v-trim />
</el-form-item>
<el-form-item label="浣滀笟瓒呮椂鎶ヨ鏃堕棿(鍒嗛挓)锛�" prop="workTimeoutAlarmTime">
<el-input type="number" v-model="form.workTimeoutAlarmTime" placeholder="璇疯緭鍏ヤ綔涓氳秴鏃舵姤璀︽椂闂�(鍒嗛挓)" v-trim />
diff --git a/admin/src/views/platform/platform.vue b/admin/src/views/platform/platform.vue
index 4d98a5a..fc0e89f 100644
--- a/admin/src/views/platform/platform.vue
+++ b/admin/src/views/platform/platform.vue
@@ -14,8 +14,8 @@
</el-select>
</el-form-item>
<!-- <section> -->
- <el-button type="primary" @click="search">鎼滅储</el-button>
- <el-button @click="reset">閲嶇疆</el-button>
+ <el-button type="primary" @click="search">鎼滅储</el-button>
+ <el-button @click="reset">閲嶇疆</el-button>
<!-- </section> -->
</el-form>
</SearchFormCollapse>
@@ -39,7 +39,7 @@
<el-table-column prop="workTimeoutAlarmTime" label="浣滀笟瓒呮椂鎶ヨ鏃堕棿(鍒嗛挓锛�" min-width="180px">
<template scope="{row}"> {{ row.workTimeoutAlarmTime ? (row.workTimeoutAlarmTime) : '-' }}</template>
</el-table-column>
- <el-table-column prop="workRate" label="鏈堝彴浣滀笟鏁堢巼(涓囧彧/灏忔椂)" min-width="180px"></el-table-column>
+ <el-table-column prop="workRate" label="鏈堝彴浣滀笟鏁堢巼(涓囨敮/灏忔椂)" min-width="180px"></el-table-column>
<!-- <el-table-column prop="platformStatus" label="鏈堝彴鐘舵��" min-width="100px">
<template scope="{row}">
<span v-if="row.platformStatus == 0">鏃犺溅</span>
diff --git a/admin/src/views/platform/platformReason.vue b/admin/src/views/platform/platformReason.vue
index 580b420..117bf82 100644
--- a/admin/src/views/platform/platformReason.vue
+++ b/admin/src/views/platform/platformReason.vue
@@ -4,15 +4,12 @@
<SearchFormCollapse slot="search-form" :need-more="false">
<el-form ref="searchForm" :model="searchForm" label-width="100px" inline>
<el-form-item label="" prop="reason">
- <el-input v-model="searchForm.reason" clearable placeholder="璇疯緭鍏ュ叆鍥師鍥�" @keypress.enter.native="search"></el-input>
+ <el-input v-model="searchForm.reason" clearable placeholder="璇疯緭鍏ュ叆鍥師鍥�"
+ @keypress.enter.native="search"></el-input>
</el-form-item>
- <el-form-item label="" >
- <el-select v-model="searchForm.groupId" placeholder="璇烽�夋嫨鏈堝彴鍒嗙粍" @change="search" clearable>
- <el-option
- v-for="item in groupList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
+ <el-form-item label="">
+ <el-select v-model="searchForm.groupId" placeholder="璇烽�夋嫨鏈堝彴鍒嗙粍" @change="search" clearable>
+ <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
@@ -24,59 +21,45 @@
</SearchFormCollapse>
<!-- 琛ㄦ牸鍜屽垎椤� -->
<template v-slot:table-wrap>
- <ul class="toolbar" v-permissions="['business:platformreason:create','business:platformreason:delete']">
- <li><el-button type="primary" @click="$refs.OperaPlatformReasonWindow.open('鏂板缓鏈堝彴鍏ュ洯鍘熷洜')" icon="el-icon-plus" v-permissions="['business:platformreason:create']">鏂板缓</el-button></li>
- <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:platformreason:delete']">鍒犻櫎</el-button></li>
+ <ul class="toolbar" v-permissions="['business:platformreason:create', 'business:platformreason:delete']">
+ <li><el-button type="primary" @click="$refs.OperaPlatformReasonWindow.open('鏂板缓鏈堝彴鍏ュ洯鍘熷洜')" icon="el-icon-plus"
+ v-permissions="['business:platformreason:create']">鏂板缓</el-button></li>
+ <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete"
+ v-permissions="['business:platformreason:delete']">鍒犻櫎</el-button></li>
</ul>
- <el-table
- v-loading="isWorking.search"
- :data="tableData.list"
- stripe
- @selection-change="handleSelectionChange"
- >
+ <el-table v-loading="isWorking.search" :data="tableData.list" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="reason" label="鍏ュ洯鍘熷洜" fixed min-width="100px"></el-table-column>
<el-table-column prop="groupName" label="瀵瑰簲浣滀笟鏈堝彴缁�" fixed min-width="150px"></el-table-column>
- <el-table-column prop="limitNum" label="浣滀笟閲�(涓囧彧/澶�)" min-width="120px"></el-table-column>
+ <el-table-column prop="limitNum" label="浣滀笟閲�(涓囨敮/澶�)" min-width="120px"></el-table-column>
<el-table-column prop="sortnum" label="鎺掑簭鐮�" fixed min-width="80px"></el-table-column>
<el-table-column prop="remark" label="璇存槑" fixed min-width="100px"></el-table-column>
- <el-table-column label="绂�/鍚敤" min-width="120px" >
+ <el-table-column label="绂�/鍚敤" min-width="120px">
<template slot-scope="{row}">
- <el-switch
- @change="changeStatus($event, row)"
- v-model="row.status"
- active-color="#13ce66"
- inactive-color="#ff4949"
- :active-value="0"
- :inactive-value="1">
+ <el-switch @change="changeStatus($event, row)" v-model="row.status" active-color="#13ce66"
+ inactive-color="#ff4949" :active-value="0" :inactive-value="1">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="editDate" label="鏈�杩戞搷浣滄椂闂�" min-width="140px"></el-table-column>
- <el-table-column
- v-if="containPermissions(['business:platformreason:update', 'business:platformreason:delete'])"
- label="鎿嶄綔"
- align="center"
- min-width="150"
- fixed="right"
- >
+ <el-table-column v-if="containPermissions(['business:platformreason:update', 'business:platformreason:delete'])"
+ label="鎿嶄綔" align="center" min-width="150" fixed="right">
<template slot-scope="{row}">
- <el-button type="text" @click="$refs.OperaPlatformApproveTemplWindow.open('鏈堝彴鍏ュ洯鍘熷洜瀹℃壒娴�', row)" icon="el-icon-edit" v-permissions="['business:platformreason:update']">瀹℃壒娴�</el-button>
- <el-button type="text" @click="$refs.OperaPlatformReasonWindow.open('缂栬緫鏈堝彴鍏ュ洯鍘熷洜', row)" icon="el-icon-edit" v-permissions="['business:platformreason:update']">缂栬緫</el-button>
- <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:platformreason:delete']">鍒犻櫎</el-button>
+ <el-button type="text" @click="$refs.OperaPlatformApproveTemplWindow.open('鏈堝彴鍏ュ洯鍘熷洜瀹℃壒娴�', row)"
+ icon="el-icon-edit" v-permissions="['business:platformreason:update']">瀹℃壒娴�</el-button>
+ <el-button type="text" @click="$refs.OperaPlatformReasonWindow.open('缂栬緫鏈堝彴鍏ュ洯鍘熷洜', row)" icon="el-icon-edit"
+ v-permissions="['business:platformreason:update']">缂栬緫</el-button>
+ <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
+ v-permissions="['business:platformreason:delete']">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
- <pagination
- @size-change="handleSizeChange"
- @current-change="handlePageChange"
- :pagination="tableData.pagination"
- >
+ <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
</pagination>
</template>
<!-- 鏂板缓/淇敼 -->
- <OperaPlatformReasonWindow ref="OperaPlatformReasonWindow" @success="handlePageChange"/>
- <OperaPlatformApproveTemplWindow ref="OperaPlatformApproveTemplWindow" @success="handlePageChange"/>
+ <OperaPlatformReasonWindow ref="OperaPlatformReasonWindow" @success="handlePageChange" />
+ <OperaPlatformApproveTemplWindow ref="OperaPlatformApproveTemplWindow" @success="handlePageChange" />
</TableLayout>
</template>
@@ -92,7 +75,7 @@
name: 'Platform',
extends: BaseTable,
components: { SearchFormCollapse, TableLayout, Pagination, OperaPlatformReasonWindow, OperaPlatformApproveTemplWindow },
- data () {
+ data() {
return {
groupList: [],
// 鎼滅储
@@ -104,7 +87,7 @@
}
}
},
- created () {
+ created() {
this.config({
module: '鏈堝彴鍏ュ洯鍘熷洜淇℃伅琛�',
api: '/platform/platformReason',
@@ -115,13 +98,13 @@
this.loadGroupList()
},
methods: {
- loadGroupList () {
+ loadGroupList() {
allList({})
.then(res => {
this.groupList = res || []
})
},
- changeStatus (e, row) {
+ changeStatus(e, row) {
this.api.updateStatusById({
id: row.id,
status: e
diff --git a/pda/pages/index/center.vue b/pda/pages/index/center.vue
index 54774e0..5ab53fa 100644
--- a/pda/pages/index/center.vue
+++ b/pda/pages/index/center.vue
@@ -184,7 +184,7 @@
<view class="transform_list">
<view class="line" @click="transformPlatClick(item)" v-for="item in TransferList"
:key="item.id">
- <view class="name">{{ item.name }}</view>
+ <view class="name">{{ item.name || item.platformName}}</view>
<view class="status" :class="{ green: item.workStatus == 1 }">({{ item.workStatus == 0 ? "绌洪棽" : "浣滀笟涓�" }})
</view>
<image v-if="transformPlatId == item.id" src="@/static/ic_select@2x.png" class="checked" />
@@ -259,12 +259,15 @@
},
methods: {
getTransferList() {
- getPlatformWorkData({
- platformId: this.activePlatform.id
+ getPlatformGroupList({
+ queryData: 1,
+ queryType: 1
}).then(res => {
- console.log('res.data', res.data);
- if(res.data && res.data.platformJobList){
- this.TransferList = res.data.platformJobList
+ const platformGroupList = res.data || []
+ if (platformGroupList.length > 0) {
+ const { activePlatformGroup } = this
+ const temp = platformGroupList.find(i => i.id === activePlatformGroup.id)
+ this.TransferList = temp.platformList || []
}
})
},
@@ -286,19 +289,16 @@
}
})
},
- getPlatformTask() {
- uni.showLoading({title:"鍔犺浇涓�..."})
+ getPlatformTask() {
getPlatformWorkData({
platformId: this.activePlatform.id
- }).then(res => {
- uni.hideLoading()
+ }).then(res => {
this.platformTaskInfo = res.data
this.circulInitTaskList()
setInterval(() => {
this.circulInitTaskList()
}, 1000)
}, () => {
- uni.hideLoading()
})
},
circulInitTaskList() {
diff --git a/pda/utils/service.js b/pda/utils/service.js
index 0253a05..342b331 100644
--- a/pda/utils/service.js
+++ b/pda/utils/service.js
@@ -5,15 +5,10 @@
let token = uni.getStorageSync('token') || null
// 鍦ㄧ櫥褰曠殑鏃跺�欓渶瑕佸偍瀛� token uni.setStorageSync("authorization","杩欓噷鏄櫥褰曡幏鍙栫殑token鍊�")
- // uni.showLoading({
- // title:"鍔犺浇涓�..."
- // })
- if(!options.hideLoading){
- uni.showLoading({
- title: '鍔犺浇涓�',
- mask: true
- })
- }
+ uni.showLoading({
+ title: '鍔犺浇涓�',
+ mask: true
+ })
uni.request({
url: baseUrl + options.url,
data: options.data || {},
diff --git a/screen/src/components/FirePercent.vue b/screen/src/components/FirePercent.vue
new file mode 100644
index 0000000..2e358f2
--- /dev/null
+++ b/screen/src/components/FirePercent.vue
@@ -0,0 +1,44 @@
+<template>
+ <div class="main">
+ <div class="plan_wrap">
+ <div class="plan" :style="{
+ width: `${rate}%`,
+ backgroundColor: color
+ }"></div>
+ <div class="icon" :style="{ backgroundColor: color }"></div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+const props = defineProps({
+ rate: Number,
+ color: String
+})
+</script>
+
+<style lang="scss" scoped>
+.main {
+ width: 100%;
+ padding: 4px;
+ height: 13px;
+
+ .plan_wrap {
+ height: 6px;
+ width: 100%;
+ background-color: #3a474e;
+ display: flex;
+ align-items: center;
+ }
+
+ .plan {
+ height: 6px;
+ }
+ .icon{
+ width: 13px;
+ height: 13px;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index cdb7dee..5b24943 100644
--- a/screen/src/router/index.js
+++ b/screen/src/router/index.js
@@ -6,7 +6,7 @@
routes: [
{
path: '/',
- component: () => import('../views/TaskEfficiency.vue')
+ component: () => import('../views/LogisticsCenter.vue')
},
{
path: '/PlatformCall', // 鏈堝彴鍙彿澶у睆
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 864f2c5..2a5d881 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -54,7 +54,14 @@
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
</div>
<div class="police_wrap">
- <div class="echart1" id="echart1"></div>
+ <div class="item" v-for="(ind, i) in 4">
+ <div class="head">
+ <div class="name">鐪熷疄鎶ヨ鏁�</div>
+ <div class="name">{{ i }}娆�</div>
+ </div>
+ <FirePercent :color="policeColors[i]" :rate="40" />
+ </div>
+
</div>
</div>
<div class="left_box_three">
@@ -286,7 +293,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
-import Percent from '@/components/percent.vue'
+import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
@@ -303,99 +310,165 @@
}, 1000)
const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
-const initEnergy = () => {
- var myChart = echarts.init(document.querySelector('.energyRef'))
- // 缁樺埗鍥捐〃
- const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
- myChart.setOption({
+const initEchart2 = () => {
+ var myChart = echarts.init(document.querySelector('.echart2'))
+ // 鐢熸垚鏁版嵁鍜屾棩鏈�
+ function getLastSevenDays() {
+ const days = []
+ const today = new Date()
+ for (let i = 10; i >= 0; i--) {
+ days.push(`${i + 1}鏈坄) // 鏍煎紡鍖栨棩鏈熶负 "X鏈圶鏃�"
+ }
+ return days
+ }
+
+ // 绀轰緥鏁版嵁
+ const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // 鍑嗘椂
+ const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // 杩熷埌
+ const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // 璇峰亣
+ const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // 鍔犵彮
+ const option = {
+ legend: {
+ x: "center",
+ textStyle: {
+ color: "#FFFFFF", // 鍥句緥鏂囧瓧璁句负鐧借壊
+ fontSize: 12
+ },
+ icon: 'circle',
+ top: '6%',
+ itemWidth: 8,
+ itemHeight: 8,
+ itemGap: 20,
+ data: ['鍛婅鏁�', '杩涜涓�', '宸插鐞�', '璇姤鏁�'] // 鏇存柊鍥句緥鍚嶇О
+ },
grid: {
- top: '20%',
left: '2%',
- right: '2%',
- bottom: '4%',
- containLabel: true
+ right: '0%',
+ top: '18%',
+ bottom: '10%',
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'line'
+ type: "shadow"
},
+ textStyle: {
+ color: "rgba(255, 255, 255, 1)"
+ },
+ backgroundColor: "rgba(0,0,0,0.8)",
+ borderColor: "rgba(219, 230, 255, 0.8)",
},
xAxis: {
- type: 'category',
- data: [1, 2, 3, 4, 4, 5]
+ data: getLastSevenDays(), // 浣跨敤杩戜竷澶╂棩鏈�
+ axisLabel: {
+ color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 14,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#1E294C'
+ }
+ },
+ axisTick: {
+ show: false
+ }
},
yAxis: {
- type: 'value',
- name: 'kw路h',
- nameTextStyle: {
- padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ show: true,
+ axisLabel: {
+ color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 12,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
},
splitLine: {
show: true,
lineStyle: {
- //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
- color: 'rgba(255,255,255,0.14)',
- }
- }
+ color: ["#0f1d27"],
+ width: 1
+ },
+ },
},
series: [
{
- data: [1, 2, 3, 4, 5],
- type: 'bar',
- barWidth: 10,
+ name: "鍛婅鏁�",
+ type: "bar",
+ stack: "attendance",
+ data: data1,
itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- { offset: 0, color: arr[1] },
- { offset: 1, color: '#080807' }
- ]
- ),
- barBorderRadius: [10, 10, 0, 0]
- }
- }
- }
- ]
- })
+ color: '#FEAF01',
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ barWidth: 6,
+ },
+ {
+ name: "杩涜涓�", // 杩熷埌鏁版嵁
+ type: "bar",
+ stack: "attendance",
+ data: data2,
+ itemStyle: {
+ color: '#28F0C4', // 杩熷埌鐨勯鑹�
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ {
+ name: "宸插鐞�", // 璇峰亣鏁版嵁
+ type: "bar",
+ stack: "attendance",
+ data: data3,
+ itemStyle: {
+ color: '#0193FE', // 璇峰亣鐨勯鑹�
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ {
+ name: "璇姤鏁�", // 鍗曠嫭鐨勫姞鐝煴瀛�
+ type: "bar",
+ data: data4,
+ barWidth: 6,
+ itemStyle: {
+ color: '#FEED01', // 楂樹寒鐨勭传鑹�
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ ],
+ }
+ myChart.setOption(option)
window.addEventListener('resize', function () {//鎵ц
myChart.resize()
})
}
-const initEchart1 = () => {
- const myChart = echarts.init(document.getElementById('echart1'))
- const option = {
- series: [
- {
- type: 'pie',
- radius: ['86%', '100%'],
- label: {
- show: false,
- position: 'center'
- },
- padAngle: 5,
- itemStyle: {
- borderRadius: 10
- },
- color: colors,
- labelLine: {
- show: false
- },
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' }
- ]
- }
- ]
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () { // 鎵ц
- myChart.resize()
- })
-}
+const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
const myChart = echarts.init(document.getElementById('watergage'))
var data_value = 2
@@ -762,8 +835,7 @@
}
onMounted(() => {
- // initEnergy()
- // initEchart1()
+ initEchart2()
initWatergage()
initLiquidlevel()
})
@@ -848,13 +920,21 @@
margin-bottom: 20px;
.police_wrap {
+ padding: 15px 20px 0;
height: 225px;
-
border: 1px solid;
- .echart1 {
- width: 100%;
- height: 100%;
+ .item {
+ margin-bottom: 5px;
+
+ .head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 16px;
+ color: #FFFFFF;
+ margin-bottom: 8px;
+ }
}
}
}
@@ -921,12 +1001,14 @@
#dd4c26 50%,
#e43724 100%);
}
+
.num3 {
background-image: -webkit-linear-gradient(top,
#fff 0%,
#e9bf43 50%,
#eb8131 100%);
}
+
.num4 {
background-image: -webkit-linear-gradient(top,
#fff 0%,
@@ -1056,6 +1138,7 @@
text-align: center;
position: relative;
left: 30px;
+
.watergage {
width: 130px;
height: 112px;
diff --git a/screen/src/views/TaskEfficiency.vue b/screen/src/views/TaskEfficiency.vue
index 4bd5515..224a5a5 100644
--- a/screen/src/views/TaskEfficiency.vue
+++ b/screen/src/views/TaskEfficiency.vue
@@ -177,6 +177,21 @@
<div class="num">1</div>
</div>
</div>
+ <div class="echart_wrap">
+ <div class="echart3" id="echart3"></div>
+ </div>
+ <div class="list">
+ <div class="line" v-for=" i in 7">
+ <div class="time_wrap">
+ <div class="time">12.40</div>
+ <div class="sp"></div>
+ <div class="dian"></div>
+ </div>
+ <div class="id_card">鐨朅12313</div>
+ <div class="status">寮�濮嬩綔涓�</div>
+ <div class="desc">鎺掗槦绛夊緟鍙彿</div>
+ </div>
+ </div>
</div>
<div class="right_box_two">
<div class="com_header">
@@ -272,12 +287,291 @@
myChart.resize()
})
}
+const initEchart2 = () => {
+ const myChart = echarts.init(document.getElementById('echart2'))
+ const option = {
+ grid: {
+ top: '32%',
+ left: '0%',
+ right: '7%',
+ bottom: '0%',
+ containLabel: true,
+ },
+ legend: {
+ itemGap: 24,
+ data: ['鍒嗘椂浣滀笟閲�', '绱浣滀笟閲�'],
+ icon: 'circle',
+ itemWidth: 10,
+ itemHeight: 10,
+ top: '6%',
+ textStyle: {
+ color: '#fff',
+ borderColor: '#fff'
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ },
+ backgroundColor: "rgba(9, 24, 48, 0.5)",
+ borderColor: "rgba(75, 253, 238, 0.4)",
+ textStyle: {
+ color: "#FFF",
+ },
+ },
+ xAxis: [{
+ nameGap: 5,
+ type: 'category',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#999'
+ },
+ },
+ axisLabel: {
+ color: '#9eaaba',
+ },
+ axisTick: {
+ show: false,
+ },
+ data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023',],
+ }],
+ yAxis: [
+ {
+ nameTextStyle: {
+ color: '#9eaaba',
+ },
+ offset: 0,
+ name: '涓囨敮',
+ type: 'value',
+ axisLabel: {
+ show: true,
+ color: "#9eaaba",
+ },
+ axisLine: {
+ show: true,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ width: 1,
+ color: "rgba(49,105,129,0.4)",
+ type: 'dashed'
+ }
+ },
+ },
+ // {
+ // nameTextStyle: {
+ // color: '#9eaaba',
+ // },
+ // offset: 0,
+ // name: '涓囨敮',
+ // type: 'value',
+ // axisLabel: {
+ // show: true,
+ // color: "#9eaaba",
+ // },
+ // axisLine: {
+ // show: true,
+ // },
+ // splitLine: {
+ // show: true,
+ // lineStyle: {
+ // width: 1,
+ // color: "rgba(49,105,129,0.4)",
+ // type: 'dashed'
+ // }
+ // },
+ // }
+ ],
+ series: [
+ {
+ name: '鍒嗘椂浣滀笟閲�',
+ type: 'line',
+ smooth: true,
+ showAllSymbol: true,
+ symbol: 'circle',
+ symbolSize: 0,
+ lineStyle: {
+ color: '#2355f5',
+ borderColor: '#2355f5'
+ },
+ label: {
+ show: false,
+ position: 'top',
+ color: '#fff',
+ },
+ itemStyle: {
+ color: "#2355f5",
+ lineStyle: {
+ width: 0,
+ type: 'solid'
+ }
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#2355f5'
+ },
+ {
+ offset: 1,
+ color: 'rgba(14, 31, 65,0.1)'
+ }
+ ], false),
+ shadowColor: 'rgba(124,248,255, 0)',
+ shadowBlur: 20
+ },
+ data: [393, 438, 485, 631, 389, 224, 287]
+ },
+ {
+ name: '绱浣滀笟閲�',
+ type: 'bar',
+ barWidth: 6,
+ label: {
+ show: false,
+ position: 'top',
+ color: '#fff',
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#63d6fa'
+ },
+ {
+ offset: 1,
+ color: '#32718d'
+ }
+ ], false),
+ lineStyle: {
+ width: 1,
+ type: 'solid'
+ },
+ barBorderRadius: [30, 30, 0, 0],
+ },
+ data: [393, 438, 485, 631, 689, 524, 687]
+ },
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+}
+const initEchart3 = () => {
+ const myChart = echarts.init(document.getElementById('echart3'))
+ var colors = [
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#7fe3fc'
+ },
+ {
+ offset: 1,
+ color: '#9ce9fc'
+ }]),
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#64d7fa'
+ }, {
+ offset: 1,
+ color: '#7de3fc'
+ }]),
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#4679f6'
+ }, {
+ offset: 1,
+ color: '#4674f6'
+ }]),
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#4370f2'
+ }, {
+ offset: 1,
+ color: '#61d3f9'
+ }])]
+ const option = {
+ color: colors,
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ label: {
+ backgroundColor: "red"
+ },
+ lineStyle: {
+ color: "#9eb2cb"
+ }
+ }
+ },
+
+ legend: {
+ show: false,
+ top: "top",
+ left: "2%",
+ textStyle: {
+ color: "#000"
+ },
+ itemHeight: 2,
+ data: ['棰勭害鏁�', '宸茶繘鍦�', '宸蹭綔涓�', '宸茬鍦�']
+ },
+ series: [
+ {
+ type: 'funnel',
+ left: '15%',
+ right: '45%',
+ top: '10%',
+ bottom: '10%',
+ minSize: '20%',
+ maxSize: '80%',
+ gap: 4,
+ label: {
+ show: true,
+ position: 'outside',
+ formatter: '{a|{b}} {a|{c}%}',
+ rich: {
+ a: {
+ color: '#869CC9',
+ fontSize: 13
+ },
+ }
+ },
+ labelLine: {
+ length: 80,
+ lineStyle: {
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ itemStyle: { //鍘绘帀榛樿鐧借壊杈规绾�
+ borderWidth: 0,
+ borderColor: '#fff'
+ },
+ data: [
+ { value: 100, name: '棰勭害鏁�', },
+ { value: 50, name: '宸茶繘鍦�' },
+ { value: 20, name: '宸蹭綔涓�' },
+ { value: 30, name: '宸茬鍦�' },
+
+ ]
+ },
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+}
onMounted(() => {
// initEnergy()
initEchart1()
+ initEchart2()
+ initEchart3()
})
@@ -561,6 +855,70 @@
}
}
}
+
+ .echart_wrap {
+ width: 100%;
+
+ .echart3 {
+ width: 100%;
+ height: 160px;
+ }
+ }
+
+ .list {
+ margin: 0 20px 0;
+ width: 100%;
+ height: 222px;
+ .line {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ height: 33px;
+ color: #D2E0FF;
+ width: 100%;
+ .time_wrap {
+ display: flex;
+ align-items: center;
+ width: 52px;
+ color: #FFFFFF;
+ .time {
+ width: 40px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ background: #00A68E;
+ border-radius: 2px;
+ }
+
+ .sp {
+ width: 10px;
+ height: 1px;
+ background: #00A68E;
+ }
+
+ .dian {
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: #00A68E;
+ }
+ }
+
+ .id_card {
+ flex: 6;
+ margin-left: 12px;
+ }
+
+ .status {
+ flex: 5;
+ }
+
+ .desc {
+ flex: 9;
+ }
+ }
+ }
+
}
.right_box_two {
@@ -647,6 +1005,7 @@
margin-bottom: 4px;
display: flex;
align-items: center;
+
.xf {
width: 14px;
height: 14px;
--
Gitblit v1.9.3