qianshanNucleicContrast/ruoyi-ui/src/views/index.vue

<template>
  <div class="dashboard-editor-container">
    <!-- <div class="header">
      <p @click="day(1)" :class="[dayList == 1 ? 'heade_cod' : '']">天</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(2)" :class="[dayList == 2 ? 'heade_cod' : '']">周</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(3)" :class="[dayList == 3 ? 'heade_cod' : '']">月</p>
    </div> -->
    <el-row style=" margin-top: 20px;">
      <el-col :xs="24" :sm="24">
        <el-row>
          <div class="njues">
            <!-- <keep-alive :include="cachedViews">
                <router-view :key="key" /> -->
                <div style=" text-align: center; " class="hedse_radt" @click="wbhde">
                  <div class="hedse_radtone">
                    <p>五保户</p>
                    <p>6<span>人</span></p>
                  </div>
                </div>
              <!-- </keep-alive> -->
            <div style=" text-align: center; " class="hedse_radts hedse_radt" @click="dbhde">
              <div class="hedse_radtone">
                <p>低保户</p>
                <p>3<span>人</span></p>
              </div>
            </div>
            <div style=" text-align: center; " class="hedse_radtss hedse_radt" @click="pkde">
              <div class="hedse_radtone">
                <p>贫困户</p>
                <p>5<span>人</span></p>
              </div>
            </div>
            <div style=" text-align: center; " class="hedse_radt hedse_radtsss" @click="dyde">
              <div class="hedse_radtone">
                <p>党员</p>
                <p>2<span>人</span></p>
              </div>
            </div>
            <div style=" text-align: center; " class="hedse_radt hedse_radtssss" @click="twjrde">
              <div class="hedse_radtone">
                <p>退伍军人</p>
                <p>1<span>人</span></p>
              </div>
            </div>

          </div>
        </el-row>
      </el-col>
    </el-row>
   <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
     <el-col :xs="24" :sm="14" style="padding-left: 0;">
       <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
         <p class="dp_zhudtitle">人员类型统计柱状图 </p>
         <bar-chart :chart-data="panelChartDatazhuzh" />
       </div>
     </el-col>
     <el-col   :xs="24" :sm="10" style="padding-right: 0;" >
       <div class="chart-wrapper dp_zhud"  style=" padding: 30px; ">
          <p class="dp_zhudtitle">人员类型比率 </p>
         <pie-chart :chart-data="panelChartDatayuanh" />
       </div>
     </el-col>
   </el-row>
   <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
     <line-chart :chart-data="lineChartData"  v-if="nhye"/></el-row> -->

    <!-- 列表 -->

<!-- v-if="panelChartDatas.dqdw == '潜山市'" -->
    <div class="tabsty" >
      <div class="tabbuut">
        <p>各乡镇人口信息表</p>
        <!-- <el-button  size="small" @click="handleExport" type="primary">导出</el-button> -->
      </div>
      <!-- panelChartDatas.townDatas -->
      <!-- tableData -->
      <el-table v-loading="loading" :data="tableData"
        style="width: 100%;"  stripe  height="280" :show-overflow-tooltip="true">
        <el-table-column prop="zhen" label="乡镇"  align="center"/>
        <el-table-column prop="cun" label="村"  align="center" width="180"/>
        <!-- <el-table-column prop="zu" label="组"  align="center"/> -->
        <el-table-column prop="czzrs" label="五保户人口"  align="center"/>
        <el-table-column prop="hjzrs" label="低保户人口"  align="center"/>
        <el-table-column prop="hjxz" label="贫困户人口"  align="center"/>
        <el-table-column prop="czxz" label="党员人口"  align="center"/>
        <el-table-column prop="hjjs" label="退伍军人人口"  align="center"/>


      </el-table>
<!--
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    </div>

    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->





    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><raddar-chart :chart-data="panelChartDataleid"/></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><pie-chart :chart-data="panelChartDatayuanh" /></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper" ><bar-chart :chart-data="panelChartDatazhuzh" /></div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import {treeselect,listDevice, exportPost,listzhex,listleida,listdbyh, listzhuzh,listTsde} from "@/api/index";
