From 22f9e400ea731da9ee6be6fa389adebfc3438f63 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期二, 04 七月 2023 15:32:24 +0800
Subject: [PATCH] 对接接口
---
src/pages/show/showIndex/YunweiBlock.vue | 172 +++++-
babel.config.js | 6
src/pages/show/showIndex/upload/uploadForm.vue | 126 +++++
src/main.js | 8
src/api/daping.js | 9
package.json | 6
src/pages/show/showIndex/IndexMoudleBlock.vue | 152 +++++-
src/pages/show/showIndex/showIndex.vue | 318 ++++---------
src/pages/show/showIndex/TimesLogs/TimesLogsTable.vue | 227 +++++++++
src/pages/show/showIndex/YunweiBlock/YunweiBlockForm.vue | 148 ++++++
src/pages/show/showIndex/TimesLogs.vue | 262 ++++++----
11 files changed, 1,046 insertions(+), 388 deletions(-)
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..c916a7d
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ presets: ['@vue/app'],
+ plugins: [
+ '@babel/plugin-proposal-optional-chaining', //鍙�夐摼 ?.
+ ]
+}
diff --git a/package.json b/package.json
index 987551e..2988a0a 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,18 @@
"build": "node build/build.js"
},
"dependencies": {
+ "@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@jiaminghi/data-view": "^2.10.0",
+ "animate.css": "^4.1.1",
"ant-design-vue": "^1.5.2",
"axios": "^0.18.1",
+ "core-js": "^3.19.0",
"echarts": "^4.7.0",
"element-ui": "^2.15.13",
"gsap": "^3.11.5",
"mapvgl": "^1.0.0-beta.179",
"mavon-editor": "^2.8.3",
+ "moment": "^2.29.4",
"node-sass": "^4.14.1",
"nprogress": "^0.2.0",
"sass-loader": "^7.3.1",
@@ -30,6 +34,8 @@
"vuex-i18n": "^1.13.1"
},
"devDependencies": {
+ "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+ "@vue/cli-plugin-babel": "^4.5.15",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
diff --git a/src/api/daping.js b/src/api/daping.js
index 54bd638..d1b966f 100644
--- a/src/api/daping.js
+++ b/src/api/daping.js
@@ -20,6 +20,11 @@
return getRequest('/tssw/api/getTaskInfoById', params);
}
+//杩愮淮鏃ュ織
+export const getTaskByDate = params => {
+ return getRequest('/tssw/api/getTaskByDate', params);
+}
+
//UPS
export const getUps = params => {
return getRequest('/tssw/api/getUps', params);
@@ -40,3 +45,7 @@
return postRequest('/tssw/api/upload', params);
}
+//鍦板浘
+export const getMapData = params => {
+ return getRequest('/tssw/api/getMapData', params);
+}
diff --git a/src/main.js b/src/main.js
index 91fa968..8ea8ed8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,14 @@
Vue.prototype.setStore = setStore;
Vue.prototype.removeStore = removeStore;
+import './libs/dialogDrag'
+
+import moment from 'moment'
+Vue.prototype.moment = moment
+
+import animated from 'animate.css'
+Vue.use(animated)
+
Vue.config.productionTip = false
diff --git a/src/pages/show/showIndex/IndexMoudleBlock.vue b/src/pages/show/showIndex/IndexMoudleBlock.vue
index a82a1fa..bb53824 100644
--- a/src/pages/show/showIndex/IndexMoudleBlock.vue
+++ b/src/pages/show/showIndex/IndexMoudleBlock.vue
@@ -73,7 +73,7 @@
</g>
</svg>
</div>
- <h1>鏈嶅姟鍣�</h1>
+ <h1>涓绘満</h1>
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
@@ -82,7 +82,7 @@
<countTo
ref="fuwuCountTo1"
:start-val="0"
- :end-val="3689"
+ :end-val="zhuji.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -94,7 +94,7 @@
<countTo
ref="fuwuCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="zhuji.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -179,24 +179,24 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>鐩戞帶涓绘満</h1>
+ <h1>鐩戞帶璁惧</h1>
<h2>
<countTo
ref="shutongCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="tongxun.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>姝ｅ父涓绘満</h1>
+ <h1>姝ｅ父璁惧</h1>
<h2>
<countTo
ref="shutongCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="tongxun.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -284,24 +284,24 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>鐩戞帶涓绘満</h1>
+ <h1>璁″垝鎬绘暟</h1>
<h2>
<countTo
ref="yunweiCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="yunwei.count"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>姝ｅ父涓绘満</h1>
+ <h1>宸插畬鎴愯鍒�</h1>
<h2>
<countTo
ref="yunweiCountTo2"
:start-val="0"
- :end-val="3650"
+ :end-val="yunwei.normalCount"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -386,12 +386,12 @@
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>ups/鐢垫睜缁�</h1>
+ <h1>ups</h1>
<h2>
<countTo
ref="donghuanCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="up.ups"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -399,27 +399,27 @@
<countTo
ref="donghuanCountTo2"
:start-val="0"
- :end-val="365"
+ :end-val="up.ups2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>娓╂箍搴﹁澶�/姘寸</h1>
+ <h1>鐢垫睜缁�</h1>
<h2>
<countTo
- ref="donghuanCountTo2"
+ ref="donghuanCountTo3"
:start-val="0"
- :end-val="3650"
+ :end-val="up.dianchi"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
<span>/</span>
<countTo
- ref="donghuanCountTo2"
+ ref="donghuanCountTo4"
:start-val="0"
- :end-val="365"
+ :end-val="up.dianchi2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -507,36 +507,44 @@
</g>
</svg>
</div>
- <h1>闂ㄧ</h1>
+ <h1>绌鸿皟</h1>
</div>
<div class="svgMain-bottom">
<div class="svgMain-bottom-block">
- <h1>姝ｅ父闂ㄧ/鐩戞帶闂ㄧ</h1>
+ <h1>ups绌鸿皟</h1>
<h2>
<countTo
ref="menjinCountTo1"
:start-val="0"
- :end-val="3650"
+ :end-val="kongtiao.upsKongtiao"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
<span>/</span>
<countTo
- ref="menjinCountTo1"
+ ref="menjinCountTo2"
:start-val="0"
- :end-val="360"
+ :end-val="kongtiao.upsKongtiao2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
</h2>
</div>
<div class="svgMain-bottom-block">
- <h1>绌鸿皟</h1>
+ <h1>涓績绌鸿皟</h1>
<h2>
<countTo
- ref="menjinCountTo2"
+ ref="menjinCountTo3"
:start-val="0"
- :end-val="3650"
+ :end-val="kongtiao.zhongxinKongtiao"
+ :duration="2500"
+ class="count-number"
+ :autoplay="false"></countTo>
+ <span>/</span>
+ <countTo
+ ref="menjinCountTo4"
+ :start-val="0"
+ :end-val="kongtiao.zhongxinKongtiao2"
:duration="2500"
class="count-number"
:autoplay="false"></countTo>
@@ -565,18 +573,100 @@
fuwuqiconfig2: {
number: [0],
},
+ zhuji: {
+ count: 0,
+ normalCount: 0
+ },
+ tongxun: {
+ count: 0,
+ normalCount: 0
+ },
+ yunwei: {
+ count: 0,
+ normalCount: 0
+ },
+ up: {
+ dianchi:0,
+ dianchi2:0,
+ ups:0,
+ ups2:0,
+ },
+ kongtiao: {
+ upsKongtiao:0,
+ upsKongtiao2:0,
+ zhongxinKongtiao:0,
+ zhongxinKongtiao2:0
+ },
+ timer:null
}
+ },
+ destroyed() {
+ clearInterval(this.timer)
},
mounted() {
this.loading()
+ this.getHost()
+ this.getSnmp()
+ this.getTask()
+ this.getUps()
+ this.getKongtiao()
+ this.timer = setInterval(() => {
+ this.getHost()
+ this.getSnmp()
+ this.getTask()
+ this.getUps()
+ this.getKongtiao()
+ },300000)
},
methods: {
- getHost(){
+ getHost(){ //涓绘満
getHost().then(res =>{
- res.data;
+ console.log(res,'res====')
+ if(res.code == 0) {
+ res.data.count && (this.zhuji.count = res.data.count)
+ res.data.normalCount && (this.zhuji.normalCount = res.data.normalCount)
+ }
})
},
+ getSnmp() { //鏁伴�氳澶�
+ getSnmp().then(res => {
+ if(res.code == 0) {
+ this.tongxun.count = res.data.count
+ this.tongxun.normalCount = res.data.normalCount
+ }
+ })
+ },
+ getTask() { //杩愮淮璁″垝
+ getTask().then(res => {
+ if(res.code == 0) {
+ this.yunwei.count = res.data.count
+ this.yunwei.normalCount = res.data.normalCount
+ }
+ })
+ },
+ getUps() {
+ getUps().then(res => {
+ if(res.code == 0) {
+ this.up.dianchi = res.data.dianchi
+ this.up.dianchi2 = res.data.dianchi2
+ console.log(this.up.dianchi,'this.up.dianchi1====')
+ console.log(this.up.dianchi2,'this.up.dianchi2====')
+ this.up.ups = res.data.ups
+ this.up.ups2 = res.data.ups2
+ }
+ })
+ },
+ getKongtiao() {
+ getKongtiao().then(res => {
+ if(res.code == 0) {
+ this.kongtiao.upsKongtiao = res.data.upsKongtiao
+ this.kongtiao.upsKongtiao2 = res.data.upsKongtiao2
+ this.kongtiao.zhongxinKongtiao = res.data.zhongxinKongtiao
+ this.kongtiao.zhongxinKongtiao2 = res.data.zhongxinKongtiao2
+ }
+ })
+ },
start() {
this.$refs.countTo.start();
},
@@ -621,8 +711,12 @@
this.$refs.donghuanCountTo1.start();
this.$refs.donghuanCountTo2.start();
this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo3.start();
+ this.$refs.donghuanCountTo4.start();
this.$refs.menjinCountTo1.start();
this.$refs.menjinCountTo2.start();
+ this.$refs.menjinCountTo3.start();
+ this.$refs.menjinCountTo4.start();
},1000)
})
diff --git a/src/pages/show/showIndex/TimesLogs.vue b/src/pages/show/showIndex/TimesLogs.vue
index a64e821..47e9cf8 100644
--- a/src/pages/show/showIndex/TimesLogs.vue
+++ b/src/pages/show/showIndex/TimesLogs.vue
@@ -19,22 +19,23 @@
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
- <path
- filter="url(#strong-inner)"
- opacity="1" fill="rgba(10, 10, 26, 0.9)"
- d="M334.724,778.500 L29.788,778.500 L6.000,755.703 L6.000,20.881 L24.574,1.500 L337.320,1.500 L354.000,17.485 L354.000,758.386 L334.724,778.500 Z"/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M196.000,1.500 L286.000,1.500 "/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M366.000,62.500 L366.000,174.500 "/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M8.000,212.500 L8.000,414.500 "/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
- <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
- d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>
+ <path
+ filter="url(#strong-inner)"
+ opacity="1" fill="rgba(10, 10, 26, 0.9)"
+ d="M334.724,778.500 L29.788,778.500 L6.000,755.703 L6.000,20.881 L24.574,1.500 L337.320,1.500 L354.000,17.485 L354.000,758.386 L334.724,778.500 Z"/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M196.000,1.500 L286.000,1.500 "/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M366.000,62.500 L366.000,174.500 "/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M8.000,212.500 L8.000,414.500 "/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
+ <path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>
+
</svg>
<div class="YunweiBlock-wrap-inside">
<div class="YunweiBlock-title">
@@ -50,38 +51,20 @@
</div>
<div class="YunweiBlock-main">
<div class="TimesLogs-tags">
- <!--<el-tabs v-model="activeName">
- <el-tab-pane label="閫氳璁惧" name="1">
- <div class="tag-block">
- <h1>閫氳璁惧</h1>
- </div>
+ <el-tabs v-model="activeName">
+ <el-tab-pane
+ v-for="item in timeLogsData"
+ :key="item.label"
+ :label="item.label">
+ <TimesLogsTable :logType="item.name" :label="item.label" v-if="activeName == item.name"></TimesLogsTable>
</el-tab-pane>
- <el-tab-pane label="鏈嶅姟鍣�" name="2">鏈嶅姟鍣�</el-tab-pane>
- <el-tab-pane label="闂ㄧ" name="3">闂ㄧ</el-tab-pane>
- <el-tab-pane label="閫氳璁惧" name="4">閫氳璁惧</el-tab-pane>
- <el-tab-pane label="鏈嶅姟鍣�" name="5">鏈嶅姟鍣�</el-tab-pane>
- <el-tab-pane label="闂ㄧ" name="5">闂ㄧ</el-tab-pane>
- </el-tabs>-->
+ </el-tabs>
- <div class="tag-block">
- <h1>鏈嶅姟鍣�</h1>
- </div>
- <div class="tag-block">
- <h1>闂ㄧ</h1>
- </div>
- <div class="tag-block">
- <h1>閫氳璁惧</h1>
- </div>
- <div class="tag-block">
- <h1>鏈嶅姟鍣�</h1>
- </div>
- <div class="tag-block">
- <h1>闂ㄧ</h1>
- </div>
+
</div>
- <div class="TimesLogs-table">
+ <!--<div class="TimesLogs-table">
<dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
- <!--<el-table
+ <!–<el-table
style="width: 100%"
:header-cell-class-name="headerCellName"
stripe
@@ -102,8 +85,8 @@
header-align="center"
min-width="40">
</el-table-column>
- </el-table>-->
- </div>
+ </el-table>–>
+ </div>-->
</div>
</div>
@@ -113,51 +96,50 @@
<script>
import {animateShanFlash} from '@/utils/animateShanFlash'
- import {getWarn} from '@/api/daping'
+ import TimesLogsTable from "./TimesLogs/TimesLogsTable";
+
export default {
name: "TimesLogs",
+ components: {
+ TimesLogsTable
+ },
data() {
return {
value1:'',
- ywTableConfig: {
- header: ['鏃堕棿','璁惧鍚嶇О','鍘熷洜'],
- headerBGC: 'rgba(255, 255, 255, 0)',
- oddRowBGC: 'rgba(0,213,255,0.08)',
- evenRowBGC: 'rgba(255, 255, 255, 0)',
- // indexHeader: '#',
- // index: 'true',
- align:'center',
- hoverPause: 'true',
- columnWidth: [100,140],
- data: [
- ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-04-03','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
- ],
- rowNum: 14
- },
- activeName:'1'
+ activeName:'0',
+ timeLogsData:[{
+ label: '鍏ㄩ儴',
+ name:'0'
+ },{
+ label: '涓绘満',
+ name:'1'
+ },{
+ label: '鏁伴�氳澶�',
+ name:'2'
+ },{
+ label: 'ups',
+ name:'3'
+ },{
+ label: '绌鸿皟',
+ name:'4'
+ },{
+ label: '娓╂箍搴�',
+ name:'5'
+ },{
+ label: '婕忔按',
+ name:'6'
+ },{
+ label: '鍏朵粬',
+ name:'7'
+ }],
+ type:null,
+ label:''
}
},
mounted() {
this.loading()
},
methods: {
- getWarn(){
- getWarn().then(res => {
- res.data;
- })
- },
loading() {
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
animateShanFlash('.zhuangshi span',{
@@ -180,25 +162,100 @@
</script>
<style lang="scss">
- .TimesLogs-table{
- width: 100%;
- height: calc(100% - 0.4792rem /* 92/192 */);
- .dv-scroll-board{
- width: 100% !important;
- height: 100%!important;
- }
- .header-item{
- width: 50%;
- display: flex;
- justify-content: center;
- }
- .dv-scroll-board .rows .ceil{
- font-size: 0.0677rem /* 13/192 */;
+
+.TimesLogs-wrap{
+ .is-active{
+ border: 1px solid rgba(255,80,80,0.8);
+ box-shadow: 0 0 0.078125rem /* 15/192 */ rgba(255,80,80,0.5) inset!important;
+ color: #fff;
+ &:before,
+ &:after{
+ content: none!important;
+ border: none!important;
+ box-shadow: none!important;
}
}
-.YunweiBlock-wrap-inside{
.el-tabs__active-bar,.el-tabs__nav-wrap::after{
height: 0!important;
+ }
+}
+.TimesLogs-tags{
+ .el-tabs__nav{
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .el-tabs__item{
+ width: 0.4948rem /* 95/192 */;
+ height: 0.1771rem /* 34/192 */;
+ box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
+ margin-top: 0.03125rem /* 6/192 */;
+ margin-bottom: 0.03125rem /* 6/192 */;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ color: #fff;
+ font-size: 0.078125rem /* 15/192 */;
+ &:nth-child(3n){
+ margin-right: 0.0521rem /* 10/192 */;
+ margin-left: 0.0521rem /* 10/192 */;
+ }
+ /*&:nth-child(n) {*/
+ /* margin-left: 0;*/
+ /*}*/
+
+ /*&:nth-child(3n) {*/
+ /* margin-right: 0;*/
+ /*}*/
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ box-sizing: border-box;
+ border: 1px solid #00d5ff;
+ transition: clip-path .5s ease-in-out;
+ }
+
+ &:before {
+ clip-path: inset(0 calc(100% - 10px) calc(100% - 10px) 0);
+ }
+
+ &:after {
+ clip-path: inset(calc(100% - 10px) 0 0 calc(100% - 10px));
+ }
+ &:hover{
+ &:before,
+ &:after{
+ clip-path: inset(0 0 0 0);
+ }
+ }
+ }
+ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2){
+ padding-left: 20px!important;
+ }
+ .el-tabs--bottom .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--top .el-tabs__item.is-top:last-child{
+ padding-right: 20px!important;
+ }
+ .el-tabs__content{
+ width: 100%;
+ height: calc(100% - 0.7292rem /* 140/192 */);
+ }
+ .el-tabs__header{
+ margin: 0 0 5px;
+ }
+ .el-tab-pane{
+ width: 100%;
+ height: 100%;
+ }
+ .el-tabs{
+ width: 100%;
+ height: 100%;
}
}
</style>
@@ -208,7 +265,7 @@
padding:0;
}
.TimesLogs-wrap{
- width: 1.8229rem /* 350/192 */;
+ width: 1.875rem /* 360/192 */;
height: 100%;
.yunweiSvg{
width: 100%;
@@ -255,17 +312,15 @@
.TimesLogs-tags {
width: 100%;
+ height: 100%;
display: flex;
flex-wrap: wrap;
.tag-block {
- width: 0.4948rem /* 95/192 */
- ;
- height: 0.1771rem /* 34/192 */
- ;
+ width: 0.4948rem /* 95/192 */;
+ height: 0.1771rem /* 34/192 */;
box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
- margin: 0.03125rem /* 6/192 */
- ;
+ margin: 0.03125rem /* 6/192 */;
cursor: pointer;
display: flex;
align-items: center;
@@ -274,8 +329,7 @@
h1 {
color: #fff;
- font-size: 0.078125rem /* 15/192 */
- ;
+ font-size: 0.078125rem /* 15/192 */;
}
&:nth-child(n) {
diff --git a/src/pages/show/showIndex/TimesLogs/TimesLogsTable.vue b/src/pages/show/showIndex/TimesLogs/TimesLogsTable.vue
new file mode 100644
index 0000000..e4bb456
--- /dev/null
+++ b/src/pages/show/showIndex/TimesLogs/TimesLogsTable.vue
@@ -0,0 +1,227 @@
+<template>
+ <div class="TimesLogs-table">
+ <!--<dv-scroll-board :config="ywTableConfig" style="width:500px;height:100%" />-->
+ <el-table
+ @row-click="handleRowClick"
+ style="width: 100%"
+ :data="tableData">
+ <el-table-column
+ prop="warnDate"
+ label="鏃堕棿"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ :formatter="formatData"
+ min-width="45">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="璁惧鍚嶇О"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ min-width="60">
+ </el-table-column>
+ <el-table-column
+ prop="content"
+ label="鍘熷洜"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ min-width="70">
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+ import animateCSS from "../../../../libs/animateCSS";
+ import {getWarn} from '@/api/daping'
+ export default {
+ name: "TimesLogsTable",
+ props: {
+ logType: {
+ type: String,
+ default: 1
+ },
+ label: {
+ type:String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ tableData:[],
+ timmer:null, //瀹氭椂鍣�
+ type:null
+ /*ywTableConfig: {
+ header: ['鏃堕棿','璁惧鍚嶇О','鍘熷洜'],
+ headerBGC: 'rgba(255, 255, 255, 0)',
+ oddRowBGC: 'rgba(0,213,255,0.08)',
+ evenRowBGC: 'rgba(255, 255, 255, 0)',
+ // indexHeader: '#',
+ // index: 'true',
+ align:'center',
+ hoverPause: 'true',
+ columnWidth: [100,140],
+ data: [
+ ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-04-06','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-04-03','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ['2023-03-02','3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '寮傚父閿欒'],
+ ],
+ rowNum: 14
+ },*/
+ }
+ },
+ watch: {
+ tableData: {
+ handler(newVal,oldVal) {
+ if(oldVal && oldVal.length > 0) {
+ if(newVal[0].warnDate != oldVal[0].warnDate) {
+ let dom = document.querySelector('.el-table__body tbody')
+ let list = dom.childNodes
+ for(let i=0;i<list.length;i++) {
+ if(list[i].nodeType == 1) {
+ if(i == 0) {
+ list[0].classList.add('animate__animated','animate__bounceIn')
+ // animateCSS(`.tiaodong${newVal[0].id}`, 'heartBeat')
+ // animateCSS(`.tiaodong${newVal[0].id}`, 'borderCircle')
+ /*let a = document.querySelector(`.tiaodong${newVal[0].compId}`)
+ a.classList.add('animate__animated','borderName')*/
+ setTimeout(() => {
+ list[0].classList.remove('animate__animated','animate__bounceIn')
+ },1000)
+ }else {
+ list[i].classList.add('animate__animated','animate__fadeInDown')
+ setTimeout(() => {
+ list[i].classList.remove('animate__animated','animate__fadeInDown')
+ },1000)
+ }
+ }
+ }
+ }
+ }
+ },
+ deep: true,
+ immediate: true
+ },
+ logType: {
+ handler(newVal,oldVal) {
+ console.log('new===',newVal)
+ console.log('old=---',oldVal)
+ this.type = newVal
+ },
+ immediate:true
+ }
+ },
+ mounted() {
+ console.log(this.type,'222222222222222----type---鍒濆鍖�')
+ this.getWarn() //榛樿涓绘満鐘舵�佷笅 1.涓绘満 2.鏁伴�氳澶� 3.ups 4.绌鸿皟 5.娓╂箍搴� 6銆佹紡姘� 7.鍏朵粬
+ this.timmer = setInterval(() => {
+ this.getWarn()
+ },180000)
+ },
+ methods: {
+ handleRowClick(row) { //鐐瑰嚮琛岃烦杞摼鎺�
+ console.log(row,'row====')
+ if(row.type) {
+ if(row.type == 3 || row.type == 4 || row.type == 5 || row.type == 6){
+ window.open('http://139.24.190.121:8080/login.html','_blank')
+ }
+ if(row.type == 1 || row.type == 2) {
+ window.open('http://139.24.190.120:9999/tssw','_blank')
+ }
+ }
+
+ },
+ formatData(val) {
+ if(val) {
+ return this.moment(val.warnDate).format('HH:mm:ss')
+ }
+ },
+ getWarn(){
+ if(this.label == '鍏ㄩ儴') this.type = null //鍏ㄩ儴涓嶄紶type鍙傛暟
+ console.log(this.type,'type----鎺ュ彛')
+ let param = null
+ if(this.type) {
+ param = Number(this.type)
+ }
+ getWarn({type:param}).then(res => {
+ if(res.code == 0) {
+ this.tableData = res.data
+ }
+
+ })
+ },
+ },
+ destroyed() {
+ clearInterval(this.timmer)
+ },
+ }
+</script>
+
+<style lang="scss">
+ .TimesLogs-table{
+ width: 100%;
+ height: 100%;
+ /*.dv-scroll-board{*/
+ /* width: 100% !important;*/
+ /* height: 100%!important;*/
+ /*}*/
+ /*.header-item{*/
+ /* width: 50%;*/
+ /* display: flex;*/
+ /* justify-content: center;*/
+ /*}*/
+ /*.dv-scroll-board .rows .ceil{*/
+ /* font-size: 0.0677rem !* 13/192 *!;*/
+ /*}*/
+ .el-table, .el-table__expanded-cell,.el-table tr,.el-table th.el-table__cell{
+ background: transparent;
+ }
+ .el-table thead,.el-table{
+ color: #fff;
+ }
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+ border:none;
+ }
+ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+ background:rgba(0,213,255,0.08);
+ }
+ .el-table__row{
+ &:nth-child(odd) {
+ background:rgba(0,213,255,0.08);
+ }
+ }
+ .el-table::before{
+ height: 0;
+ }
+ .el-table th.el-table__cell>.cell{
+ font-size: 0.0729rem /* 14/192 */;
+ }
+ .el-table td.el-table__cell div{
+ font-size: 0.0729rem /* 14/192 */;
+ }
+ .el-table .cell,.el-table th > .cell {
+ display: inline-block;
+ white-space: nowrap;
+ width: auto;
+ }
+ .el-table .el-table__cell{
+ padding: 0.026rem /* 5/192 */ 0;
+ }
+ }
+</style>
+<style scoped>
+
+</style>
diff --git a/src/pages/show/showIndex/YunweiBlock.vue b/src/pages/show/showIndex/YunweiBlock.vue
index 7439b4e..da0a883 100644
--- a/src/pages/show/showIndex/YunweiBlock.vue
+++ b/src/pages/show/showIndex/YunweiBlock.vue
@@ -51,13 +51,18 @@
<div class="YunweiBlock-main">
<div class="datePicker-box">
<el-date-picker
+ @change="changePicker"
v-model="value1"
- type="date"
- placeholder="閫夋嫨鏃ユ湡">
+ format="yyyy-MM-dd"
+ value-format="yyyy-MM-dd"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡">
</el-date-picker>
</div>
<div class="YunweiBlock-table">
- <dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
+ <dv-scroll-board :key="key" class="yunwei-scroll" @click="handleClickRow" :config="ywTableConfig" style="width:500px;height:220px" />
<!--<el-table
style="width: 100%"
:header-cell-class-name="headerCellName"
@@ -84,17 +89,25 @@
</div>
</div>
-
+ <YunweiBlockForm ref="YunweiBlockForm" v-if="YunweiBlockVisable"></YunweiBlockForm>
</div>
</template>
<script>
+ import {getTaskByDate} from '@/api/daping'
import {animateShanFlash} from '@/utils/animateShanFlash'
+ import YunweiBlockForm from "./YunweiBlock/YunweiBlockForm";
export default {
name: "YunweiBlock",
+ components: {
+ YunweiBlockForm
+ },
data() {
return {
+ key:1,
value1:'',
+ startDate:'',
+ endDate:'',
ywTableConfig: {
header: ['鍐呭','鏃ユ湡'],
headerBGC: 'rgba(255, 255, 255, 0)',
@@ -104,41 +117,41 @@
// index: 'true',
align:'center',
hoverPause: 'true',
- columnWidth: ['70%','30%'],
+ columnWidth: ['70%','30%','0'],
data: [
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
- ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
+ // ['3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�', '2023-03-06',],
],
rowNum: 14
},
@@ -151,13 +164,76 @@
},{
content1:'3鍙锋湇鍔″櫒寮傚父锛屾姤璀﹂敊璇�',
data:'2023-03-06'
- }]
+ }],
+ YunweiBlockVisable: false,
+ timer: null
}
+ },
+ destroyed() {
+ clearInterval(this.timer)
},
mounted() {
this.loading()
+ this.resizeLsit()
+ this.timer = setInterval(() => {
+ this.getTaskByDate()
+ },300000)
+ },
+ watch: {
+
},
methods: {
+ resizeLsit() {
+ this.key ++
+ let rows = document.querySelector('.yunwei-scroll')
+ let height = rows.clientHeight
+ this.ywTableConfig.rowNum = Math.floor(height/38)
+ this.getTaskByDate()
+ },
+ handleClickRow(config) { //纰橀厭琛屼俊鎭�
+ console.log(config.row[2],'config===')
+ console.log(document.querySelector('.configSpan').innerHTML,'document.querySelector(\'.configSpan\')')
+
+ this.YunweiBlockVisable = true
+ this.$nextTick(() => {
+ this.$refs.YunweiBlockForm.init(document.querySelector('.configSpan').innerHTML)
+ })
+
+ },
+ changePicker(val) { //鏃ユ湡change
+ if(val) {
+ this.startDate = val[0]
+ this.endDate = val[1]
+ }else {
+ this.startDate = ''
+ this.endDate = ''
+ }
+ this.getTaskByDate()
+ },
+ getTaskByDate() { //杩愮淮鏃ュ織
+ getTaskByDate({startDate:this.startDate,endDate:this.endDate}).then(res => {
+ if(res.code == 0) {
+ this.ywTableConfig = {
+ header : ['鍐呭','鏃ユ湡'],
+ headerBGC: 'rgba(255, 255, 255, 0)',
+ oddRowBGC: 'rgba(0,213,255,0.08)',
+ evenRowBGC: 'rgba(255, 255, 255, 0)',
+ // indexHeader: '#',
+ // index: 'true',
+ rowNum:this.ywTableConfig.rowNum,
+ align:'center',
+ hoverPause: 'true',
+ columnWidth: [180,120,0],
+ data:[]
+ }
+ let data = res.data.map(item => {
+ let tempStr = `<span class="configSpan" style="display:none">${item.id}</span>`
+ return [`${item.title}`,`${item.startDate}`,tempStr]
+ })
+ this.$set(this.ywTableConfig,'data',data)
+ }
+ })
+ },
loading() {
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
animateShanFlash('.zhuangshi span',{
@@ -184,6 +260,24 @@
width: 100%;
margin: 0.078125rem /* 15/192 */ 0 0.0521rem /* 10/192 */ 0;
height: 0.1771rem /* 34/192 */;
+ .el-range-input{
+ background: transparent;
+ border: 1px solid #2f5a8b;
+ width: 0.625rem /* 120/192 */;
+ }
+ .el-date-editor .el-range-input{
+ color: #fff;
+ }
+ .el-icon-circle-close:before{
+ content: "\E78D";
+ color: #1ee3f3 ;
+ font-size: 0.1042rem /* 20/192 */;
+ }
+ .el-range-separator{
+ color: #fff;
+ padding: 0;
+ font-size: 0.0521rem /* 10/192 */;
+ }
.el-input{
background-color: transparent;
border: 1px solid #1681af;
diff --git a/src/pages/show/showIndex/YunweiBlock/YunweiBlockForm.vue b/src/pages/show/showIndex/YunweiBlock/YunweiBlockForm.vue
new file mode 100644
index 0000000..a2e3df6
--- /dev/null
+++ b/src/pages/show/showIndex/YunweiBlock/YunweiBlockForm.vue
@@ -0,0 +1,148 @@
+<template>
+ <div class="YunweiBlockForm-wrap">
+ <el-dialog
+ custom-class="YunweiBlockForm-dialog"
+ title="杩愮淮璇︽儏"
+ :visible.sync="dialogVisible"
+ width="600px"
+ :close-on-click-modal="false"
+ append-to-body
+ v-dialogDrag>
+ <el-table
+ style="width: 100%"
+ :data="tableData">
+ <el-table-column
+ prop="taskDate"
+ label="鏃ユ湡"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ min-width="50">
+ </el-table-column>
+ <el-table-column
+ prop="content"
+ label="鍐呭"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ min-width="70">
+ </el-table-column>
+ <el-table-column
+ :formatter="isOkformat"
+ prop="isOk"
+ label="鏄惁瀹屾垚"
+ show-overflow-tooltip
+ align="left"
+ header-align="left"
+ min-width="30">
+ </el-table-column>
+ </el-table>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+ import {getTaskInfoById} from '@/api/daping'
+ export default {
+ name: "YunweiBlockForm",
+ data() {
+ return {
+ dialogVisible: false,
+ tableData:[],
+ }
+ },
+ methods: {
+ init(id) {
+ this.dialogVisible = true
+ this.getTaskInfoById(id)
+ },
+ getTaskInfoById(id) {
+ getTaskInfoById({id:id}).then(res => {
+ if(res.code == 0) {
+ this.tableData = res.data
+ }
+ })
+ },
+ isOkformat(row) {
+ if(row.isOk == 0 || row.isOk == null) {
+ return '鏈畬鎴�'
+ }else if(row.isOk == 1){
+ return '鏈畬鎴�'
+ }
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ .YunweiBlockForm-dialog{
+ height: 2.9271rem /* 562/192 */!important;
+ width: 4.1771rem /* 802/192 */!important;;
+ background: url("../../../../assets/img/kehuxinxi-detail-bj.png") no-repeat center!important;
+ background-size: 100% 100% !important;
+ }
+ .YunweiBlockForm-dialog{
+ .el-dialog__title{
+ color: #fff;
+ }
+ .el-dialog__header{
+ display: flex;
+ justify-content: center;
+ padding:20px 25px;
+ }
+ .el-dialog__body{
+ padding: 30px 25px;
+ height: calc(100% - 0.3125rem /* 60/192 */);
+ }
+
+ .el-icon-close:before{
+ content: url('../../../../assets/img/closeBtnIcon.png');
+ width: 0.125rem /* 24/192 */;
+ height: 0.125rem /* 24/192 */;
+ }
+
+ .el-table{
+ height: 100%;
+ overflow-y: auto;
+ }
+ .el-table, .el-table__expanded-cell,.el-table tr,.el-table th.el-table__cell{
+ background: transparent;
+ }
+ .el-table thead,.el-table{
+ color: #fff;
+ }
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+ border:none;
+ }
+ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+ background:rgba(0,213,255,0.08);
+ }
+ .el-table__row{
+ &:nth-child(odd) {
+ background:rgba(0,213,255,0.08);
+ }
+ }
+ .el-table::before{
+ height: 0;
+ }
+ .el-table th.el-table__cell>.cell{
+ font-size: 0.0729rem /* 14/192 */;
+ }
+ .el-table td.el-table__cell div{
+ font-size: 0.0729rem /* 14/192 */;
+ }
+ .el-table .cell,.el-table th > .cell {
+ display: inline-block;
+ white-space: nowrap;
+ width: auto;
+ }
+ .el-table .el-table__cell{
+ padding: 0.026rem /* 5/192 */ 0;
+ }
+ }
+</style>
+<style lang="scss" scoped>
+.YunweiBlockForm-wrap{
+
+}
+</style>
diff --git a/src/pages/show/showIndex/showIndex.vue b/src/pages/show/showIndex/showIndex.vue
index 3876f73..02ec8b2 100644
--- a/src/pages/show/showIndex/showIndex.vue
+++ b/src/pages/show/showIndex/showIndex.vue
@@ -9,6 +9,19 @@
</baidu-map>
<!--<div class="map_container" id="map_container"></div>-->
</div>
+ <div class="upload-box">
+ <el-dropdown @command="uploadClick">
+ <el-button class="uploadBtn" plain size="small">
+ 涓婁紶鏂囦欢<i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="1">
+ 鎶ヨ
+ </el-dropdown-item>
+ <el-dropdown-item command="0">鐘舵�佸��</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
<div class="showIndex-wrap-inside">
<div class="indexMoudleBlock-box">
<IndexMoudleBlock></IndexMoudleBlock>
@@ -20,7 +33,7 @@
<TimesLogs></TimesLogs>
</div>
</div>
-
+ <uploadForm ref="uploadForm" v-if="uploadVisiable"></uploadForm>
</div>
</template>
@@ -28,12 +41,15 @@
import IndexMoudleBlock from "./IndexMoudleBlock";
import TimesLogs from "./TimesLogs";
import YunweiBlock from "./YunweiBlock";
+ import uploadForm from "./upload/uploadForm";
+ import {getMapData} from '@/api/daping'
export default {
name: "showIndex",
components: {
IndexMoudleBlock,
YunweiBlock,
- TimesLogs
+ TimesLogs,
+ uploadForm
},
data() {
return{
@@ -42,180 +58,36 @@
mapObj:{},
mapData:[],
mapData2:[],
+ uploadVisiable:false, //涓婁紶鏂囦欢寮规
+ timer:null
}
+ },
+ destroyed() {
+ clearInterval(this.timer)
},
mounted() {
//this.getMapData()
//this.initMap()
+ this.timer = setInterval(() => {
+ this.getMapData()
+ },300000)
},
methods: {
- // initMap() {
- // let map = new BMapGL.Map('map_container')
- // map.centerAndZoom(new BMapGL.Point(118.183450598,39.6505309225),12)
- // let goodsData = require('../../../assets/js/custom_map_config2')
- // map.setMapStyleV2({
- // styleJson: goodsData
- // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
- // // style: 'bluish'
- // })
- // map.setTilt(0)
- // map.setHeading(0)
- // map.enableScrollWheelZoom(true) //寮�鍚缉鏀惧姛鑳�
- //
- // // //鍥惧眰绠＄悊鍣紙Api鏂囨。--鍥惧眰绠＄悊鍣級
- // // var view = new mapvgl.View({
- // // map: map, //鎶婄敓鎴愮殑鍦板浘map浼犺繘鏉�
- // // });
- // // //椋炵嚎鍥惧眰鐨勫垱寤烘柟寮忥紙Api鏂囨。--椋炵嚎鍥惧眰锛�
- // // var layer = new mapvgl.LineRainbowLayer({
- // // // blend: 'lighter',
- // // // width: 12,
- // // //color: 'rgba(0, 96, 222, 1)',
- // // // lineJoin:'bevel'
- // // //style: 'road', // road, arrow, normal
- // // width: 10,
- // // //animation: true
- // //
- // // });
- // // var layer2 = new mapvgl.LineFlowLayer({
- // // // color: 'rgba(0, 255, 252, 1)',
- // // // width: 14,
- // // // animation: true,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 2, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1, // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // // //step:0.1,
- // // // startTime: 0,
- // // // endTime: 100,
- // // // color: 'rgba(255, 71, 26, 0.9)',
- // // // step: 0.1, // 鍔ㄧ敾鐨勯�熷害
- // // // width: 10,
- // // // animation: true,
- // // // startTime:0,
- // // // endTime:4,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 0.2, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1 // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // color: 'rgba(0, 255, 252, 1)',
- // // width: 6,
- // // animation: true,
- // // duration: 1.5, // 寰幆鏃堕棿2s
- // // trailLength: 1, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // interval: 0.05, // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // step:0.02,
- // // startTime: 0,
- // // endTime: 100,
- // // });
- // // // let layer = new mapvgl.LineTripLayer({
- // // // color: 'rgba(255, 71, 26, 0.9)',
- // // // width: 16,
- // // // animation: true,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 20, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1 // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // // });
- // // view.addLayer(layer) //鎶婂浘灞傛坊鍔犲埌鍥惧眰绠＄悊鍣ㄩ噸
- // // view.addLayer(layer2) //鎶婂浘灞傛坊鍔犲埌鍥惧眰绠＄悊鍣ㄩ噸
- // // layer.setData(this.mapData2) //鍥惧眰鏁版嵁
- // // layer2.setData(this.mapData2) //鍥惧眰鏁版嵁
- // },
-
- // getMapData() {
- // this.mapData = []
- // this.mapData2 = []
- // let re2 = [
- // [
- // {
- // lng: 118.144674,
- // lat: 39.660641
- // },
- // {
- // lng: 118.229198,
- // lat: 39.763508
- // },
- // ],
- // [
- // {
- // lng: 118.180618,
- // lat: 39.753635
- // },
- // {
- // lng: 118.229198,
- // lat: 39.753635
- // },
- // ],
- // [
- // {
- // lng: 118.232887,
- // lat: 39.619857
- // },
- // {
- // lng: 118.208669,
- // lat: 39.596232
- // }
- // ],
- // [
- // {
- // lng: 118.240577,
- // lat: 39.661919
- // },
- // {
- // lng: 118.187038,
- // lat: 39.635918
- // }
- // ],
- // [
- // {
- // lng: 118.185321,
- // lat: 39.678277
- // },
- // {
- // lng: 118.217221,
- // lat: 39.677581
- // }
- // ],
- // [
- // {
- // lng: 118.184038,
- // lat: 39.631268
- // },
- // {
- // lng: 118.184042,
- // lat: 39.624384
- // }
- // ]
- // ]
- // let re = [
- // [118.184038,39.631268],
- // [118.184042,39.624384],
- //
- //
- // ]
- // let curve = new mapvgl.BezierCurve()
- // for(let i=0; i<re2.length; i++) {
- // //re[i].lng
- // curve.setOptions({
- // start:[re2[i][0].lng,re2[i][0].lat],
- // end:[re2[i][1].lng,re2[i][1].lat]
- // })
- // let cureData = curve.getPoints()
- // console.log(re2[i],'re[i]=====')
- // this.mapData2.push({
- // geometry: { //鎼哄甫鍦扮悊淇℃伅
- // type: 'LineString',
- // coordinates:cureData, //鎶婅礉濉炲皵鏇茬嚎鐨勬暟鎹斁杩涙潵
- // }
- // })
- // }
- // console.log(this.mapData2,'mapData2===')
- // this.mapData.push({
- // geometry: { //鎼哄甫鍦扮悊淇℃伅
- // type: 'LineString',
- // coordinates:re, //鎶婅礉濉炲皵鏇茬嚎鐨勬暟鎹斁杩涙潵
- // },
- // })
- // console.log(this.mapData,'mapData===')
- // }
+ uploadClick(type) {
+ console.log(type,'type===')
+ this.uploadVisiable = true
+ this.$nextTick(() => {
+ this.$refs.uploadForm.init(type)
+ })
+ },
+ getMapData() {
+ getMapData().then(res => {
+ if(res.code == 0) {
+ this.mapData = res.data
+ this.addMarker()
+ }
+ })
+ },
handler({BMap, map}) {
this.mapObj = {BMap, map}
let goodsData = require('../../../assets/js/custom_map_config2')
@@ -228,62 +100,49 @@
// style: 'bluish'
})
map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
- this.addMarker()
+ this.getMapData()
},
addMarker() {
- this.mapData = [
- {
- latitude: '118.20,39.63',
- },
- {
- latitude: '118.117511,39.625670',
- },
- {
- latitude: '118.114897,39.684427',
- },
- {
- latitude: '118.119517,39.655598',
- },
- {
- latitude: '118.116267,39.694433',
- },
- {
- latitude: '118.311267,39.694433',
- },
- {
- latitude: '118.211267,39.694433',
- },
- {
- latitude: '118.011267,39.674433',
- },
- {
- latitude: '118.011227,39.604433',
- }
- ]
let BMap = this.mapObj.BMap
let map = this.mapObj.map
this.mapData.forEach(item => { //lng 缁忓害 lat 缁忓害
- if(item.latitude != null && item.latitude != '') {
- let longitude = item.latitude.split(',')[0]
- let latitude = item.latitude.split(',')[1]
- let myIcon = new BMap.Icon(
- require("../../../assets/img/markerIcon.png"),
- new BMap.Size(35, 35),
- { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ console.log(this.mapData,'this.mapData===')
+ if(item.lat && item.lat) {
+ let longitude = item.lon
+ console.log(item.lon,'缁忕含----')
+ console.log(item.lat,'缁忕含----')
+ let latitude = item.lat
+ let myIcon = ''
+ if(item.health == 0) {
+ myIcon = new BMap.Icon(
+ require("../../../assets/img/markerIcon3.png"),
+ new BMap.Size(35, 35),
+ { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ }else {
+ myIcon = new BMap.Icon(
+ require("../../../assets/img/markerIcon2.png"),
+ new BMap.Size(35, 35),
+ { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ }
+
let point = new BMap.Point(longitude,latitude)
let marker = new BMap.Marker(point,{icon:myIcon})
map.addOverlay(marker)
- map.setZoom(12)
+ map.setZoom(13)
// 娣诲姞榧犳爣鍒掑叆鍧愭爣鐐圭殑鏄剧ず鍐呭
+ let isH = ''
+ if(item.health == 0) {
+ isH = '姝ｅ父'
+ }else {
+ isH = '寮傚父'
+ }
let str = '<div style="padding:4px 10px;width:300px;max-width: 400px;display: flex;flex-direction: row;">'
str += '<div>'
- str += '<h1 style="font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
str += '<div style="display: flex;flex-direction: column">'
- str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">妗堜欢鎻忚堪锛�'+item.casePoint+'</h1></div>'
+ str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">閫氳鐘舵�侊細'+isH+'</h1></div>'
str += '<div><h1 style="font-size: 12px;padding:2px 0"">鍦板潃锛�'+item.address+'</h1></div>'
- str += '<div><h1 style="font-size: 12px;padding:2px 0">鏃堕棿锛�'+item.time+'</h1></div>'
str += '</div>'
str += '</div>'
let opts = {
@@ -305,20 +164,21 @@
// 鍦ㄥ叏鏅満鏅唴娣诲姞瑕嗙洊鐗�
map.addOverlay(label);
marker.addEventListener('mouseover', function () {
+ console.log(marker,'marker==')
//榧犳爣绉诲叆鍔ㄧ敾
let divElement = document.createElement('div')
divElement.className = 'before'
let divElement2 = document.createElement('div')
divElement2.className = 'after'
- marker.gd.innerHtml = marker.gd.childNodes[0]
- marker.gd.appendChild(divElement)
- marker.gd.appendChild(divElement2)
- marker.gd.className = ''
- marker.gd.className = 'mapBGFault'
+ marker.hd.innerHtml = marker.hd.childNodes[0]
+ marker.hd.appendChild(divElement)
+ marker.hd.appendChild(divElement2)
+ marker.hd.className = ''
+ marker.hd.className = 'mapBGFault'
label.show()
})
marker.addEventListener('mouseout', function () {
- marker.gd.className = ''
+ marker.hd.className = ''
label.hide()
})
@@ -329,6 +189,22 @@
}
</script>
+<style lang="scss">
+ .upload-box{
+ .uploadBtn{
+ background: linear-gradient(to right,#0e0e25,#092749);
+ }
+ .el-button.is-plain:focus, .el-button.is-plain:hover{
+ background: transparent;
+ }
+ .el-button{
+ border:1px solid #1ee3f3!important;
+ span{
+ color: #fff;
+ }
+ }
+ }
+</style>
<style lang="scss" scoped>
.showIndex-wrap{
@@ -336,6 +212,16 @@
height: calc(100% - 0.4167rem /* 80/192 */);
margin-top: 0.1042rem /* 20/192 */;
position: relative;
+ .upload-box{
+ position: absolute;
+ right: 0.1042rem /* 20/192 */;
+ top: -0.09375rem /* -18/192 */;
+ z-index: 999999999;
+ }
+ .showIndex-wrap-inside{
+ width: 100%;
+ height: 100%;
+ }
.indexMoudleBlock-box{
position: absolute;
left: 0.1823rem /* 35/192 */;
diff --git a/src/pages/show/showIndex/upload/uploadForm.vue b/src/pages/show/showIndex/upload/uploadForm.vue
new file mode 100644
index 0000000..fd809c4
--- /dev/null
+++ b/src/pages/show/showIndex/upload/uploadForm.vue
@@ -0,0 +1,126 @@
+<template>
+ <div class="upload-wrap">
+ <el-dialog
+ title="涓婁紶鏂囦欢"
+ :visible.sync="dialogVisible"
+ width="600px"
+ :close-on-click-modal="false"
+ v-dialogDrag>
+ <div class="upload-file">
+ <el-upload
+ action="/tssw/api/upload"
+ class="upload-demo upload-file-box"
+ ref="upload"
+ :before-upload="beforeFileUpload"
+ :on-success="handleUploadSuccess"
+ :data="{type:type}"
+ :on-change="changeFile"
+ :file-list="fileList"
+ :auto-upload="false">
+ <el-button slot="trigger" size="small" type="primary">閫夊彇鏂囦欢</el-button>
+ <div slot="tip" class="el-upload__tip">鍙兘涓婁紶 xlsx/xls 鏍煎紡鐨勬枃浠讹紝涓斾笉瓒呰繃2M</div>
+ </el-upload>
+ </div>
+ <div class="sumbMit-Btn">
+ <el-button size="small" type="primary" plain @click="submitBtn">纭畾</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+ import {upload} from '@/api/daping'
+ export default {
+ name: "uploadForm",
+ data() {
+ return {
+ dialogVisible: false,
+ fileList:[{
+ name:'xxx',
+ url: ''
+ }],
+ type:''
+ }
+ },
+ methods: {
+ init(type) {
+ this.dialogVisible = true
+ this.$nextTick(() => {
+ this.$refs.upload.clearFiles()
+ this.type = type
+ })
+
+ },
+ submitBtn() {
+ if(this.fileList.length>0) {
+ this.$refs.upload.submit()
+ }else {
+ this.$message({
+ type: 'info',
+ message: '璇峰厛涓婁紶闄勪欢锛�'
+ })
+ }
+ },
+ changeFile(file) {
+ let acceptList = ['xlsx']
+ let fileType = file.name.split('.').pop().toLowerCase()
+ if(acceptList.indexOf(fileType) === -1) {
+ this.$message.error('鍙兘涓婁紶 xlsx/xls 鏍煎紡鐨勬枃浠�')
+ return false
+ }
+ if(file.size/1024/1024 > 2) {
+ this.$message.error('涓婁紶鏂囦欢涓嶈兘瓒呰繃2M锛�')
+ return false
+ }
+ },
+ handleUploadSuccess(response, file, fileList) {
+ if(response.code == 0) {
+ this.$message.success(response.msg)
+ this.dialogVisible = false
+ }else {
+ this.$message.error(response.msg)
+ this.dialogVisible = false
+ }
+ },
+ beforeFileUpload(file) {
+ if(file.size/1024/1024 > 2) {
+ this.$message.error('涓婁紶鏂囦欢涓嶈兘瓒呰繃2M锛�')
+ return false
+ }
+ let acceptList = ['xlsx','xls']
+ let fileType = file.name.split('.').pop().toLowerCase()
+ if(acceptList.indexOf(fileType) === -1) {
+ this.$message.error('鍙兘涓婁紶 xlsx 鏍煎紡鐨勬枃浠�')
+ return Promise.reject(false)
+ }
+
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+.upload-wrap{
+ .el-upload--text{
+ border: none!important;
+ width: auto;
+ height: auto;
+ }
+}
+
+</style>
+
+<style lang="scss" scoped>
+ .upload-file{
+ min-height:0.98rem /* 60/192 */;
+ }
+ .upload-file-box{
+ width: 80%;
+ margin: 0 auto;
+ }
+ .sumbMit-Btn{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+</style>
--
Gitblit v1.9.1