387 lines
9.3 KiB
Vue
387 lines
9.3 KiB
Vue
<template>
|
||
<view class="app">
|
||
<head-info :navIndex="0"></head-info>
|
||
<view class="container">
|
||
<view class="content">
|
||
<view class="form">
|
||
<view class="end">
|
||
<superwei-combox class="input" :candidates="portList" :isJSON="true" keyName="pamName"
|
||
placeholder="港区" v-model="portName" @input="portInput"
|
||
@select="portSelect"></superwei-combox>
|
||
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyName"
|
||
placeholder="船名/航次" v-model="shipName" @input="shipInput"
|
||
@select="shipSelect"></superwei-combox>
|
||
</uni-easyinput>
|
||
<button class="btn" @click="onSearch">搜索</button>
|
||
<button class="btn" @click="open">打开</button>
|
||
<button class="btn" @click="isOpenDatabase">判断</button>
|
||
<button class="btn" @click="createTable">创建表</button>
|
||
<button class="btn" @click="dropTable">删除表</button>
|
||
<button class="btn" @click="insertChatRowTwo">增</button>
|
||
<button class="btn" @click="executeSql1">查</button>
|
||
</view>
|
||
</view>
|
||
<view class="itemList">
|
||
<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toDetails(item.spmId)">
|
||
<view class="title">
|
||
<view class="name">
|
||
海王星领袖
|
||
</view>
|
||
<view class="status">
|
||
<text v-if="item.vvyStatus==2" class="green">● 作业中</text>
|
||
<text v-else>● 已完成</text>
|
||
</view>
|
||
</view>
|
||
<view class="table">
|
||
<view class="row">
|
||
<view class="nitem">
|
||
航次: <text>735546</text>
|
||
</view>
|
||
<view class="nitem">
|
||
贸易类型: <text>{{item.tradeType}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="nitem">
|
||
进出口: <text>{{item.importExportFlag}}</text>
|
||
</view>
|
||
<view class="nitem">
|
||
泊位: <text>{{item.actualBerthage}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
import sqlite from "../../common/sqlite.js"
|
||
import rSqlite from "../../common/rSqlite.js"
|
||
import {
|
||
mapActions
|
||
} from 'vuex'
|
||
let timers = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
ltemList: [],
|
||
portName: '',
|
||
portItem: {},
|
||
portList: [],
|
||
shipName: '',
|
||
shipItem: {},
|
||
shipList: []
|
||
}
|
||
},
|
||
onLoad() {},
|
||
components: {
|
||
HeadInfo
|
||
},
|
||
methods: {
|
||
...mapActions([
|
||
'majax',
|
||
'najax'
|
||
]),
|
||
open() {
|
||
plus.sqlite.openDatabase({
|
||
name: 'dianji_chat',
|
||
path: '_doc/dianji_chat.db',
|
||
success: function(e) {
|
||
console.log('打开数据库成功')
|
||
},
|
||
fail: function(e) {
|
||
console.log(e, '打开数据库失败')
|
||
}
|
||
});
|
||
},
|
||
isOpenDatabase() {
|
||
let res = plus.sqlite.isOpenDatabase({
|
||
name: 'dianji_chat',
|
||
path: '_doc/dianji_chat.db',
|
||
});
|
||
if (res) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '数据库已打开'
|
||
});
|
||
return;
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '数据库未打开'
|
||
});
|
||
return;
|
||
}
|
||
},
|
||
createTable() {
|
||
console.log('创建表');
|
||
let sql =
|
||
'CREATE TABLE if not exists cesTable ( "id" varchar(32) NOT NULL,"content" varchar(1024),"fromId" varchar(32), "toId" varchar(32), "flag" varchar(2), PRIMARY KEY ("id"));'
|
||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||
// 在resolve时执行的回调函数
|
||
console.log(value); // 输出：Hello, World!
|
||
}).catch((error) => {
|
||
// 在reject时执行的回调函数
|
||
console.error(error);
|
||
});
|
||
},
|
||
dropTable() {
|
||
console.log('删除表');
|
||
let sql = 'DROP TABLE cesTable;'
|
||
plus.sqlite.executeSql({
|
||
name: 'dianji_chat',
|
||
sql: sql,
|
||
success: function(e) {
|
||
console.log("删除数据表成功");
|
||
},
|
||
fail: function(e) {
|
||
console.log('executeSql failed: ' + JSON.stringify(e));
|
||
}
|
||
})
|
||
},
|
||
// insertChatRow() {
|
||
// let data = {
|
||
// id: 1,
|
||
// fromId: '123',
|
||
// toId: '321',
|
||
// content: 'bihao1',
|
||
// flag: 1
|
||
// }
|
||
// data.id = Math.floor(Math.random() * 100);
|
||
// let dbTable = 'cesTable'
|
||
// // let sql = "insert into " + this.dbTable + " values('" + data.id + "','" + data.content +
|
||
// // "','" + data.fromId + "','" + data.toId + "'," + data.flag + ")";
|
||
// let sql = "insert into " + dbTable + " values('" + data.id + "','" +
|
||
// data.content + "','" + data.fromId + "','" + data.toId + "','" + data.flag + "')";
|
||
// this.executeSql(sql)
|
||
// },
|
||
insertChatRowTwo() {
|
||
let data = {
|
||
id: 1,
|
||
fromId: '123',
|
||
toId: '321',
|
||
content: 'bihao1',
|
||
flag: 1
|
||
} // => "'1','123','312'"
|
||
data.id = Math.floor(Math.random() * 100);
|
||
let dbTable = 'cesTable'
|
||
let Arr = []
|
||
for (let key in data) {
|
||
Arr.push(`'${data[key]}'`);
|
||
}
|
||
let Str = Arr.join(',')
|
||
|
||
rSqlite.insertTableData(dbTable, Str).then((value) => {
|
||
// 在resolve时执行的回调函数
|
||
console.log(value); // 输出：Hello, World!
|
||
this.executeSql(value)
|
||
}).catch((error) => {
|
||
// 在reject时执行的回调函数
|
||
console.error(error);
|
||
});
|
||
},
|
||
// 查
|
||
executeSql(sql) {
|
||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||
// 在resolve时执行的回调函数
|
||
// this.sqlData = value
|
||
console.log(value); // 输出：Hello, World!
|
||
}).catch((error) => {
|
||
// 在reject时执行的回调函数
|
||
console.error(error);
|
||
});
|
||
},
|
||
executeSql1() {
|
||
let sql = 'select * from cesTable'
|
||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||
// 在resolve时执行的回调函数
|
||
// this.sqlData = value
|
||
console.log(value); // 输出：Hello, World!
|
||
}).catch((error) => {
|
||
// 在reject时执行的回调函数
|
||
console.error(error);
|
||
});
|
||
},
|
||
portInput(e) {
|
||
clearTimeout(timers)
|
||
timers = setTimeout(() => {
|
||
this.getPort(e)
|
||
}, 500)
|
||
},
|
||
portSelect(e) {
|
||
this.portItem = e
|
||
this.shipName = ''
|
||
this.shipItem = {}
|
||
},
|
||
// 获取港口
|
||
getPort(keyWords) {
|
||
let data = {}
|
||
data.pamName = keyWords
|
||
this.majax({
|
||
url: this.$local + "/api/miniapp/portAreaManage/getPortArea",
|
||
params: data,
|
||
method: 'GET'
|
||
}).then(res => {
|
||
this.portList = res.data
|
||
})
|
||
// 模拟
|
||
this.portList = [{
|
||
potId: 1123,
|
||
pamName: '测试港口'
|
||
}]
|
||
},
|
||
shipInput(e) {
|
||
clearTimeout(timers)
|
||
timers = setTimeout(() => {
|
||
this.getShip(e)
|
||
}, 500)
|
||
},
|
||
shipSelect(e) {
|
||
this.shipItem = e
|
||
},
|
||
// 获取船舶
|
||
getShip(keyWords) {
|
||
console.log(this.portName);
|
||
let data = {}
|
||
data.ieType = 'I' // I进口 E出口 暂无法区分
|
||
data.key = keyWords
|
||
data.pamId = this.portItem.pamId
|
||
this.majax({
|
||
url: this.$local + "/api/shipInstructions/queryByKey",
|
||
params: data,
|
||
method: 'GET'
|
||
}).then(res => {
|
||
this.shipList = res.data
|
||
})
|
||
// 模拟
|
||
this.shipList = [{
|
||
vvyId: 1123,
|
||
vvyName: '测试航次'
|
||
}]
|
||
},
|
||
onSearch() {
|
||
let data = {}
|
||
data.tradeType = '外贸' // I进口 E出口 暂无法区分
|
||
data.vvyId = this.shipItem.vvyId
|
||
data.pamId = this.portItem.pamId
|
||
this.majax({
|
||
url: this.$local + "/api/shipInstructions/queryStowageVoyages",
|
||
params: data,
|
||
method: 'GET'
|
||
}).then(res => {
|
||
this.ltemList = res.data.records
|
||
})
|
||
// 模拟
|
||
this.ltemList = [{
|
||
actualBerthage: "一号位置",
|
||
actualBerthageDesc: "",
|
||
importExportFlag: "出口",
|
||
spmId: "spm1112",
|
||
spmIdDesc: "331122",
|
||
tradeType: "内贸",
|
||
vvyId: "11231",
|
||
vvyName: "海王星领袖",
|
||
vvyStatus: "2",
|
||
vvyStatusName: "作业中",
|
||
}]
|
||
},
|
||
|
||
toDetails(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/instruct?id=' + id
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.container {
|
||
display: flex;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
|
||
.form {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.end {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.input {
|
||
width: 200px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
padding-left: 10px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.btn {
|
||
height: 35px;
|
||
line-height: 35px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.itemList {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
width: 32%;
|
||
margin-top: 15px;
|
||
margin-right: 2%;
|
||
height: 160px;
|
||
border: 1px solid #c9cacb;
|
||
padding: 22px 15px;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 21px;
|
||
margin-bottom: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.status {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18px;
|
||
margin: 10px 0;
|
||
|
||
.nitem {
|
||
width: 46%;
|
||
|
||
text {
|
||
color: #929292;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.item:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |