Commit 9509e587 authored by 赵啸非's avatar 赵啸非

Merge remote-tracking branch 'origin/master'

parents 14487efc a597f97d
This source diff could not be displayed because it is too large. You can view the blob instead.
import http from "../request/http";
let baseURL = process.env.VUE_APP_API_PHP_URL;
//群众画像-整体情况
export function peopleQs(params) {
return http.get(`${baseURL}/inter/Personas/peopleQs`, params);
}
//注册区域分析
export function registerProvince(params) {
return http.get(`${baseURL}/inter/Personas/registerProvince`, params);
}
//本外地注册区域分析
export function registerBwd(params) {
return http.get(`${baseURL}/inter/Personas/registerBwd`, params);
}
//注册性别分析
export function registerSex(params) {
return http.get(`${baseURL}/inter/Personas/registerSex`, params);
}
//注册年龄分析
export function registerAge(params) {
return http.get(`${baseURL}/inter/Personas/registerAge`, params);
}
//注册民族分析
export function registerNation(params) {
return http.get(`${baseURL}/inter/Personas/registerNation`, params);
}
//办件用户地域分析
export function provinceCase(params) {
return http.get(`${baseURL}/inter/statistic/provinceCase`, params);
}
//办件省份下地域分析
export function provinceStatistic(params) {
return http.get(`${baseURL}/inter/statistic/provinceStatistic`, params);
}
//本外地分析
export function bwdStatistic(params) {
return http.get(`${baseURL}/inter/statistic/bwdStatistic`, params);
}
//性别办件分析
export function genderRateType(params) {
return http.get(`${baseURL}/inter/Personas/genderRateType`, params);
}
//办件年龄分析
export function ageRate(params) {
return http.get(`${baseURL}/inter/statistic/ageRate`, params);
}
//民族办件次数分析
export function TopNationStatistic(params) {
return http.get(`${baseURL}/inter/statistic/TopNationStatistic`, params);
}
/* 颜色 */
.primary {
color: #1890ff;
}
.delete {
color: #ff4d4f;
}
.green {
color: #1bbc9b;
}
.clofff {
color: #fff;
}
.orange {
color: orange;
}
.bgdel {
background-color: #ff4d4f;
}
.bgpr {
background-color: #1890ff;
}
.bgg {
background-color: #1bbc9b;
}
/* 版心 */
.container {
width: 1200px;
}
/* 弹性布局 */
.flex {
display: flex;
}
.flex1 {
flex: 1;
}
.flexc {
flex-direction: column;
}
.flexwrap {
flex-wrap: wrap;
}
.jcc {
justify-content: center;
}
.jca {
justify-content: space-around;
}
.jcb {
justify-content: space-between;
}
.jce {
justify-content: space-evenly;
}
.aic {
align-items: center;
}
.aca {
align-content: space-around;
}
.acb {
align-content: space-between;
}
.ace {
align-content: space-evenly;
}
/* margin */
.m10 {
margin: 10px;
}
.m15 {
margin: 15px;
}
.m20 {
margin: 20px;
}
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mt20 {
margin-top: 20px;
}
.mt50 {
margin-top: 50px;
}
.ml10 {
margin-left: 10px;
}
.ml15 {
margin-left: 15px;
}
.ml20 {
margin-left: 20px;
}
.ml25 {
margin-left: 25px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.mr20 {
margin-right: 20px;
}
.mr25 {
margin-right: 25px;
}
.mr50 {
margin-right: 50px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
/* padding */
.pd10 {
padding: 10px;
}
.pd15 {
padding: 15px;
}
.pd20 {
padding: 20px;
}
.pdt10 {
padding-top: 10px;
}
.pdt15 {
padding-top: 15px;
}
.pdt20 {
padding-top: 20px;
}
.pdt30 {
padding-top: 30px;
}
.pdl8 {
padding-left: 8px;
}
.pdl10 {
padding-left: 10px;
}
.pdl15 {
padding-left: 15px;
}
.pdl20 {
padding-left: 20px;
}
.pdr10 {
padding-right: 10px;
}
.pdr15 {
padding-right: 15px;
}
.pdr20 {
padding-right: 20px;
}
.pdb10 {
padding-bottom: 10px;
}
.pdb15 {
padding-bottom: 15px;
}
.pdb20 {
padding-bottom: 20px;
}
/* 字体大小 */
.font16 {
font-size: 16px;
}
.font18 {
font-size: 18px;
}
.font20 {
font-size: 20px;
}
.font22 {
font-size: 22px;
}
.font24 {
font-size: 24px;
}
.font26 {
font-size: 26px;
}
.font28 {
font-size: 28px;
}
.font30 {
font-size: 30px;
}
/* 字体位置 */
.tac {
text-align: center;
}
.tal {
text-align: left;
}
.tar {
text-align: right;
}
/* 加粗 */
.fontw600 {
font-weight: 600;
}
.fontw700 {
font-weight: 700;
}
.fontw800 {
font-weight: 800;
}
/* 手型鼠标 */
.pointer {
cursor: pointer;
}
.pagination {
margin-top: 10px;
text-align: right;
}
.color_title {
margin-left: 15px;
position: relative;
margin-bottom: 15px;
color: #1890ff;
}
.color_title::before {
content: "";
width: 4px;
height: 20px;
position: absolute;
top: 0px;
left: -16px;
background-color: #0595fd;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
overflow-y: auto;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 147, 153, 0.5);
}
::-webkit-scrollbar-track {
border-radius: 6px;
background: #fff;
}
.ant-modal-close {
color: #188fff !important;
}
.ant-modal-close svg {
font-size: 26px !important;
}
.ant-modal-title {
color: #1890ff !important;
font-size: 18px;
font-weight: bold;
}
.header_box {
padding-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.header_box > div {
display: flex;
justify-content: flex-start;
align-items: center;
}
.header_box > div b {
font-style: normal;
font-weight: unset;
font-size: 16px;
margin-left: 20px;
}
.header_box > div b i {
color: #0595fd;
font-style: normal;
}
.header_box > div sub {
font-size: 14px;
font-style: normal;
bottom: unset;
margin-left: 20px;
}
.header_box > div .export_btn {
outline: none;
cursor: pointer;
border: none;
padding: 0.8rem 1.2rem;
margin: 0;
font-family: inherit;
font-size: inherit;
position: relative;
display: inline-block;
font-size: 0.8rem;
border-radius: 6px;
overflow: hidden;
background: #42dac8;
color: ghostwhite;
}
.header_box > div .export_btn span {
position: relative;
z-index: 10;
transition: color 0.4s;
}
.header_box > div .export_btn:hover span {
color: #fef2f2;
}
.header_box > div .export_btn::before,
.header_box > div .export_btn::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.header_box > div .export_btn::before {
content: "";
background: #08cfb8;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.header_box > div .export_btn:hover::before {
transform: translate3d(100%, 0, 0);
}
.header_box > span {
display: flex;
justify-content: space-between;
align-items: center;
}
.header_box > span /deep/ .ant-input-affix-wrapper {
width: 15rem !important;
margin-right: 1rem !important;
}
.header_box > span /deep/ .ant-input {
height: 2.3rem !important;
}
.header_box > span /deep/ .ant-select-selection {
width: 170px !important;
height: 2.3rem !important;
margin-right: 1rem !important;
}
.header_box > span /deep/ .ant-select-selection__rendered {
height: 100% !important;
}
.header_box > span /deep/ .ant-select-selection-selected-value {
height: 100% !important;
line-height: 2.3rem !important;
}
.header_box > span .search_btn {
padding: 0.8rem 1.2rem;
border: 0;
border-radius: 5px;
background: #1890ff;
box-shadow: rgba(0, 0, 0, 0.05) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.8rem;
color: hsl(0, 0%, 100%);
transition: all 0.5s ease;
cursor: pointer;
}
.header_box > span .search_btn:hover {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: #5d18dc 0px 2px 10px 0px;
}
.header_box > span .search_btn:active {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: #5d18dc 0px 0px 0px 0px;
transform: translateY(2px);
transition: 100ms;
}
.main .type0 {
color: #888888;
}
.main .type1 {
color: #f94545;
}
.main .type2 {
color: #04ca8f;
}
.main .ant-btn-link {
padding: 0 !important;
}
.main .ant-btn-link + .ant-btn-link {
margin-left: 1rem !important;
}
.main .ant-table-pagination {
float: right !important;
}
.ant-btn-success {
background-color: #04ca8f;
border-color: #04ca8f;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
.ant-btn-success:hover,
.ant-btn-success:focus {
color: #fff;
background-color: #42dac8;
border-color: #42dac8;
}
.ant-select {
min-width: 120px;
}
.ant-calendar-picker {
min-width: 270px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.addclass {
background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
color: #fff !important;
}
...@@ -320,6 +320,7 @@ ...@@ -320,6 +320,7 @@
left: -16px; left: -16px;
background-color: rgba(5, 149, 253, 1); background-color: rgba(5, 149, 253, 1);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
...@@ -335,24 +336,29 @@ ...@@ -335,24 +336,29 @@
border-radius: 6px; border-radius: 6px;
background: #fff; background: #fff;
} }
.ant-modal-close { .ant-modal-close {
color: #188fff !important; color: #188fff !important;
} }
.ant-modal-close svg { .ant-modal-close svg {
font-size: 26px !important; font-size: 26px !important;
} }
.ant-modal-title { .ant-modal-title {
color: #1890ff !important; color: #1890ff !important;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.header_box { .header_box {
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
& > div {
&>div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -362,17 +368,20 @@ ...@@ -362,17 +368,20 @@
font-weight: unset; font-weight: unset;
font-size: 16px; font-size: 16px;
margin-left: 20px; margin-left: 20px;
i { i {
color: #0595fd; color: #0595fd;
font-style: normal; font-style: normal;
} }
} }
sub { sub {
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
bottom: unset; bottom: unset;
margin-left: 20px; margin-left: 20px;
} }
.export_btn { .export_btn {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
...@@ -388,6 +397,7 @@ ...@@ -388,6 +397,7 @@
overflow: hidden; overflow: hidden;
background: #42dac8; background: #42dac8;
color: ghostwhite; color: ghostwhite;
& span { & span {
position: relative; position: relative;
z-index: 10; z-index: 10;
...@@ -423,29 +433,35 @@ ...@@ -423,29 +433,35 @@
} }
} }
& > span { &>span {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/deep/.ant-input-affix-wrapper { /deep/.ant-input-affix-wrapper {
width: 15rem !important; width: 15rem !important;
margin-right: 1rem !important; margin-right: 1rem !important;
} }
/deep/.ant-input { /deep/.ant-input {
height: 2.3rem !important; height: 2.3rem !important;
} }
/deep/.ant-select-selection { /deep/.ant-select-selection {
width: 170px !important; width: 170px !important;
height: 2.3rem !important; height: 2.3rem !important;
margin-right: 1rem !important; margin-right: 1rem !important;
} }
/deep/.ant-select-selection__rendered { /deep/.ant-select-selection__rendered {
height: 100% !important; height: 100% !important;
} }
/deep/.ant-select-selection-selected-value { /deep/.ant-select-selection-selected-value {
height: 100% !important; height: 100% !important;
line-height: 2.3rem !important; line-height: 2.3rem !important;
} }
.search_btn { .search_btn {
padding: 0.8rem 1.2rem; padding: 0.8rem 1.2rem;
border: 0; border: 0;
...@@ -477,26 +493,33 @@ ...@@ -477,26 +493,33 @@
} }
} }
} }
.main { .main {
.type0 { .type0 {
color: #888888; color: #888888;
} }
.type1 { .type1 {
color: #f94545; color: #f94545;
} }
.type2 { .type2 {
color: #04ca8f; color: #04ca8f;
} }
.ant-btn-link { .ant-btn-link {
padding: 0 !important; padding: 0 !important;
& + .ant-btn-link {
&+.ant-btn-link {
margin-left: 1rem !important; margin-left: 1rem !important;
} }
} }
.ant-table-pagination { .ant-table-pagination {
float: right !important; float: right !important;
} }
} }
.ant-btn-success { .ant-btn-success {
background-color: #04ca8f; background-color: #04ca8f;
border-color: #04ca8f; border-color: #04ca8f;
...@@ -505,18 +528,22 @@ ...@@ -505,18 +528,22 @@
-webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%); -webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
box-shadow: 0 2px 0 rgb(0 0 0 / 5%); box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
} }
.ant-btn-success:hover, .ant-btn-success:hover,
.ant-btn-success:focus { .ant-btn-success:focus {
color: #fff; color: #fff;
background-color: #42dac8; background-color: #42dac8;
border-color: #42dac8; border-color: #42dac8;
} }
.ant-select { .ant-select {
min-width: 120px; min-width: 120px;
} }
.ant-calendar-picker { .ant-calendar-picker {
min-width: 270px; min-width: 270px;
} }
.ellipsis { .ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -526,4 +553,4 @@ ...@@ -526,4 +553,4 @@
.addclass { .addclass {
background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important; background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
color: #fff !important; color: #fff !important;
} }
\ No newline at end of file
...@@ -9,17 +9,12 @@ ...@@ -9,17 +9,12 @@
</template> </template>
<a-row type="flex" align="middle"> <a-row type="flex" align="middle">
<a-col :span="4"> <a-col :span="4">
<div class="f_40 f_center warning">111</div> <div class="f_40 f_center warning">{{ massCount }}</div>
<div class="f_center">群众注册总量</div> <div class="f_center">群众注册总量</div>
<div class="f_center primary" @click="toTable">点击查看报表</div> <div class="f_center primary" @click="toTable">点击查看报表</div>
</a-col> </a-col>
<a-col :span="20"> <a-col :span="20">
<lineChart <lineChart :id="`one_line`" :title="`近30日注册情况分析`" :datas="oneLineData" :height="200" :width="1420" />
:id="`one_line`"
:title="`近30日注册情况分析`"
:datas="oneLineData"
:height="200"
:width="1420"/>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
...@@ -32,57 +27,27 @@ ...@@ -32,57 +27,27 @@
</template> </template>
<a-row> <a-row>
<a-col :span="8"> <a-col :span="8">
<map-chart <map-chart :id="`one_map`" :datas="oneMapData" :height="400" :width="550" />
:id="`one_map`"
:datas="oneMapData"
:height="400"
:width="550"
/>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-table <a-table :rowKey="(record, index) => { return index }" :dataSource="provinces"
:row-key="record => record.ranking" :dataSource="provinces" :columns="provincesColumns" :pagination="false"> :columns="provincesColumns" :scroll="{ y: 300 }" :pagination="false">
</a-table> </a-table>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<pieChart <pieChart :id="`one_pie`" :height="400" :width="550" :datas="onePieData" />
:id="`one_pie`"
:height="400"
:width="550"
:datas="onePieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<doublePieChart <doublePieChart :id="`two_pie`" :height="300" :width="800" :datas="twoPieData" />
:id="`two_pie`"
:height="300"
:width="800"
:datas="twoPieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart <barChart :id="`one_bar`" :height="300" :width="800" :datas="oneBarData" />
:id="`one_bar`"
:height="300"
:width="800"
:datas="oneBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart <barChart :id="`two_bar`" :height="300" :width="800" :datas="twoBarData" />
:id="`two_bar`"
:height="300"
:width="800"
:datas="twoBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<pieChart <pieChart :id="`three_pie`" :height="300" :width="800" :datas="threePieData" />
:id="`three_pie`"
:height="300"
:width="800"
:datas="threePieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
</a-col> </a-col>
...@@ -100,57 +65,27 @@ ...@@ -100,57 +65,27 @@
<a-row type="flex" align="middle"> <a-row type="flex" align="middle">
<a-row> <a-row>
<a-col :span="8"> <a-col :span="8">
<map-chart <map-chart :id="`two_map`" :datas="oneMapData2" :height="400" :width="550" />
:id="`two_map`"
:datas="oneMapData"
:height="400"
:width="550"
/>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-table <a-table :rowKey="(record, index) => { return index }" :dataSource="provinces2"
:row-key="record => record.ranking" :dataSource="provinces" :columns="provincesColumns" :pagination="false"> :columns="provincesColumns2" :pagination="false" :scroll="{ y: 300 }">
</a-table> </a-table>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<pieChart <pieChart :id="`four_pie`" :height="400" :width="550" :datas="onePieData2" />
:id="`four_pie`"
:height="400"
:width="550"
:datas="onePieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<doublePieChart <doublePieChart :id="`five_pie`" :height="300" :width="800" :datas="twoPieData2" />
:id="`five_pie`"
:height="300"
:width="800"
:datas="twoPieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart <barChart :id="`six_bar`" :height="300" :width="800" :datas="oneBarData2" />
:id="`six_bar`"
:height="300"
:width="800"
:datas="oneBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart <barChart :id="`three_bar`" :height="300" :width="800" :datas="twoBarData2" />
:id="`three_bar`"
:height="300"
:width="800"
:datas="twoBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<pieChart <pieChart :id="`six_pie`" :height="300" :width="800" :datas="threePieData2" />
:id="`six_pie`"
:height="300"
:width="800"
:datas="threePieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
</a-col> </a-col>
...@@ -169,214 +104,503 @@ import pieChart from "../../business/Component/pie/index.vue" ...@@ -169,214 +104,503 @@ import pieChart from "../../business/Component/pie/index.vue"
import lineChart from "../../business/Component/line/index.vue" import lineChart from "../../business/Component/line/index.vue"
import mapChart from "../../business/Component/map/index.vue" import mapChart from "../../business/Component/map/index.vue"
import moment from "moment" import moment from "moment"
export default { import {
components:{ peopleQs, registerProvince, registerBwd, registerSex, registerAge, registerNation, provinceCase, bwdStatistic,
mapChart, pieChart, lineChart, doublePieChart, barChart provinceStatistic, genderRateType, ageRate, TopNationStatistic
}, } from "@/api/userPortrait.js"
data(){ export default {
return{ components: {
options:[ mapChart, pieChart, lineChart, doublePieChart, barChart
{ },
value: '0', data() {
label: '今天', return {
}, options: [
{ {
value: '1', value: '0',
label: '近7日', label: '今天',
}, },
{ {
value: '2', value: '1',
label: '近30日', label: '近7日',
}, },
{ {
value: '3', value: '2',
label: '近3个月', label: '近30日',
}, },
{ {
value: '4', value: '3',
label: '本年度', label: '近3个月',
}, },
], {
oneLineData: {}, value: '4',
oneMapData: {}, label: '本年度',
onePieData: {}, },
twoPieData: {}, ],
oneBarData: {}, oneLineData: {},
twoBarData: {}, oneMapData: {},
threePieData: {}, oneMapData2: {},
provinces: [ onePieData: {},
{ onePieData2: {},
ranking: 1, twoPieData: {},
province: '四川省', twoPieData2: {},
people: '999', oneBarData: {},
percent: '2' oneBarData2: {},
}, twoBarData: {},
{ twoBarData2: {},
ranking: 2, threePieData: {},
province: '四川省', threePieData2: {},
people: '999', provinces: [
percent: '2' {
}, ranking: 1,
], province: '四川省',
provincesColumns: [ people: '999',
{ percent: '2'
key:'ranking', },
title: '序号', {
dataIndex: 'ranking', ranking: 2,
}, province: '四川省',
{ people: '999',
key:'province', percent: '2'
title: '省份', },
dataIndex: 'province', ],
}, provinces2: [
{ {
key:'people', ranking: 1,
title: '注册人数', province: '四川省',
dataIndex: 'people', people: '999',
}, percent: '2'
{ },
key:'percent', {
title: '注册占比', ranking: 2,
dataIndex: 'percent', province: '四川省',
}, people: '999',
], percent: '2'
takeNumber: '0', },
nowDate: '' ],
} provincesColumns: [
}, {
mounted(){ key: 'ranking',
this.test() title: '序号',
dataIndex: 'id',
},
{
key: 'province',
title: '省份',
dataIndex: 'province',
},
{
key: 'value',
title: '注册人数',
dataIndex: 'value',
},
{
key: 'zb_lv',
title: '注册占比',
dataIndex: 'zb_lv',
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%"
}
},
],
provincesColumns2: [
{
key: 'ranking',
title: '序号',
dataIndex: 'id',
},
{
key: 'province',
title: '省份',
dataIndex: 'province',
},
{
key: 'value',
title: '办件人数',
dataIndex: 'value',
},
{
key: 'nums_val',
title: '办件占比',
dataIndex: 'nums_val',
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%"
}
},
],
takeNumber: '0',
nowDate: '',
massCount: '0',//群众总量
timeArr: [],//群众注册时间
doTotal: 0
}
},
created() {
this.getPeopleQs()
this.getRegisterProvince()
this.getRegisterBwd()
this.getRegisterSex()
this.getRegisterAge()
this.getRegisterNation()
this.getProvinceCase()
this.getProvinceStatistic()
this.getBwdStatistic()
this.getGenderRateType()
this.getAgeRate()
this.getTopNationStatistic()
},
mounted() {
this.nowDate = moment(new Date()).format('YYYY-MM-DD h:mm:ss')
},
methods: {
handleChange() { },
toTable() {
this.$router.push({ path: 'register' })
}, },
methods:{ //整体情况
handleChange(){}, getPeopleQs() {
toTable(){ peopleQs({ siteid: localStorage.getItem('siteId') }).then(res => {
this.$router.push({path:'register'}) if (res.code == 1 && res.data) {
}, this.massCount = res.data.count
test(){ let time = res.data.list.map(i => { //循环获取时间
this.nowDate= moment(new Date()).format('YYYY-MM-DD h:mm:ss') return moment(i.datetime).format('MM-DD')
this.oneLineData= { })
title: '近30日注册情况分析:', let take = []
legend: ['自助服务系统注册人数','微官网注册人数','排队系统注册人数'], res.data.list.forEach(i => { //循环获取排号机注册情况
xData: ['3-15', '3-16', '3-17', '3-18', '3-19', '3-20'], i.row.forEach(j => {
dataList: [ if (j.register_type == 'take') {
{name: '自助服务系统注册人数', data: [120, 132, 101, 134, 90, 230, 210]}, return take.push(j.count)
{name: '微官网注册人数', data: [220, 182, 191, 234, 290, 330, 310]}, }
{name: '排队系统注册人数', data: [150, 232, 201, 154, 190, 330, 410]}, })
] })
let app = []
res.data.list.forEach(i => { //循环获取自助终端注册情况
i.row.forEach(j => {
if (j.register_type == 'app') {
return app.push(j.count)
}
})
})
let Applets = []
res.data.list.forEach(i => { //循环获取微官网注册情况
i.row.forEach(j => {
if (j.register_type == 'Applets') {
return Applets.push(j.count)
}
})
})
this.oneLineData = {
title: '近30日注册情况分析:',
legend: ['自助服务系统注册人数', '微官网注册人数', '排队系统注册人数'],
xData: time,
dataList: [
{ name: '自助服务系统注册人数', data: app },
{ name: '微官网注册人数', data: Applets },
{ name: '排队系统注册人数', data: take },
]
}
} }
this.oneMapData={
})
},
//区域注册情况
getRegisterProvince() {
registerProvince({ siteid: localStorage.getItem('siteId') }).then(res => {
let arr2 = res.data.sort(function (a, b) {
return b.count - a.count;
})
let arr = arr2.map((i, j) => {
i.id = j + 1
i.name = i.province
i.value = i.count
return i
})
// console.log(arr)
this.oneMapData = {
title: "注册用户地域分析", title: "注册用户地域分析",
data:[ data: arr
{ name: '四川省', value: 20057.34 },
{ name: '广东省', value: 15477.48 },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
]
} }
this.onePieData={ this.provinces = arr
this.onePieData = {
title: '', title: '',
type: 'scroll', type: 'scroll',
legend: ['四川省', '广东省', '福建省','河北省','河南省','江苏省',], legend: arr.forEach(i => { return i.province }),
data: [ data: arr
{ name: '四川省', value: 20057.34 },
{ name: '广东省', value: 15477.48 },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
]
} }
this.twoPieData={ })
},
//注册分布情况
getRegisterBwd() {
registerBwd({ siteid: localStorage.getItem('siteId') }).then(res => {
this.twoPieData = {
title: '本地人与外地人注册分布', title: '本地人与外地人注册分布',
pieName: '分布详情', pieName: '分布详情',
firstName: '宜宾市本地人注册占比', firstName: '宜宾市本地人注册占比',
firstVal: '1', firstVal: res.data.bd_lv,
firstTotal: '10', firstTotal: 1,
secondName: '外地人注册占比', secondName: '外地人注册占比',
secondVal: '1', secondVal: res.data.wd_lv,
secondTotal: '10', secondTotal: 1,
} }
this.oneBarData={ })
title: '性别分布', },
xData: ['', ''], //注册性别分布情况
data: [ getRegisterSex() {
{name: '自助服务系统注册人数', type: 'bar' ,data: [150, 232, 201, 154, 190, 330, 410]}, registerSex({ siteid: localStorage.getItem('siteId') }).then(res => {
{name: '微官网注册人数', type: 'bar' ,data: [220, 182, 191, 234, 290, 330, 310]}, // console.log(res)
{name: '排队系统注册人数', type: 'bar' ,data: [120, 132, 101, 134, 90, 230, 210]}, if (res.data) {
] let man = res.data[0].row
let woman = res.data[1].row
this.oneBarData = {
title: '性别分布',
xData: ['', ''],
data: [
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].count, woman[1].count] },
{ name: '微官网注册人数', type: 'bar', data: [man[2].count, woman[2].count] },
{ name: '排队系统注册人数', type: 'bar', data: [man[0].count, woman[0].count] },
]
}
} }
this.twoBarData= {
})
},
//注册年龄分布情况
getRegisterAge() {
registerAge({ siteid: localStorage.getItem('siteId') }).then(res => {
// console.log(res)
let age_area = res.data.map(i => {
return i.age_area
})
let total = 0
let count = res.data.map(i => {
total += i.nums
return i.nums
})
// console.log(total)
let zb = count.map(i => {
return parseFloat((i / total * 10000).toFixed(2))
})
// console.log(zb)
this.twoBarData = {
title: '年龄分布', title: '年龄分布',
xData: ['1-10', '10-20', '20-30', '30-40', '40-50'], xData: age_area,
data: [ data: [
{name: '办理次数', type: 'bar' ,data: [150, 232, 201, 154, 190, 330, 410]}, { name: '办理次数', type: 'bar', data: count },
{name: '占比', type: 'line' ,data: [220, 182, 191, 234, 290, 330, 310]}, { name: '占比', type: 'line', data: zb },
] ]
} }
this.threePieData={ })
},
//注册民族分布情况
getRegisterNation() {
registerNation({ siteid: localStorage.getItem('siteId') }).then(res => {
// console.log(res)
res.data.forEach(i => {
i.name = i.idcard_Nation
i.value = i.count
})
// console.log(res.data)
this.threePieData = {
title: '民族分布', title: '民族分布',
type: '', type: '',
legend: ['四川省', '广东省', '福建省','河北省','河南省','江苏省',], legend: res.data,
data: res.data
}
})
},
//办件用户地域分析
getProvinceCase() {
provinceCase({ siteid: localStorage.getItem('siteId'), selected: 2 }).then(res => {
// console.log(res)
let arr2 = res.data.sort(function (a, b) {
return b.nums - a.nums;
})
let arr = arr2.map((i, j) => {
i.id = j + 1
i.province = i.name
i.value = i.nums
this.doTotal += i.nums
return i
})
arr.forEach(i => {
i.nums_val = i.nums / this.doTotal
})
// console.log(arr)
this.oneMapData2 = {
title: "办件用户地域分析",
data: arr
}
this.provinces2 = arr
// this.onePieData2 = {
// title: '',
// type: 'scroll',
// legend: arr.forEach(i => { return i.province }),
// data: arr
// }
})
},
//办件用户地域分析
getProvinceStatistic() {
provinceStatistic({ siteid: localStorage.getItem('siteId'), selected: 2, province: '四川省' }).then(res => {
// console.log(res)
res.data.forEach(i => {
i.value = i.count
})
this.onePieData2 = {
title: '',
type: 'scroll',
legend: res.data,
data: res.data
}
})
},
//本外地分析
getBwdStatistic() {
bwdStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }).then(res => {
// console.log(res)
this.twoPieData2 = {
title: '本地人与外地人办件分布',
pieName: '分布详情',
firstName: '宜宾市本地人办件占比',
firstVal: res.data.bd_lv,
firstTotal: 1,
secondName: '外地人办件占比',
secondVal: res.data.wd_lv,
secondTotal: 1,
}
})
},
//性别办件分析
getGenderRateType() {
genderRateType({ siteid: localStorage.getItem('siteId'), selected: 2 }).then(res => {
if (res.data) {
let man = res.data[0].row
let woman = res.data[1].row
this.oneBarData2 = {
title: '性别分布',
xData: ['', ''],
data: [
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].nums, woman[1].nums] },
{ name: '微官网注册人数', type: 'bar', data: [man[2].nums, woman[2].nums] },
{ name: '排队系统注册人数', type: 'bar', data: [man[0].nums, woman[0].nums] },
]
}
}
})
},
//办件年龄分析
getAgeRate() {
ageRate({ siteid: localStorage.getItem('siteId'), selected: 2 }).then(res => {
// console.log(res)
// console.log(res)
let age_area = res.data.list.map(i => {
return i.age_area
})
let total = 0
let count = res.data.list.map(i => {
total += i.nums
return i.nums
})
// console.log(total)
let zb = count.map(i => {
return parseFloat((i / total * 10000).toFixed(2))
})
// console.log(zb)
this.twoBarData2 = {
title: '年龄分布',
xData: age_area,
data: [ data: [
{ name: '四川省', value: 20057.34 }, { name: '办理次数', type: 'bar', data: count },
{ name: '广东省', value: 15477.48 }, { name: '占比', type: 'line', data: zb },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
] ]
} }
} })
} },
getTopNationStatistic() {
TopNationStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }).then(res => {
console.log(res)
res.data.forEach(i => {
i.name = i.idcard_Nation
i.value = i.count
})
// console.log(res.data)
this.threePieData2 = {
title: '民族分布',
type: '',
legend: res.data,
data: res.data
}
})
},
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.head{ /deep/.ant-col {
margin-bottom: 20px;
}
.head {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.head_title{
.head_title {
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
margin-right: 1.25rem; margin-right: 1.25rem;
} }
.head_desc{
.head_desc {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #888888; color: #888888;
} }
} }
/deep/ .ant-table{
/deep/ .ant-table {
width: 100% !important; width: 100% !important;
} }
.f_20{
.f_20 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.f_40{
.f_40 {
font-size: 2.5rem; font-size: 2.5rem;
} }
.f_center{
.f_center {
text-align: center; text-align: center;
} }
.warning{
.warning {
color: #FD6805 color: #FD6805
} }
.primary{
.primary {
color: #0595FD color: #0595FD
} }
.success{
.success {
color: #04CA8F color: #04CA8F
} }
.h_200{
.h_200 {
height: 12.5rem; height: 12.5rem;
} }
.mb_15{
.mb_15 {
margin-bottom: .9375rem; margin-bottom: .9375rem;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="reportForm-Container"> <div class="reportForm-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<a-button type="primary" class="addclass" @click="handleExportTable"> <a-button type="primary" class="addclass" @click="handleExportTable">
<span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span> <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
</a-button> </a-button>
</div> </div>
<span> <span>
<a-checkbox-group :options="checkboxOptions" v-model="checkboxVALUE" @change="checkboxonChange" /> <a-checkbox-group
<a-input allowClear v-model="Query.workman_name" placeholder="请输入工作人员姓名查询 "> :options="checkboxOptions"
<a-icon slot="prefix" type="search" /> v-model="checkboxVALUE"
</a-input> @change="checkboxonChange"
<a-select v-model="Query.window_id" placeholder="请选择窗口"> />
<a-select-option value=""> 全部 </a-select-option> <a-input
<a-select-option v-for="(item, index) of windowData" :key="index" :value="item.id"> allowClear
{{ item.englishName }} - {{item.fromnum}} v-model="Query.workman_name"
</a-select-option> placeholder="请输入工作人员姓名查询 "
</a-select> >
<a-select v-model="Query.warn_alert" placeholder="请选择类型"> <a-icon slot="prefix" type="search" />
<a-select-option value=""> 全部 </a-select-option> </a-input>
<a-select-option v-for="(item,i) in warn_alert" :key="i" :value="i"> <a-select v-model="Query.window_id" placeholder="请选择窗口">
{{ item }} <a-select-option value=""> 全部 </a-select-option>
</a-select-option> <a-select-option
</a-select> v-for="(item, index) of windowData"
:key="index"
:value="item.id"
>
{{ item.englishName }} - {{ item.fromnum }}
</a-select-option>
</a-select>
<a-select v-model="Query.warn_alert" placeholder="请选择类型">
<a-select-option value=""> 全部 </a-select-option>
<a-select-option v-for="(item, i) in warn_alert" :key="i" :value="i">
{{ item }}
</a-select-option>
</a-select>
<a-range-picker format="YYYY年MM月DD日" valueFormat="yyyy-MM-DD" class="range_picker_style" <a-range-picker
v-model="Query.time"> format="YYYY年MM月DD日"
</a-range-picker> valueFormat="yyyy-MM-DD"
class="range_picker_style"
v-model="Query.time"
>
</a-range-picker>
<a-button type="primary" class="addclass" @click="onGetKqalert">搜索</a-button> <a-button type="primary" class="addclass" @click="onGetKqalert"
</span> >搜索</a-button
</div> >
<div class="main"> </span>
<a-table size="small" bordered :row-key="(record) => record.id" :row-selection="{ </div>
<div class="main">
<a-table
size="small"
bordered
:row-key="(record) => record.id"
:row-selection="{
selectedRowKeys: tableSelectedKeys, selectedRowKeys: tableSelectedKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" :scroll="{ y: 590 }" :pagination="tablePagination" @change="changeTablePage" :loading="tableLoading" }"
:columns="tableHeaders" :dataSource="tableSourceData"> :scroll="{ y: 590 }"
<template slot="operation" slot-scope="text, record"> :pagination="tablePagination"
<a-button type="link" @click="openDetails">查看详情{{ record.id }}</a-button> @change="changeTablePage"
</template> :loading="tableLoading"
</a-table> :columns="tableHeaders"
</div> :dataSource="tableSourceData"
</div> >
<template slot="operation" slot-scope="text, record">
<a-button type="link" @click="openDetails"
>查看详情{{ record.id }}</a-button
>
</template>
</a-table>
</div>
</div>
</template> </template>
<script> <script>
import table from "@/mixins/table"; import table from "@/mixins/table";
import { import { export2Excel } from "@/utils/js/exportExcel";
export2Excel import { getKqalert } from "@/api/dataAdmin";
} from "@/utils/js/exportExcel"; import { windowList } from "@/api/customer";
import { import moment from "moment";
getKqalert const warn_alert = {
} from "@/api/dataAdmin" 1: "离岗",
import { 2: "离开",
windowList 4: "玩手机",
} from "@/api/customer" 5: "扶头",
import moment from "moment"; 6: "趴桌",
const warn_alert = { };
1: '离岗', const tHeader = [
2: '离开', "序号",
4: '玩手机', "报警类型",
5: '扶头', "发生窗口",
6: '趴桌', "工作人员",
} "所属部门",
export default { "手机号",
mixins: [table], "发生时间",
name: "PortalAdminVueReportForm", "时长",
data() { "是否准确",
return { ];
windowData: [], const filterVal = [
warn_alert, "index",
Query: { "warn_alert",
have_process: "", //只看未处理 0 "window_name",
warn_alert: "", //1离岗,2离开 4:玩手机 5:扶头 6:趴桌 "workman_name",
window_id: "", //窗口ID "section_name",
workman_name: "", //工作人员姓名 "workman_phone",
time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")], // 时间区间 "out_time",
}, //查询条件 "duration",
checkboxVALUE: [], "isaccuracy",
BegindAndEndTime: [], "have_process_name",
checkboxOptions: [{ ];
label: "只看未处理", export default {
value: "0", mixins: [table],
}, ], name: "PortalAdminVueReportForm",
tableHeaders: [{ data() {
title: "序号", return {
dataIndex: "index", windowData: [],
width: "60px", warn_alert,
key: "index", Query: {
align: "center", have_process: "", //只看未处理 0
customRender: (text, record, index) => `${index + 1}`, warn_alert: "", //1离岗,2离开 4:玩手机 5:扶头 6:趴桌
}, window_id: "", //窗口ID
{ workman_name: "", //工作人员姓名
title: "报警类型", time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")], // 时间区间
dataIndex: "warn_alert", }, //查询条件
customRender: (text, record) => warn_alert[text] checkboxVALUE: [],
}, BegindAndEndTime: [],
{ checkboxOptions: [
title: "发生窗口", {
dataIndex: "window_name", label: "只看未处理",
customRender: (text, record) => text ? text : '--' value: "0",
}, },
{ ],
title: "工作人员", tableHeaders: [
dataIndex: "workman_name", {
customRender: (text, record) => text ? text : '--' title: "序号",
}, dataIndex: "index",
{ width: "60px",
title: "所属部门", key: "index",
dataIndex: "section_name", align: "center",
customRender: (text, record) => text ? text : '--' customRender: (text, record, index) => `${index + 1}`,
}, },
{ {
title: "手机号", title: "报警类型",
dataIndex: "workman_phone", dataIndex: "warn_alert",
customRender: (text, record) => text ? text : '--' customRender: (text, record) => warn_alert[text],
}, },
{ {
title: "发生时间", title: "发生窗口",
dataIndex: "out_time", dataIndex: "window_name",
customRender: (text, record) => text ? text : '--' customRender: (text, record) => (text ? text : "--"),
}, },
{ {
title: "时长", title: "工作人员",
dataIndex: "duration", dataIndex: "workman_name",
customRender: (text, record) => text ? text : '--' customRender: (text, record) => (text ? text : "--"),
}, },
{ {
title: "是否准确", title: "所属部门",
dataIndex: "isaccuracy", dataIndex: "section_name",
customRender: (text, record) => text == 1 ? '准确' : '--' customRender: (text, record) => (text ? text : "--"),
}, },
{ {
title: "是否处理", title: "手机号",
dataIndex: "have_process_name", dataIndex: "workman_phone",
customRender: (text, record) => text ? text : '--' customRender: (text, record) => (text ? text : "--"),
}, },
// { {
// title: "操作", title: "发生时间",
// align: "center", dataIndex: "out_time",
// width: "110px", customRender: (text, record) =>
// dataIndex: "operation", text ? this.timestampToTime(text) : "--",
// scopedSlots: { },
// customRender: "operation", {
// }, title: "时长",
// }, dataIndex: "duration",
], customRender: (text, record) => (text ? text : "--"),
searchName: undefined, },
}; {
}, title: "是否准确",
components: {}, dataIndex: "isaccuracy",
mounted() { customRender: (text, record) => (text == 1 ? "准确" : "--"),
this.onGetKqalert() },
this.setMoment(); {
this.getWindowList(); title: "是否处理",
}, dataIndex: "have_process_name",
methods: { customRender: (text, record) => (text ? text : "--"),
// 导出 },
async handleExportTable() { // {
if (this.tableSelectedKeys.length && this.tableSelectedRows.length) { // title: "操作",
export2Excel( // align: "center",
this.tHeader, // width: "110px",
this.filterVal, // dataIndex: "operation",
this.tableSelectedRows, // scopedSlots: {
"AI效能监察异常行为数据报表" + this.$moment().format("YYYYMMDDHHmmss") // customRender: "operation",
); // },
} else { // },
getKqalert({ ],
...this.Query, searchName: undefined,
page: 1, };
size: -1, },
}).then(res => { components: {},
const { mounted() {
code, this.onGetKqalert();
data this.setMoment();
} = res; this.getWindowList();
if (code == 1) { },
if (!data.data.length) return; methods: {
export2Excel( // 时间戳转换为日期
this.tHeader, timestampToTime(timestamp) {
this.filterVal, var date = new Date(timestamp*1000);
data.data, var Y = date.getFullYear() + "-";
"AI效能监察异常行为数据报表" + this.$moment().format("YYYYMMDDHHmmss") var M =
); (date.getMonth() + 1 < 10
} ? "0" + (date.getMonth() + 1)
}) : date.getMonth() + 1) + "-";
} var D =
}, (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
// 报表接口 var h = date.getHours() + ":";
onGetKqalert() { var m = date.getMinutes() + ":";
getKqalert({ var s = date.getSeconds();
...this.Query, return Y + M + D + h + m + s;
page: this.tablePagination.current, },
size: this.tablePagination.pageSize, // 导出
}).then(res => { async handleExportTable() {
const { let data = [];
code, if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
data // 深度克隆避免影响页面表格展示
} = res data = this.$_.cloneDeep(this.tableSelectedRows);
if (code == 1) { } else {
this.tableSourceData = data.data let datas = this.$_.cloneDeep(
this.tablePagination.total = data.total await getKqalert({
} ...this.Query,
console.log(res) page: 1,
}) size: -1,
}, })
getWindowList() { );
windowList({ data = datas.data.data;
page: 1, data.forEach((text, i) => {
size: -1, text.index = i + 1;
siteId: JSON.parse(localStorage.getItem("siteId")) text.isaccuracy = text.isaccuracy == 1 ? "准确" : "--";
}).then(res => { text.out_time = text.out_time
const { ? this.timestampToTime(text.out_time)
code, : "--";
data });
} = res if (!data.length) return;
if (code == 1) {
this.windowData = data.data
}
})
},
openDetails() {
console.log("跳转网页");
},
//分页
changeTablePage(page) {
this.pagTableChange(page);
this.onGetKqalert();
},
checkboxonChange(val) {
if (val.length == 0) {
this.Query.have_process = ""
} else {
this.Query.have_process = "0"
}
},
QueueState(type) {
switch (type) {
case 0:
return "type1";
case 1:
return "type2";
default: export2Excel(
return "type0"; tHeader,
} filterVal,
}, data,
}, "AI效能监察异常行为数据报表" + this.$moment().format("YYYYMMDDHHmmss")
}; );
}
},
// 报表接口
onGetKqalert() {
getKqalert({
...this.Query,
page: this.tablePagination.current,
size: this.tablePagination.pageSize,
}).then((res) => {
const { code, data } = res;
if (code == 1) {
this.tableSourceData = data.data;
this.tablePagination.total = data.total;
}
console.log(res);
});
},
getWindowList() {
windowList({
page: 1,
size: -1,
siteId: JSON.parse(localStorage.getItem("siteId")),
}).then((res) => {
const { code, data } = res;
if (code == 1) {
this.windowData = data.data;
}
});
},
openDetails() {
console.log("跳转网页");
},
//分页
changeTablePage(page) {
this.pagTableChange(page);
this.onGetKqalert();
},
checkboxonChange(val) {
if (val.length == 0) {
this.Query.have_process = "";
} else {
this.Query.have_process = "0";
}
},
QueueState(type) {
switch (type) {
case 0:
return "type1";
case 1:
return "type2";
default:
return "type0";
}
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/.ant-spin-container { /deep/.ant-spin-container {
display: block; display: block;
} }
/deep/.ant-checkbox-group { /deep/.ant-checkbox-group {
width: 250px; width: 250px;
} }
.range_picker_style { .range_picker_style {
margin-right: 20px; margin-right: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -50,8 +50,7 @@ ...@@ -50,8 +50,7 @@
</template> </template>
<template slot="操作" slot-scope="text, record"> <template slot="操作" slot-scope="text, record">
<a-button type="link" style="color: #ff7370" @click="handleDel(record.id)">删除</a-button> <a-button type="link" style="color: #ff7370" @click="handleDel(record.id)">删除</a-button>
<a-button type="link" @click="openHandlingDetails(record)" <a-button type="link" @click="openHandlingDetails(record)">详情</a-button>
v-if="record.queueid == 0 && record.pjxt != 1">详情</a-button>
</template> </template>
</a-table> </a-table>
<HandlingDetails ref="HandlingDetails" /> <HandlingDetails ref="HandlingDetails" />
......
...@@ -3,34 +3,71 @@ ...@@ -3,34 +3,71 @@
<div class="content"> <div class="content">
<div class="top"> <div class="top">
<h1 class="title_text">{{ detailsForm.interfaceName }}</h1> <h1 class="title_text">{{ detailsForm.interfaceName }}</h1>
<button class="go_back" @click="$router.go(-1)">返回上一级</button> <a-button
type="primary"
class="addclass"
@click="$router.go(-1)"
style="margin-bottom: 1rem"
>返回上一级</a-button
>
</div> </div>
<a-card title="接口信息" :bordered="false" class="card_box"> <a-card title="接口信息" :bordered="false" class="card_box">
<a-descriptions> <a-descriptions>
<a-descriptions-item label="接口名称">{{ detailsForm.interfaceName }}</a-descriptions-item> <a-descriptions-item label="接口名称">{{
<a-descriptions-item label="版本号">{{ detailsForm.versionNumber }}</a-descriptions-item> detailsForm.interfaceName
<a-descriptions-item label="请求类型">{{ detailsForm.requestType == 1 ? 'GET' : 'POST' }}</a-descriptions-item>
<a-descriptions-item label="请求协议">{{ detailsForm.requestProtocol == 1 ? 'HTTP' : 'HTTPS'
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="content-type">{{ detailsForm.contentType }}</a-descriptions-item> <a-descriptions-item label="版本号">{{
<a-descriptions-item label="超时时长">{{ detailsForm.timeoutValue }}</a-descriptions-item> detailsForm.versionNumber
<a-descriptions-item label="限流策略">{{ detailsForm.limitStrategy == 1 ? '分钟' : '小时' }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="访问网络" v-if="detailsForm && detailsForm.network"> <a-descriptions-item label="请求类型">{{
<span v-for="item, idx of dict.network" v-show="detailsForm.network.indexOf(idx) != -1" :key="idx"> {{ item }} detailsForm.requestType == 1 ? "GET" : "POST"
}}</a-descriptions-item>
<a-descriptions-item label="请求协议">{{
detailsForm.requestProtocol == 1 ? "HTTP" : "HTTPS"
}}</a-descriptions-item>
<a-descriptions-item label="content-type">{{
detailsForm.contentType
}}</a-descriptions-item>
<a-descriptions-item label="超时时长"
>{{ detailsForm.timeoutValue }}</a-descriptions-item
>
<a-descriptions-item label="限流策略">{{
detailsForm.limitStrategy == 1 ? "分钟" : "小时"
}}</a-descriptions-item>
<a-descriptions-item
label="访问网络"
v-if="detailsForm && detailsForm.network"
>
<span
v-for="(item, idx) of dict.network"
v-show="detailsForm.network.indexOf(idx) != -1"
:key="idx"
>
{{ item }}
</span> </span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="接口标签" v-if="dict.interfaceTag">{{ dict.interfaceTag[detailsForm.interfaceTag] <a-descriptions-item label="接口标签" v-if="dict.interfaceTag">{{
dict.interfaceTag[detailsForm.interfaceTag]
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="接口来源" v-if="dict.interfaceSource">{{ <a-descriptions-item label="接口来源" v-if="dict.interfaceSource">{{
dict.interfaceSource[detailsForm.interfaceSource] }}</a-descriptions-item> dict.interfaceSource[detailsForm.interfaceSource]
<a-descriptions-item label="请求路径">{{ detailsForm.requestUrl }}</a-descriptions-item> }}</a-descriptions-item>
<br> <a-descriptions-item label="请求路径">{{
<a-descriptions-item label="描述" span="{3}">{{ detailsForm.description }}</a-descriptions-item> detailsForm.requestUrl
}}</a-descriptions-item>
<br />
<a-descriptions-item label="描述" span="{3}">{{
detailsForm.description
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-card> </a-card>
<a-card title="请求参数" :bordered="false" class="card_box"> <a-card title="请求参数" :bordered="false" class="card_box">
<div class="flex aic jcb mb10"> <div class="flex aic jcb mb10">
<a-radio-group v-model="requestPam.type" button-style="solid" disabled> <a-radio-group
v-model="requestPam.type"
button-style="solid"
disabled
>
<a-radio-button value="path"> 路径参数 </a-radio-button> <a-radio-button value="path"> 路径参数 </a-radio-button>
<a-radio-button value="headers"> headers </a-radio-button> <a-radio-button value="headers"> headers </a-radio-button>
<a-radio-button value="query"> query </a-radio-button> <a-radio-button value="query"> query </a-radio-button>
...@@ -38,23 +75,37 @@ ...@@ -38,23 +75,37 @@
</a-radio-group> </a-radio-group>
<div class="flex aic"> <div class="flex aic">
<div class="mr10">入参是否加密</div> <div class="mr10">入参是否加密</div>
<div>{{ detailsForm.inEncrypt == 1 ? '加密' : '不加密' }}</div> <div>{{ detailsForm.inEncrypt == 1 ? "加密" : "不加密" }}</div>
</div> </div>
</div> </div>
<a-table size="middle" bordered :row-key="(record) => record.id" :locale="{ emptyText: '无' }" :pagination="false" <a-table
:columns="table_columns" :dataSource="requestPam.table"> size="middle"
bordered
:row-key="(record) => record.id"
:locale="{ emptyText: '无' }"
:pagination="false"
:columns="table_columns"
:dataSource="requestPam.table"
>
</a-table> </a-table>
</a-card> </a-card>
<a-card title="响应数据" :bordered="false" class="card_box"> <a-card title="响应数据" :bordered="false" class="card_box">
<div class="flex aic mb10" style="justify-content: flex-end;"> <div class="flex aic mb10" style="justify-content: flex-end">
<div class="flex aic"> <div class="flex aic">
<div class="mr10">出参是否加密</div> <div class="mr10">出参是否加密</div>
<div>{{ detailsForm.outEncrypt == 1 ? '加密' : '不加密' }}</div> <div>{{ detailsForm.outEncrypt == 1 ? "加密" : "不加密" }}</div>
</div> </div>
</div> </div>
<a-table size="middle" bordered :row-key="(record) => record.id" :locale="{ emptyText: '无' }" :pagination="false" <a-table
:columns="table_columns" :dataSource="responsePam.table"> size="middle"
bordered
:row-key="(record) => record.id"
:locale="{ emptyText: '无' }"
:pagination="false"
:columns="table_columns"
:dataSource="responsePam.table"
>
</a-table> </a-table>
</a-card> </a-card>
...@@ -80,9 +131,7 @@ ...@@ -80,9 +131,7 @@
import Vue from "vue"; import Vue from "vue";
import hljs from "highlight.js"; import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css"; import "highlight.js/styles/monokai-sublime.css";
import { import { getInterfaceInfo } from "@/api/thePlatformIsSet.js";
getInterfaceInfo
} from '@/api/thePlatformIsSet.js'
Vue.directive("highlight", function (el) { Vue.directive("highlight", function (el) {
let blocks = el.querySelectorAll("pre code"); let blocks = el.querySelectorAll("pre code");
blocks.forEach((block) => { blocks.forEach((block) => {
...@@ -97,53 +146,54 @@ export default { ...@@ -97,53 +146,54 @@ export default {
requestPam: {}, requestPam: {},
responsePam: {}, responsePam: {},
dict: {}, dict: {},
table_columns: [{ table_columns: [
title: "参数名", {
align: "center", title: "参数名",
dataIndex: "name" align: "center",
}, dataIndex: "name",
{ },
title: "参数值类型", {
align: "center", title: "参数值类型",
dataIndex: "type", align: "center",
}, dataIndex: "type",
{ },
title: "默认值", {
align: "center", title: "默认值",
dataIndex: "default", align: "center",
}, dataIndex: "default",
{ },
title: "是否必填", {
align: "center", title: "是否必填",
dataIndex: "isMust", align: "center",
customRender: (text, record, index) => `${text == 1 ? '' : ''}`, dataIndex: "isMust",
}, customRender: (text, record, index) => `${text == 1 ? "" : ""}`,
{ },
title: "描述", {
align: "center", title: "描述",
dataIndex: "describe", align: "center",
width: 200 dataIndex: "describe",
} width: 200,
},
], ],
allResData: null, allResData: null,
errJson: { "msg": "请选择待查看产品接口信息", "code": -1 } errJson: { msg: "请选择待查看产品接口信息", code: -1 },
}; };
}, },
mounted() { mounted() {
this.getInfo() this.getInfo();
}, },
methods: { methods: {
getInfo() { getInfo() {
getInterfaceInfo({ id: this.$route.query.id }).then(res => { getInterfaceInfo({ id: this.$route.query.id }).then((res) => {
this.allResData = res this.allResData = res;
res.data.network = res.data.network.split(',') res.data.network = res.data.network.split(",");
this.detailsForm = res.data this.detailsForm = res.data;
this.requestPam = JSON.parse(res.data.requestParameters) this.requestPam = JSON.parse(res.data.requestParameters);
this.responsePam = JSON.parse(res.data.responseParameters) this.responsePam = JSON.parse(res.data.responseParameters);
this.dict = res.dict this.dict = res.dict;
}) });
}, },
toJson(res) { toJson(res) {
return JSON.stringify(res); return JSON.stringify(res);
...@@ -190,39 +240,39 @@ export default { ...@@ -190,39 +240,39 @@ export default {
position: relative; position: relative;
z-index: 1; z-index: 1;
&:hover { // &:hover {
color: rgb(255, 255, 255); // color: rgb(255, 255, 255);
} // }
&::before, // &::before,
&::after { // &::after {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 0%; // top: 0%;
left: 0%; // left: 0%;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
background: rgba(128, 128, 128, 0.096); // background: rgba(128, 128, 128, 0.096);
backdrop-filter: blur(10px); // backdrop-filter: blur(10px);
z-index: -1; // z-index: -1;
transition: all 0.4s; // transition: all 0.4s;
} // }
&::after { // &::after {
z-index: -2; // z-index: -2;
transition: all 0.4s; // transition: all 0.4s;
} // }
&:hover::before { // &:hover::before {
background: rgb(0, 0, 0, 0.315); // background: rgb(0, 0, 0, 0.315);
// border-radius: 10px; // // border-radius: 10px;
} // }
&:hover::after { // &:hover::after {
background: linear-gradient(to right, #cb6ce6, #38b6ff); // background: linear-gradient(to right, #cb6ce6, #38b6ff);
// border-radius: 10px; // // border-radius: 10px;
transform: scale(1.07, 1.2) rotateX(180deg); // transform: scale(1.07, 1.2) rotateX(180deg);
} // }
} }
} }
...@@ -236,7 +286,7 @@ export default { ...@@ -236,7 +286,7 @@ export default {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
&+.card_box { & + .card_box {
margin-top: 1rem; margin-top: 1rem;
} }
} }
...@@ -248,16 +298,22 @@ export default { ...@@ -248,16 +298,22 @@ export default {
width: 100%; width: 100%;
height: @headerH; height: @headerH;
background: rgb(59, 135, 255); background: rgb(59, 135, 255);
background: -moz-linear-gradient(174deg, background: -moz-linear-gradient(
rgba(59, 135, 255, 1) 24%, 174deg,
rgba(108, 53, 247, 1) 85%); rgba(59, 135, 255, 1) 24%,
background: -webkit-linear-gradient(174deg, rgba(108, 53, 247, 1) 85%
rgba(59, 135, 255, 1) 24%, );
rgba(108, 53, 247, 1) 85%); background: -webkit-linear-gradient(
background: linear-gradient(174deg, 174deg,
rgba(59, 135, 255, 1) 24%, rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%); rgba(108, 53, 247, 1) 85%
);
background: linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff", endColorstr="#6c35f7", GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff", endColorstr="#6c35f7", GradientType=1);
} }
} }
</style> </style>
\ No newline at end of file
...@@ -2,39 +2,73 @@ ...@@ -2,39 +2,73 @@
<div class="PoliticsShow-Container"> <div class="PoliticsShow-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<button class="add_btn" @click="openDetails()"> <a-button type="primary" @click="openDetails()" class="addclass"
<span>新增</span> >新增</a-button
</button> >
</div> </div>
<span> <span>
<a-input allowClear v-model="query.interfaceName" placeholder="请输入接口名称查询"> <a-input
allowClear
v-model="query.interfaceName"
placeholder="请输入接口名称查询"
>
<a-icon slot="prefix" type="search" /> <a-icon slot="prefix" type="search" />
</a-input> </a-input>
<a-select v-model="query.interfaceSource"> <a-select v-model="query.interfaceSource">
<a-select-option value="">所有来源</a-select-option> <a-select-option value="">所有来源</a-select-option>
<a-select-option v-for="(item, index) of dict.interfaceSource" :key="index" :value="index"> <a-select-option
v-for="(item, index) of dict.interfaceSource"
:key="index"
:value="index"
>
{{ item }} {{ item }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select v-model="query.interfaceTag"> <a-select v-model="query.interfaceTag">
<a-select-option value="">所有标签</a-select-option> <a-select-option value="">所有标签</a-select-option>
<a-select-option v-for="(item, index) of dict.interfaceTag" :key="index" :value="index"> <a-select-option
v-for="(item, index) of dict.interfaceTag"
:key="index"
:value="index"
>
{{ item }} {{ item }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<button class="search_btn" @click="getList()">搜索</button> <a-button type="primary" class="addclass" @click="getList()"
>搜索</a-button
>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
<a-table size="small" bordered :row-key="(record) => record.id" :scroll="{ y: 590 }" :pagination="tablePagination" <a-table
@change="pagTableChange" :loading="tableLoading" :columns="tableHeaders" :dataSource="tableSourceData"> size="small"
<template slot="network" slot-scope="text, record,index"> bordered
<span v-for="item, idx of dict.network" v-show="text.indexOf(idx) != -1" :key="idx"> {{ item }} </span> :row-key="(record) => record.id"
:scroll="{ y: 590 }"
:pagination="tablePagination"
@change="pagTableChange"
:loading="tableLoading"
:columns="tableHeaders"
:dataSource="tableSourceData"
>
<template slot="network" slot-scope="text, record, index">
<span
v-for="(item, idx) of dict.network"
v-show="text.indexOf(idx) != -1"
:key="idx"
>
{{ item }}
</span>
</template> </template>
<template slot="operation" slot-scope="text, record, index"> <template slot="operation" slot-scope="text, record, index">
<a-button type="link" @click="openDetails(record)">编辑</a-button> <a-button type="link" @click="openDetails(record)">编辑</a-button>
<a-popconfirm title="确定要删除此应用吗?" ok-text="确定" cancel-text="取消" @confirm="delRow(record)"> <a-popconfirm
title="确定要删除此应用吗?"
ok-text="确定"
cancel-text="取消"
@confirm="delRow(record)"
>
<a-button type="link" style="color: #ff4420">删除</a-button> <a-button type="link" style="color: #ff4420">删除</a-button>
</a-popconfirm> </a-popconfirm>
</template> </template>
...@@ -47,7 +81,10 @@ ...@@ -47,7 +81,10 @@
<script> <script>
import table from "@/mixins/table"; import table from "@/mixins/table";
import Details from "./components/Details.vue"; import Details from "./components/Details.vue";
import { getInterfaceList, getInterfaceDelete } from '@/api/thePlatformIsSet.js' import {
getInterfaceList,
getInterfaceDelete,
} from "@/api/thePlatformIsSet.js";
export default { export default {
mixins: [table], mixins: [table],
name: "PortalAdminVueAlerting", name: "PortalAdminVueAlerting",
...@@ -71,19 +108,21 @@ export default { ...@@ -71,19 +108,21 @@ export default {
title: "请求类型", title: "请求类型",
align: "center", align: "center",
dataIndex: "requestType", dataIndex: "requestType",
customRender: (text, record, index) => `${record.requestType == 1 ? 'POST' : 'GET'}`, customRender: (text, record, index) =>
`${record.requestType == 1 ? "POST" : "GET"}`,
}, },
{ {
title: "标签", title: "标签",
align: "center", align: "center",
dataIndex: "interfaceTag", dataIndex: "interfaceTag",
customRender: (text, record, index) => this.dict.interfaceTag[text] customRender: (text, record, index) => this.dict.interfaceTag[text],
}, },
{ {
title: "请求协议", title: "请求协议",
align: "center", align: "center",
dataIndex: "requestProtocol", dataIndex: "requestProtocol",
customRender: (text, record, index) => this.dict.requestProtocol[text] customRender: (text, record, index) =>
this.dict.requestProtocol[text],
}, },
{ {
title: "版本", title: "版本",
...@@ -94,13 +133,15 @@ export default { ...@@ -94,13 +133,15 @@ export default {
title: "来源", title: "来源",
align: "center", align: "center",
dataIndex: "interfaceSource", dataIndex: "interfaceSource",
customRender: (text, record, index) => this.dict.interfaceSource[text] customRender: (text, record, index) =>
this.dict.interfaceSource[text],
}, },
{ {
title: "策略", title: "策略",
align: "center", align: "center",
dataIndex: "limitStrategy", dataIndex: "limitStrategy",
customRender: (text, record, index) => `${record.limitStrategy == 1 ? '分钟' : '小时'}`, customRender: (text, record, index) =>
`${record.limitStrategy == 1 ? "分钟" : "小时"}`,
}, },
{ {
title: "访问网络", title: "访问网络",
...@@ -108,7 +149,7 @@ export default { ...@@ -108,7 +149,7 @@ export default {
dataIndex: "network", dataIndex: "network",
scopedSlots: { scopedSlots: {
customRender: "network", customRender: "network",
} },
}, },
{ {
...@@ -129,12 +170,10 @@ export default { ...@@ -129,12 +170,10 @@ export default {
}, },
tablePagination: { tablePagination: {
current: 1, current: 1,
pageSize: 10 pageSize: 10,
},
dict: {
}, },
total: 0 dict: {},
total: 0,
}; };
}, },
components: { components: {
...@@ -148,20 +187,16 @@ export default { ...@@ -148,20 +187,16 @@ export default {
getInterfaceList({ getInterfaceList({
page: this.tablePagination.current, page: this.tablePagination.current,
size: this.tablePagination.pageSize, size: this.tablePagination.pageSize,
...this.query ...this.query,
}).then(res => { }).then((res) => {
if (res.code == 1) { if (res.code == 1) {
let { let { data, total, dict } = res.data;
data,
total,
dict
} = res.data;
this.dict = dict; this.dict = dict;
this.tableSourceData = data; this.tableSourceData = data;
this.tablePagination.total = total; this.tablePagination.total = total;
return data return data;
} }
}) });
}, },
QueueState(type) { QueueState(type) {
switch (type) { switch (type) {
...@@ -176,21 +211,21 @@ export default { ...@@ -176,21 +211,21 @@ export default {
}, },
delRow(item) { delRow(item) {
getInterfaceDelete({ getInterfaceDelete({
id: item.id id: item.id,
}).then((res) => { }).then((res) => {
let { code, msg } = res let { code, msg } = res;
if (code == 1) { if (code == 1) {
this.$message.success('删除成功'); this.$message.success("删除成功");
this.getList() this.getList();
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }
}) });
}, },
openDetails(item) { openDetails(item) {
if (item) { if (item) {
this.$refs.Details.modalInfo.title = "编辑接口"; this.$refs.Details.modalInfo.title = "编辑接口";
this.$refs.Details.getInfo(item.id) this.$refs.Details.getInfo(item.id);
} else { } else {
this.$refs.Details.modalInfo.title = "新增接口"; this.$refs.Details.modalInfo.title = "新增接口";
} }
...@@ -199,8 +234,8 @@ export default { ...@@ -199,8 +234,8 @@ export default {
}, },
//分页 //分页
pagTableChange(page) { pagTableChange(page) {
this.tablePagination.current = page.current this.tablePagination.current = page.current;
this.tablePagination.pageSize = page.pageSize this.tablePagination.pageSize = page.pageSize;
this.getList(); this.getList();
}, },
}, },
...@@ -219,7 +254,7 @@ export default { ...@@ -219,7 +254,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&>div { & > div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -275,7 +310,7 @@ export default { ...@@ -275,7 +310,7 @@ export default {
} }
} }
&>span { & > span {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -360,13 +395,10 @@ export default { ...@@ -360,13 +395,10 @@ export default {
/deep/.ant-btn-link { /deep/.ant-btn-link {
padding: 0 !important; padding: 0 !important;
&+.ant-btn-link { & + .ant-btn-link {
margin-left: 1rem !important; margin-left: 1rem !important;
} }
} }
} }
} }
</style> </style>
...@@ -114,4 +114,3 @@ export default { ...@@ -114,4 +114,3 @@ export default {
} }
} }
</style> </style>
...@@ -2,35 +2,70 @@ ...@@ -2,35 +2,70 @@
<div class="PoliticsShow-Container"> <div class="PoliticsShow-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<button class="add_btn" @click="openDetails()"> <a-button
type="primary"
class="addclass"
@click="openDetails()"
>
<span>新增</span> <span>新增</span>
</button> </a-button>
</div> </div>
<span> <span>
<a-input allowClear v-model="searchForm.appName" placeholder="请输入应用名称查询"> <a-input
allowClear
v-model="searchForm.appName"
placeholder="请输入应用名称查询"
>
<a-icon slot="prefix" type="search" /> <a-icon slot="prefix" type="search" />
</a-input> </a-input>
<a-select v-model="searchForm.deveLanguage"> <a-select v-model="searchForm.deveLanguage">
<a-select-option value="">全部</a-select-option> <a-select-option value="">全部</a-select-option>
<a-select-option v-for="(item, index) of dict.deveLanguage" :key="index" :value="index"> <a-select-option
v-for="(item, index) of dict.deveLanguage"
:key="index"
:value="index"
>
{{ item }} {{ item }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<button class="search_btn" @click="getList()">搜索</button> <a-button
type="primary"
class="addclass"
@click="getList()"
>搜索</a-button
>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
<a-table size="small" bordered :row-key="(record) => record.id" :scroll="{ y: 590 }" :pagination="tablePagination" <a-table
@change="pagTableChange" :loading="tableLoading" :columns="tableHeaders" :dataSource="tableSourceData"> size="small"
bordered
:row-key="(record) => record.id"
:scroll="{ y: 590 }"
:pagination="tablePagination"
@change="pagTableChange"
:loading="tableLoading"
:columns="tableHeaders"
:dataSource="tableSourceData"
>
<template slot="operation" slot-scope="text, record, index"> <template slot="operation" slot-scope="text, record, index">
<a-button type="link" v-if="record.appFileUrl" @click="handleDowload(record.appFileUrl)">下载应用</a-button> <a-button
type="link"
v-if="record.appFileUrl"
@click="handleDowload(record.appFileUrl)"
>下载应用</a-button
>
<a-button type="link" @click="openDetails(record)">编辑</a-button> <a-button type="link" @click="openDetails(record)">编辑</a-button>
<a-popconfirm title="确定要删除此应用吗?" ok-text="确定" cancel-text="取消" @confirm="delRow(record)"> <a-popconfirm
title="确定要删除此应用吗?"
ok-text="确定"
cancel-text="取消"
@confirm="delRow(record)"
>
<a-button type="link" style="color: #ff4420">删除</a-button> <a-button type="link" style="color: #ff4420">删除</a-button>
</a-popconfirm> </a-popconfirm>
</template> </template>
</a-table> </a-table>
<Details ref="Details" :deveLanguage="dict.deveLanguage" /> <Details ref="Details" :deveLanguage="dict.deveLanguage" />
...@@ -42,9 +77,7 @@ ...@@ -42,9 +77,7 @@
import { getApps, deleteApps } from "@/api/thePlatformIsSet.js"; import { getApps, deleteApps } from "@/api/thePlatformIsSet.js";
import table from "@/mixins/table"; import table from "@/mixins/table";
import Details from "./components/Details.vue"; import Details from "./components/Details.vue";
let obj = { let obj = {};
}
export default { export default {
mixins: [table], mixins: [table],
name: "PortalAdminVueAlerting", name: "PortalAdminVueAlerting",
...@@ -84,13 +117,14 @@ export default { ...@@ -84,13 +117,14 @@ export default {
title: "是否启用", title: "是否启用",
align: "center", align: "center",
dataIndex: "isEnable", dataIndex: "isEnable",
customRender: (text, record, index) => text == 1 ? '' : "", customRender: (text, record, index) => (text == 1 ? "" : ""),
}, },
{ {
title: "上传时间", title: "上传时间",
align: "center", align: "center",
dataIndex: "createTime", dataIndex: "createTime",
customRender: (text, record, index) => this.$moment(text).format("YYYY年MM月DD日 HH:mm:ss"), customRender: (text, record, index) =>
this.$moment(text).format("YYYY年MM月DD日 HH:mm:ss"),
}, },
{ {
title: "操作", title: "操作",
...@@ -104,7 +138,7 @@ export default { ...@@ -104,7 +138,7 @@ export default {
], ],
tablePagination: { tablePagination: {
current: 1, current: 1,
pageSize: 10 pageSize: 10,
}, },
searchForm: { searchForm: {
deveLanguage: "", deveLanguage: "",
...@@ -112,8 +146,8 @@ export default { ...@@ -112,8 +146,8 @@ export default {
}, },
dict: { dict: {
deveLanguage: {}, deveLanguage: {},
isEnable: {} isEnable: {},
} },
}; };
}, },
components: { components: {
...@@ -132,50 +166,45 @@ export default { ...@@ -132,50 +166,45 @@ export default {
...search, ...search,
}).then((res) => { }).then((res) => {
if (res.code == 1) { if (res.code == 1) {
let { let { data, total, dict } = res.data;
data,
total,
dict
} = res.data;
this.dict = dict; this.dict = dict;
this.tableSourceData = data; this.tableSourceData = data;
this.tablePagination.total = total; this.tablePagination.total = total;
return data return data;
} }
}) });
}, },
//分页 //分页
pagTableChange(page) { pagTableChange(page) {
this.tablePagination.current = page.current this.tablePagination.current = page.current;
this.tablePagination.pageSize = page.pageSize this.tablePagination.pageSize = page.pageSize;
this.getList(); this.getList();
}, },
delRow(item) { delRow(item) {
deleteApps({ deleteApps({
id: item.id id: item.id,
}).then((res) => { }).then((res) => {
console.log(res) console.log(res);
let { code, msg } = res let { code, msg } = res;
if (code == 1) { if (code == 1) {
this.$message.success('删除成功'); this.$message.success("删除成功");
this.getList() this.getList();
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }
}) });
}, },
handleDowload(url) { handleDowload(url) {
let arr = url.split('/') let arr = url.split("/");
const a = document.createElement("a"); const a = document.createElement("a");
a.href = process.env.VUE_APP_API_BASE_URL + '/' + url; a.href = process.env.VUE_APP_API_BASE_URL + "/" + url;
a.download = arr[arr.length - 1]; a.download = arr[arr.length - 1];
a.click(); a.click();
}, },
openDetails(item) { openDetails(item) {
if (item) { if (item) {
this.$refs.Details.modalInfo.title = "编辑应用"; this.$refs.Details.modalInfo.title = "编辑应用";
this.$refs.Details.getInfo(item.id) this.$refs.Details.getInfo(item.id);
} else { } else {
this.$refs.Details.modalInfo.title = "新增应用"; this.$refs.Details.modalInfo.title = "新增应用";
} }
...@@ -188,11 +217,10 @@ export default { ...@@ -188,11 +217,10 @@ export default {
versionInfo: "", versionInfo: "",
appFileUrl: "", appFileUrl: "",
isEnable: false, isEnable: false,
} };
this.$refs.Details.uploadInfo.fileList = [] this.$refs.Details.uploadInfo.fileList = [];
// this.$refs.Details.appForm.resetFields() // this.$refs.Details.appForm.resetFields()
this.$refs.Details.modalInfo.width = "30%"; this.$refs.Details.modalInfo.width = "30%";
}, },
}, },
}; };
...@@ -210,7 +238,7 @@ export default { ...@@ -210,7 +238,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&>div { & > div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -266,7 +294,7 @@ export default { ...@@ -266,7 +294,7 @@ export default {
} }
} }
&>span { & > span {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -351,13 +379,10 @@ export default { ...@@ -351,13 +379,10 @@ export default {
/deep/.ant-btn-link { /deep/.ant-btn-link {
padding: 0 !important; padding: 0 !important;
&+.ant-btn-link { & + .ant-btn-link {
margin-left: 1rem !important; margin-left: 1rem !important;
} }
} }
} }
} }
</style> </style>
...@@ -110,4 +110,3 @@ export default { ...@@ -110,4 +110,3 @@ export default {
} }
} }
</style> </style>
...@@ -2,24 +2,49 @@ ...@@ -2,24 +2,49 @@
<div class="PoliticsShow-Container"> <div class="PoliticsShow-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<button class="add_btn" @click="openDetails()"> <a-button type="primary" class="addclass" @click="openDetails()">
<span>新增</span> <span>新增</span>
</button> </a-button>
</div> </div>
<span> <span>
<a-input allowClear v-model="searchName" placeholder="请输入资料名称查询"> <a-input
allowClear
v-model="searchName"
placeholder="请输入资料名称查询"
>
<a-icon slot="prefix" type="search" /> <a-icon slot="prefix" type="search" />
</a-input> </a-input>
<button class="search_btn" @click="getList()">搜索</button> <a-button type="primary" class="addclass" @click="getList()"
>搜索</a-button
>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
<a-table size="small" bordered :row-key="(record) => record.id" :scroll="{ y: 590 }" :pagination="tablePagination" <a-table
@change="pagTableChange" :loading="tableLoading" :columns="tableHeaders" :dataSource="tableSourceData"> size="small"
bordered
:row-key="(record) => record.id"
:scroll="{ y: 590 }"
:pagination="tablePagination"
@change="pagTableChange"
:loading="tableLoading"
:columns="tableHeaders"
:dataSource="tableSourceData"
>
<template slot="operation" slot-scope="text, record, index"> <template slot="operation" slot-scope="text, record, index">
<a-button type="link" v-if="record.docFileUrl" @click="handleDowload(record.docFileUrl)">下载</a-button> <a-button
type="link"
v-if="record.docFileUrl"
@click="handleDowload(record.docFileUrl)"
>下载</a-button
>
<a-button type="link" @click="openDetails(record)">编辑</a-button> <a-button type="link" @click="openDetails(record)">编辑</a-button>
<a-popconfirm title="确定要删除此应用吗?" ok-text="确定" cancel-text="取消" @confirm="delRow(record)"> <a-popconfirm
title="确定要删除此应用吗?"
ok-text="确定"
cancel-text="取消"
@confirm="delRow(record)"
>
<a-button type="link" style="color: #ff4420">删除</a-button> <a-button type="link" style="color: #ff4420">删除</a-button>
</a-popconfirm> </a-popconfirm>
</template> </template>
...@@ -68,7 +93,8 @@ export default { ...@@ -68,7 +93,8 @@ export default {
title: "上传时间", title: "上传时间",
align: "center", align: "center",
dataIndex: "createTime", dataIndex: "createTime",
customRender: (text, record, index) => this.$moment(text).format("YYYY年MM月DD日 HH:mm:ss"), customRender: (text, record, index) =>
this.$moment(text).format("YYYY年MM月DD日 HH:mm:ss"),
}, },
{ {
...@@ -84,7 +110,7 @@ export default { ...@@ -84,7 +110,7 @@ export default {
searchName: undefined, searchName: undefined,
tablePagination: { tablePagination: {
current: 1, current: 1,
pageSize: 10 pageSize: 10,
}, },
}; };
}, },
...@@ -105,49 +131,45 @@ export default { ...@@ -105,49 +131,45 @@ export default {
...search, ...search,
}).then((res) => { }).then((res) => {
if (res.code == 1) { if (res.code == 1) {
let { let { data, total, dict } = res.data;
data,
total,
dict
} = res.data;
this.dict = dict; this.dict = dict;
this.tableSourceData = data; this.tableSourceData = data;
this.tablePagination.total = total; this.tablePagination.total = total;
return data return data;
} }
}) });
}, },
//分页 //分页
pagTableChange(page) { pagTableChange(page) {
this.tablePagination.current = page.current this.tablePagination.current = page.current;
this.tablePagination.pageSize = page.pageSize this.tablePagination.pageSize = page.pageSize;
this.getList(); this.getList();
}, },
delRow(item) { delRow(item) {
deleteDocument({ deleteDocument({
id: item.id id: item.id,
}).then((res) => { }).then((res) => {
console.log(res) console.log(res);
let { code, msg } = res let { code, msg } = res;
if (code == 1) { if (code == 1) {
this.$message.success('删除成功'); this.$message.success("删除成功");
this.getList() this.getList();
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }
}) });
}, },
handleDowload(url) { handleDowload(url) {
let arr = url.split('/') let arr = url.split("/");
const a = document.createElement("a"); const a = document.createElement("a");
a.href = process.env.VUE_APP_API_BASE_URL + '/' + url; a.href = process.env.VUE_APP_API_BASE_URL + "/" + url;
a.download = arr[arr.length - 1]; a.download = arr[arr.length - 1];
a.click(); a.click();
}, },
openDetails(item) { openDetails(item) {
if (item) { if (item) {
this.$refs.Details.modalInfo.title = "编辑材料"; this.$refs.Details.modalInfo.title = "编辑材料";
this.$refs.Details.getInfo(item.id) this.$refs.Details.getInfo(item.id);
} else { } else {
this.$refs.Details.modalInfo.title = "新增材料"; this.$refs.Details.modalInfo.title = "新增材料";
} }
...@@ -170,7 +192,7 @@ export default { ...@@ -170,7 +192,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&>div { & > div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -226,7 +248,7 @@ export default { ...@@ -226,7 +248,7 @@ export default {
} }
} }
&>span { & > span {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -311,13 +333,10 @@ export default { ...@@ -311,13 +333,10 @@ export default {
/deep/.ant-btn-link { /deep/.ant-btn-link {
padding: 0 !important; padding: 0 !important;
&+.ant-btn-link { & + .ant-btn-link {
margin-left: 1rem !important; margin-left: 1rem !important;
} }
} }
} }
} }
</style> </style>
...@@ -110,4 +110,3 @@ export default { ...@@ -110,4 +110,3 @@ export default {
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment