|
|
@@ -1,5 +1,423 @@
|
|
|
<template>
|
|
|
- <div class="about">
|
|
|
- <h1>This is consult page</h1>
|
|
|
+ <div class="consult">
|
|
|
+
|
|
|
+ <div class="enterprise-item-box">
|
|
|
+ <div v-for="(item, idx) in titleList" :key="idx" :class="{ active: activeTop === idx }" class="enterprise-item-name" @click="change(idx,'top')">
|
|
|
+ {{ item}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="top-chart" v-if="activeTop === 0">
|
|
|
+ <div class="chart-box" >
|
|
|
+ <div class="chart-title">最新诉求数据排行月报</div>
|
|
|
+ <annular :list="annularList"></annular>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="baseInfo" v-else-if="activeTop === 1">
|
|
|
+ <div class="data-title-box">
|
|
|
+ <div class="title-line"></div>
|
|
|
+ <div class="title-font">
|
|
|
+ <div style="text-align: left">政府部门</div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div style="margin-right: 25px">总量：{{dataInfo.total}}条</div>
|
|
|
+ <div>已回复量：{{dataInfo.reply}}条</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-place-box">
|
|
|
+ <div class="place-box" v-for="(item,index) in dataPlaceList" :key="index">
|
|
|
+ <div class="place-title">{{item.name}}</div>
|
|
|
+ <div class="margin-bottom-10">总受理量：{{item.total}}条</div>
|
|
|
+ <div>总回复量：{{item.reply}}条</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="enterprise-item-box" v-show="activeTop!== 1">
|
|
|
+ <div v-for="(item, idx) in footerList" :key="idx" :class="{ active: activeFooter === idx }" class="enterprise-item-name" @click="change(idx,'footer')">
|
|
|
+ {{ item}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="baseInfo" v-if="activeFooter === 0 && activeTop!== 1">
|
|
|
+ <div class="level-title">部门排行</div>
|
|
|
+ <div class="level-box">
|
|
|
+ <div class="level-content" v-for="(item,index) in replyTopList" :key="index" :class="{isBorder: index === replyTopList.length -1}">
|
|
|
+ <div :class="{ isTop: index < 3 }" class="index-class">{{index + 1}}</div>
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <div>{{item.rate}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-border"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="baseInfo" v-else-if="activeFooter === 1 && activeTop!== 1">
|
|
|
+ <div class="level-box">
|
|
|
+ <div class="level-content" v-for="(item,index) in replyTopList" :key="index" :class="{isBorder: index === replyTopList.length -1}">
|
|
|
+ <div :class="{ isTop: index < 3 }" class="index-class">{{index + 1}}</div>
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <div>{{item.rate}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-border"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div v-show="activeTop!== 1">
|
|
|
+ <div class="level-title appeal-title">热门诉求排行</div>
|
|
|
+ <div class="level-box">
|
|
|
+ <div class="level-content" v-for="(item,index) in replyTopList" :key="index" :class="{isBorder: index === replyTopList.length -1}">
|
|
|
+ <div :class="{ isTop: index < 3}" class="index-class">{{index + 1}}</div>
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <div>{{item.rate}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import annular from '../../components/annularChart'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ annular,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ titleList: ["诉求月报", "数据统计"],
|
|
|
+ footerList: ["回复率前十", "受理量前十"],
|
|
|
+ activeTop: 0,
|
|
|
+ activeFooter:0,
|
|
|
+ shareBaseUrl:"https://kiq.xazhima.com/",
|
|
|
+ annularList:[
|
|
|
+ { value: 1048, name: '公共安全' },
|
|
|
+ { value: 735, name: '民生保障' },
|
|
|
+ { value: 580, name: '市政配套' },
|
|
|
+ { value: 484, name: '城市建设' },
|
|
|
+ { value: 300, name: '政务服务' },
|
|
|
+ { value: 623, name: '其他' }
|
|
|
+ ],
|
|
|
+ dataInfo:{
|
|
|
+ total:4785,
|
|
|
+ reply:4671
|
|
|
+ },
|
|
|
+ dataPlaceList:[
|
|
|
+ {
|
|
|
+ name:'热线受理中心',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'人社民政局',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'教育卫体局',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'太平镇街办',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'北杜街办',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'规划与住房城乡建设局',
|
|
|
+ total:2957,
|
|
|
+ reply:2956
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ replyTopList:[
|
|
|
+ {
|
|
|
+ name:'空港市政公司',
|
|
|
+ rate:'100.00%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委、管委会办公室',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委组织部（编办、统战部）',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'综保办',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'空港城发公司',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委宣传部',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'空港置业公司',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委、管委会办公室',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委组织部（编办、统战部）',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'党委组织部（编办、统战部）',
|
|
|
+ rate:'100.00%'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ change(idx,pos) {
|
|
|
+ if(pos === 'top'){
|
|
|
+ this.activeTop = idx;
|
|
|
+ }else {
|
|
|
+ this.activeFooter = idx
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCompanyInfo(id) {
|
|
|
+ let that = this;
|
|
|
+ that.$api.totalApi.byIdApi(id,'common','company','info_by_id',0).then(res=>{
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.infoObj = res.data.data;
|
|
|
+ let {
|
|
|
+ name,
|
|
|
+ pic_url,
|
|
|
+ representative,
|
|
|
+ found_date,
|
|
|
+ capital,
|
|
|
+ code,
|
|
|
+ industry_name,
|
|
|
+ park_name,
|
|
|
+ work_address,
|
|
|
+ rigiser_address,
|
|
|
+ web_url,
|
|
|
+ phone,
|
|
|
+ work_range,
|
|
|
+ } = res.data.data;
|
|
|
+ this.info = {
|
|
|
+ name,
|
|
|
+ pic_url,
|
|
|
+ representative,
|
|
|
+ found_date,
|
|
|
+ capital,
|
|
|
+ code,
|
|
|
+ industry_name,
|
|
|
+ park_name,
|
|
|
+ work_address,
|
|
|
+ rigiser_address,
|
|
|
+ web_url,
|
|
|
+ phone,
|
|
|
+ work_range,
|
|
|
+ };
|
|
|
+ this.info.capital = this.info.capital + '万元'
|
|
|
+ this.model = {
|
|
|
+ title: "",
|
|
|
+ item: [
|
|
|
+ {
|
|
|
+ name: "法定代表人",
|
|
|
+ value: [this.info.representative],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "成立日期",
|
|
|
+ value: [this.info.found_date],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "注册资本",
|
|
|
+ value: [this.info.capital],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "统一社会信用代码",
|
|
|
+ value: [this.info.code],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "所属行业",
|
|
|
+ value: [this.info.industry_name],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "所属园区",
|
|
|
+ value: [this.info.park_name],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "经营范围",
|
|
|
+ value: [this.info.work_range],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "地址",
|
|
|
+ value: [this.info.rigiser_address],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "网址",
|
|
|
+ value: [this.info.web_url],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "电话",
|
|
|
+ value: [this.info.phone],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.companyLogo = this.info.pic_url ? this.shareBaseUrl + this.info.pic_url : require('../../assets/default.png');
|
|
|
+ this.companyName = this.info.name;
|
|
|
+ this.isShow = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getProductInfo(id) {
|
|
|
+ let that = this;
|
|
|
+ that.$api.totalApi.byIdApi(id,'common','company_product','list',1).then(res=>{
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ let list = res.data.data.list;
|
|
|
+ list.forEach((e, i) => {
|
|
|
+ e.pic_url = e.pic_url ? this.shareBaseUrl + e.pic_url : require('../../assets/default.png')
|
|
|
+ });
|
|
|
+ this.productList = list;
|
|
|
+ console.log(this.productList);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+ .consult {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .top-chart {
|
|
|
+ height: 45%;
|
|
|
+ border-bottom: 8px solid #e7e7e7;
|
|
|
+ margin-bottom: 20px ;
|
|
|
+ }
|
|
|
+ .enterprise-item-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ margin: 10px 0 20px 0;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .enterprise-item-name {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 3px solid #02a7f0;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #02a7f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-title {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .chart-box {
|
|
|
+ width: 100%;
|
|
|
+ height:90%;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .data-title-box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .title-line {
|
|
|
+ border-left: 5px solid cornflowerblue;
|
|
|
+ height: 65px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .title-font {
|
|
|
+ font-size: 19px;
|
|
|
+ height: 65px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .data-place-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .place-box {
|
|
|
+ width: 42%;
|
|
|
+ padding: 30px 10px 30px 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0 3px 6px;
|
|
|
+ }
|
|
|
+ .place-title {
|
|
|
+ color: #53BFEC;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .margin-bottom-10 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .level-title {
|
|
|
+ border-left: 3px solid #02A7F0;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .level-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 20px 15px 20px;
|
|
|
+ border-bottom: 1px dashed #e7e7e7;
|
|
|
+ }
|
|
|
+ .index-class {
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #d7d7d7;
|
|
|
+ color: #fff;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .isTop {
|
|
|
+ background-color: #02A7F0;
|
|
|
+ }
|
|
|
+ .isBorder {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .appeal-title {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .bottom-border {
|
|
|
+ width: 100%;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #e7e7e7;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+</style>
|