import PanelGroup from './dashboard/PanelGroup';
import PanelGroups from './dashboard/PanelGroups';
import PanelGroupone from './dashboard/PanelGroupone';
import PanelGrouptwo from './dashboard/PanelGrouptwo';
import PanelGroupther from './dashboard/PanelGroupther';
import PanelGroupfour from './dashboard/PanelGroupfour';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
const lineChartData = {
  newVisitis: {
    expectedData: [80, 120, 111, 104, 105, 100, 105],
    actualData: [120, 140, 130, 110, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};

export default {
  name: 'Index',
  components: {
    PanelGroup,
    PanelGroups,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    PanelGroupone,
    PanelGrouptwo,
    PanelGroupther,
    PanelGroupfour
  },
  data() {
    return {
      lineChartData: {},
      dayList: 1, //判断天周月
      taye: 'newVisitis', //根据点击天周月变换，折线图数据变换
      panelChartData: {},
      panelChartDatas:{},
      panelChartDataleid:{},
      panelChartDatayuanh:[],
      tableData: [
         {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 388, hjjs: 0, czbfb: "4.02%", cun: 14,zhen: "槎水镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 203, hjjs: 0, czbfb: "2.66%", cun: 6,zhen: "痘姆乡"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 355, hjjs: 0, czbfb: "2.68%", cun: 14,zhen: "官庄镇"},
        {hjzrs: 3, hjxz: 5, hjbfb: "0.00%", czxz: 2, czzrs: 6, zu: 175, hjjs: 1, czbfb: "2.05%", cun: 6,zhen: "黄柏镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 171, hjjs: 0, czbfb: "2.16%", cun: 7,zhen: "黄泥镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 476, hjjs: 0, czbfb: "6.77%", cun: 14,zhen: "黄铺镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 226, hjjs: 0, czbfb: "2.31%", cun: 9,zhen: "龙潭乡"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 497, hjjs: 0, czbfb: "22.50%", cun: 19,zhen: "梅城镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 368, hjjs: 0, czbfb: "4.82%", cun: 14,zhen: "水吼镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 266, hjjs: 0, czbfb: "2.44%", cun: 11,zhen: "塔畈乡"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 115, hjjs: 0, czbfb: "2.47%", cun: 6,zhen: "天柱山镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 415, hjjs: 0, czbfb: "6.86%", cun: 17,zhen: "王河镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 119, hjjs: 0, czbfb: "1.90%", cun: 6,zhen: "五庙乡"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 217, hjjs: 0, czbfb: "2.32%", cun: 6,zhen: "油坝乡"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 522, hjjs: 0, czbfb: "6.19%", cun: 14,zhen: "余井镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 639, hjjs: 0, czbfb: "10.34%", cun: 18,zhen: "源潭镇"},
        {hjzrs: 0, hjxz: 0, hjbfb: "0.00%", czxz: 0, czzrs: 0, zu: 102, hjjs: 0, czbfb: "2.72%", cun: 3,zhen: "开发区"}
      ], //表格数据
      // 总条数
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      deviceIpOptions:{},
      panelChartDatazhuzh:{},
      nhye:false
    };
  },
  computed: {
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: val
        })
      }
    },

  },
  mounted(){
   // this.yuanhaun(1)
   // this.tableList()


   // 折线
   // this.zhexianList()

   // 雷达
   // this.leidaList()
   // 底部圆环
   // this.dbyhList()
   // 柱状图
   // this.zhuzhList()

   //户籍列表
   // this.lisdtwe()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    // 月 周 天 点击
    day(index) {
      this.dayList = index;
      this.yuanhaun(index)
      if (index == 1) {
        // 天
        this.taye = 'newVisitis';
        this.lineChartData = lineChartData[this.taye];
      } else if (index == 2) {
        // 周
        this.taye = 'messages';
        this.lineChartData = lineChartData[this.taye];
      } else {
        // 月
        this.taye = 'purchases';
        this.lineChartData = lineChartData[this.taye];
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // this.ids = selection.map(item => item.id)
      // this.single = selection.length !== 1
      // this.multiple = !selection.length
    },
    // 表格点击事件
    tabclick(val){
      console.log(val)
      this.$router.push({
        path:'./school/temperatures',
        query:{
          val:val,
        }
      })
      },
    // 圆环数据
    yuanhaun(val){
      treeselect(val).then(response => {
        this.deviceIpOptions = response.data;
        this.panelChartDatas = this.deviceIpOptions
      });
    },
    // 列表数据
   tableList(){
     listDevice().then(response => {
       this.tableData = response.data;
       // this.panelChartDatas = this.deviceIpOptions

     });
   },
   // 户籍列表
   lisdtwe(){
      listTsde().then(response => {
        this.deviceIpOptions = response.data;
        this.panelChartDatas = this.deviceIpOptions
      });
   },
   // 折线图数据
   zhexianList(){
     listzhex().then(response => {
       this.lineChartData = response.data;
       this.nhye = true
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 雷达图
   leidaList(){
     listleida().then(response => {
       this.panelChartDataleid = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 底部圆环数据
   dbyhList(){
     listdbyh().then(response => {
       this.panelChartDatayuanh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 柱状图数据
   zhuzhList(){
     listzhuzh().then(response => {
       this.panelChartDatazhuzh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },

   /** 导出按钮操作 */
   handleExport() {
     const queryParams = this.queryParams;
     this.$confirm('是否确认导出?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function() {
         return exportPost();
       }).then(response => {
         this.download(response.msg);
       })
   },
   // 五保户点击
   wbhde(){
     this.$router.push({path: "/business/contraindication"});
     // console.log(this.$store.state.tagsView.visitedViews[0])
     // console.log(  this.$store.state.settings.tagsView,4  )
   },
   dbhde(){
     this.$router.push({path: "/business/vaccinationSite"});
   },
   pkde(){
     this.$router.push({path: "/business/vaccineName"});
   },
   dyde(){
     this.$router.push({path: "/business/keyIndustry"});
   },
   twjrde(){
     this.$router.push({path: "/business/ucleic"});
   },

  }
};
</script>

<style lang="scss">
.tabsty {
  .el-table .el-table__header-wrapper th {
    background-color: #EEF5F8;
    color: #343434;
    border:0 !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f9f9f9;
  }
  .el-table--group,
  .el-table--border {
    // border-color: #0CA0FF;
    border: 1px solid #0CA0FF;
  }
}
</style>

<style lang="scss" scoped>

.header {
  display: flex;
  text-align: left;
  justify-content: flex-end;
  margin-bottom: 12px;
  p {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 700;
    color: #666666;
    cursor: pointer;
  }
  p:nth-child(1)::before {
    width: 1px;
    background-color: #666;
  }
  .heade_cod {
    color: #00a8ec;
  }
  .el-table--border {
    border: 1px solid #0ca0ff !important;
  }
}
p {
  margin: 0;
}
.njues{
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.hedse_radt {
  height: 130px;
  padding-top: 4px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 19%;
  padding-left: 26px;
  padding-bottom: 36px;
  background:url("../assets/images/opic_rylb_wb.png") no-repeat ;
  background-size: 100%, 100%;
  .p {
    position: absolute;
    right: -28px;
    width: 1px;
    height: 70px;
    background-color: #c7cbd7;
    top: 22%;
  }
  .hedse_radtone {
    // margin-bottom: 30px;
    // padding:  0 26px;
    // text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p:nth-child(1) {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      text-align: left;
      color: #fff;
    }
    p:nth-child(2) {

     font-size: 28px;
     font-family: PingFang SC;
     font-weight: bold;
     color: #fff;
      text-align: right;
      padding-right: 13px;
      // width: 100%;
      span{
        font-size: 20px !important;
        font-weight: 400;
      }
    }

  }
  .hedse_radttwo {
    display: flex;
    // padding: 0 26px;
    // justify-content: space-between;
    justify-content: space-around;
    flex: 1;
    div{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    p:nth-child(1) {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
    }
    p:nth-child(2) {
      font-size: 48px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fff;
    }
  }
}
.hedse_radts{
    background:url("../assets/images/opic_rylb_db.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtss{
    background:url("../assets/images/opic_rylb_pk.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtsss{
    background:url("../assets/images/opic_rylb_dy.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtssss{
    background:url("../assets/images/opic_rylb_tw.png") no-repeat ;
    background-size: 100%, 100%;
  }
.nav_raet {
  // padding-top: 24px;
  margin-left: 60px;
  p:nth-child(1) {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
  p:nth-child(2) {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #50bd04;
  }
}
.dashboard-editor-container {
  padding: 32px;
  padding-top: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

// 表格央视
.tabsty {
  background-color: #fff;
  width: 100%;
  margin-top: 16px;
  padding: 0 30px;
  padding-top: 23px;
  padding-bottom: 40px;
  margin-bottom: 36px;
}
.tabbuut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  p:nth-child(1) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
}
.nav_raetone{
  // flex: 1;
  display: flex ;
  // flex-direction: column;
  justify-content: space-between;
  align-content: center;
  // height: 100%;
  text-align: right;
  // padding-top: 18px;
  margin-right: 30px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box;
  padding-left: 20px;

  p:nth-child(1) {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
  p:nth-child(2) {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #50bd04;
  }
}

.p {
      position: absolute;
      right: -18px;
      width: 1px;
      height: 70px;
      background-color: #c7cbd7;
      top: 22%;
    }

    .dp_zhud{

      .dp_zhudtitle{
        margin-bottom: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
    }
</style>