<!-- * @Author: your name * @Date: 2022-04-13 10:27:33 * @LastEditTime: 2022-04-14 17:59:39 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue --> <template> <div class="map-bottom-wrapper"> <div id="xjxcmap" class="map"></div> <div class="left-box all-flex-h"> <div class="top"> <div class="title">巡检任务查看</div> <div class="wrapper"> <div class="top-wrapper flex"> <div class="input-wrapper"> <el-input v-model="searchData.task" placeholder="点击输入任务名称" suffix-icon="el-icon-search" size="mini" > </el-input> </div> <div class="enter"> <el-button size="mini" @click="enter" ><span class="text">确认</span></el-button > </div> <div class="reset"> <el-button size="mini" @click="reset"> <span class="text">重置</span> <i class="el-icon-refresh el-icon--right"></i> </el-button> </div> </div> <div class="middle-wrapper flex"> <div class="left"> <el-select v-model="searchData.unt" placeholder="执行单位" size="mini" > <el-option size="mini" v-for="item in unt" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <div class="middle"> <el-select v-model="searchData.type" placeholder="任务类型" size="mini" > <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <div class="right"> <el-select v-model="searchData.state" placeholder="任务状态" size="mini" > <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> </div> <div class="bottom-wrapper"> <el-date-picker style="width: 100%" v-model="searchData.value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" size="mini" value-format="yyyy-MM-dd" > </el-date-picker> </div> </div> </div> <div class="bottom all-flex-h"> <div ref="table" class="table"> <el-table v-loading="loading" :data=" tableData.filter((item, index) => { return index >= (page - 1) * limit && index < page * limit; }) " style="width: 100%" :height="tableScrollH" ref="t" class="t" > <el-table-column fixed prop="name" label="任务名称" width="90"> <template v-slot="scope"> <div :title="scope.row.name" class="zzz"> {{ scope.row.name }} </div> </template> </el-table-column> <el-table-column prop="unt" label="执行单位" width="90"> <template v-slot="scope"> <div :title="scope.row.unt" class="zzz"> {{ unt[scope.row.unt - 1].label }} </div> </template> </el-table-column> <el-table-column prop="type" label="任务类型" width="90"> <template v-slot="scope"> <div :title="scope.row.type" class="zzz"> {{ type[scope.row.type - 1].label }} </div> </template> </el-table-column> <el-table-column prop="state" label="任务状态" width="90"> <template v-slot="scope"> <div :title="scope.row.state" class="zzz"> {{ state[scope.row.state - 1].label }} </div> </template> </el-table-column> <el-table-column prop="handle" label="操作" width="90"> <template v-slot="scope"> <el-button @click="mapDo(scope.row)" type="text" ><span :class="{ target: target == scope.row.id }" >巡检信息</span ></el-button > </template> </el-table-column> </el-table> </div> <div class="page"> <pagination style="width: 100%; padding: 0px !important" :small="true" :total="tableData.length" :page="page" :limit.sync="limit" @pagination="getList" layout="prev, pager, next, jumper" /> </div> </div> </div> </div> </template> <script> import { XjxcMap } from "@/utils/mapClass/xjxcmap"; import Null from "@/components/bigWindow/Null"; import moment from "moment"; import Pipe from "./Pipe.vue"; let arr = [ // { // id: 1, // name: "燃气检测", // unt: 1, // type: 2, // state: 3, // utl: 2, // value: ["2022-4-1", "2022-4-12"], // path: "[[114.210488,38.257287],[114.21087,38.257218],[114.210664,38.25583],[114.213991,38.255507],[114.213962,38.256362],[114.213962,38.254397],[114.213962,38.255553],[114.213991,38.25412],[114.212137,38.254189],[114.212137,38.254836],[114.210812,38.254767],[114.212107,38.254836],[114.212166,38.254212],[114.213874,38.25412],[114.213991,38.255553],[114.218261,38.255137],[114.219291,38.254952],[114.218585,38.254698],[114.219321,38.254952],[114.224355,38.254605],[114.224355,38.252432],[114.224385,38.254628],[114.22306,38.254698],[114.22462,38.255091],[114.228566,38.254628],[114.224532,38.255091],[114.224385,38.256986],[114.218938,38.257287],[114.224385,38.25701],[114.224296,38.258882]]", // }, // { // id: 2, // name: "燃气泄漏检测", // unt: 1, // type: 2, // state: 2, // utl: 3, // value: ["2022-4-1", "2022-4-12"], // path: "[[114.183586,38.264945],[114.181374,38.264866],[114.181441,38.265655],[114.181374,38.264866],[114.177487,38.265471],[114.177554,38.265997],[114.176851,38.265997],[114.176851,38.26626],[114.176717,38.265708],[114.169353,38.267055],[114.169793,38.272073],[114.169353,38.267038],[114.169333,38.267038],[114.165557,38.267697]]", // }, // { // id: 3, // name: "入户安检", // unt: 2, // type: 3, // state: 1, // utl: 2, // value: ["2022-4-1", "2022-4-12"], // path: "[[114.206628,38.25932],[114.206688,38.259038],[114.205715,38.258193],[114.206695,38.259009],[114.206493,38.256513],[114.206194,38.256466],[114.206013,38.254239],[114.204974,38.254364],[114.205972,38.254258],[114.205511,38.250257],[114.196482,38.250445],[114.205491,38.250257],[114.21296,38.24977],[114.205511,38.250257],[114.205089,38.246589],[114.20471,38.24654],[114.204289,38.243749],[114.204709,38.243733],[114.207324,38.243577],[114.204669,38.243718],[114.204528,38.242402],[114.204208,38.240535],[114.204549,38.242449],[114.204649,38.243689],[114.20509,38.246606]]", // }, // { // id: 4, // name: "探测器报警", // unt: 2, // type: 1, // state: 3, // utl: 1, // value: ["2022-4-1", "2022-4-12"], // }, // { // id: 5, // name: "安装家用气体探测器", // unt: 1, // type: 3, // state: 3, // utl: 3, // value: ["2022-4-1", "2022-4-12"], // }, // { // id: 6, // name: "入户安检", // unt: 1, // type: 2, // state: 3, // utl: 3, // value: ["2022-4-1", "2022-4-12"], // }, // { // id: 7, // name: "探测器消警", // unt: 1, // type: 1, // state: 2, // utl: 2, // value: ["2022-4-1", "2022-4-12"], // }, // { // id: 8, // name: "燃气泄漏", // unt: 1, // type: 3, // state: 2, // utl: 3, // }, // { // id: 9, // name: "家用探测器报警", // unt: 1, // type: 2, // state: 3, // utl: 2, // }, // { // id: 10, // name: "气体泄漏", // unt: 1, // type: 2, // state: 3, // utl: 3, // }, // { // id: 11, // name: "火灾报警", // unt: 1, // type: 2, // state: 1, // utl: 2, // }, // { // id: 12, // name: "入户安检", // unt: 1, // type: 1, // state: 3, // utl: 3, // }, // { // id: 13, // name: "入户安检", // unt: 1, // type: 3, // state: 3, // utl: 4, // }, // { // id: 14, // name: "气体泄漏", // unt: 1, // type: 3, // state: 1, // utl: 2, // }, // { // id: 15, // name: "爆炸", // unt: 1, // type: 2, // state: 2, // utl: 4, // }, // { // id: 16, // name: "爆炸", // unt: 1, // type: 3, // state: 3, // utl: 1, // }, // { // id: 17, // name: "有毒气体泄漏", // unt: 1, // type: 3, // state: 1, // utl: 3, // }, // { // id: 18, // name: "火灾", // unt: 1, // type: 3, // state: 4, // utl: 3, // }, // { // id: 19, // name: "报警", // unt: 1, // type: 1, // state: 3, // utl: 3, // }, ]; export default { data() { return { map: null, loading: false, // 点击巡检信息的选中状态 target: null, // 任务类型选项 unt: [ { value: 1, label: "中燃翔科技" }, { value: 2, label: "中诚燃气" }, ], type: [ { value: 1, label: "入户安检" }, { value: 2, label: "巡检" }, { value: 3, label: "其他" }, ], state: [ { value: 1, label: "派发中" }, { value: 2, label: "已接单" }, { value: 3, label: "已反馈" }, { value: 4, label: "已归档" }, ], searchData: { // 任务名称 task: "", unt: "", type: "", state: "", value: [], }, tableScrollH: 100, // 表格数据 tableData: arr, page: 1, limit: 10, }; }, mounted() { this.mapInit(); this.$nextTick(() => { const dom = document.getElementsByClassName("t")[0]; dom.style.height = this.$refs.table.getBoundingClientRect().height + "px"; }); console.log(moment("2022-11-29").valueOf()); }, methods: { mapInit() { this.map = new XjxcMap("xjxcmap", {center: [114.684979,38.038292]}, this); }, reset() { this.searchData = { // 任务名称 task: "", unt: "", type: "", state: "", value: [], }; this.enter(); }, enter() { this.loading = true; this.map.infowindowClose(); this.target = null; this.map.remove(); setTimeout(() => { this.page = 1; const { task, unt, type, state, value } = this.searchData; this.tableData = arr.filter((item) => { const a = item.name.indexOf(task) >= 0; const b = unt ? item.unt == unt : true; const c = type ? item.type == type : true; const d = state ? item.state == state : true; const e = value.length > 0 ? Array.isArray(item.value) && moment(value[0]).valueOf() <= moment(item.value[0]).valueOf() : true; const f = value.length > 0 ? Array.isArray(item.value) && moment(value[1]).valueOf() >= moment(item.value[1]).valueOf() : true; return a && b && c && d && e && f; }); this.loading = false; }, 200); }, getList(e) { console.log(e); this.loading = true; setTimeout(() => { this.page = e.page; this.loading = false; }, 200); }, mapDo(data) { // 暂无信息 if (!Array.isArray(eval(data.path))) { this.msgError("暂无巡检信息"); return; } this.target = data.id; this.map.remove(); this.map.create(data, Null, Pipe); }, }, }; </script> <style lang="scss" scoped> .map-bottom-wrapper { height: 100%; position: relative; & > .map { height: 100%; } & > .left-box { width: 497px; position: absolute; top: 0; bottom: 0; > .top { width: 100%; // height: 143px; padding-bottom: 10px; margin-bottom: 9px; border-radius: 3px; box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1); background: #fff; .title { padding: 8px 0 4px 15px; border-bottom: 1px solid rgba(231, 231, 231, 1); font-size: 21px; font-weight: 400; } .wrapper { padding: 6px 12px 0px 12px; .top-wrapper { margin-bottom: 6px; div { &.input-wrapper { width: 337px; margin-right: 3px; } &.enter, &.reset { // flex:1; span.text { font-size: 12px; color: #333333; } } } } .middle-wrapper { width: 100%; margin-bottom: 6px; > div { width: 150px; // background: red; } } } } > .bottom { flex: 1; border-radius: 3px; box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1); background: #fff; box-sizing: border-box; padding: 12px 20px; padding-bottom: 0; justify-content: space-between; .table { flex: 1; background-color: red; .target { color: #ffc337; font-weight: 600; } } .page { // height: 100px; width: 100%; } } } } </style>