<template>
  <div class="dashboard-editor-container" style="padding-top: 20px">
    <!-- 首页 -->

    <el-row :gutter="20">
      <el-col :span="18">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('visit')">
                <p class="todo-num">{{ todoNum.num1 }}</p>
                <p class="todo-title">待回访客户</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('remote')">
                <p class="todo-num">{{ todoNum.num2 }}</p>
                <p class="todo-title">待完成服务</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('stock')">
                <p class="todo-num">{{ todoNum.num3 }}</p>
                <p class="todo-title">待备货</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('delivery')">
                <p class="todo-num">{{ todoNum.num4 }}</p>
                <p class="todo-title">待发货</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('contractp')">
                <p class="todo-num">{{ todoNum.num6 }}</p>
                <p class="todo-title">待复核款项</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('record')">
                <p class="todo-num">{{ todoNum.num7 }}</p>
                <p class="todo-title">待备案</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="todo-item" @click="form_see_todo_list('contractapp')">
                <p class="todo-num">{{ todoNum.num8 }}</p>
                <p class="todo-title">待审批</p>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
          </div>
          <div class="text item">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="rubtn" @click="jumpSee(1)">合同<br />申请</div>
              </el-col>
              <el-col :span="4">
                <div class="rubtn" @click="jumpSee(2)">出差<br />申请</div>
              </el-col>
              <el-col :span="4">
                <div class="rubtn" @click="jumpSee(3)">报销<br />申请</div>
              </el-col>
              <el-col :span="4">
                <div class="rubtn" @click="jumpSee(4)">备货</div>
              </el-col>
              <el-col :span="4">
                <div class="rubtn" @click="jumpSee(5)">发货</div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- <el-card class="box-card" >
          <div class="">
            <el-row :gutter="20">
              <el-col :span="12">

                <el-date-picker v-model="chart1.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" @change="change_chartdate1"/>

                  <div id="chartPie1"  style="width: 100%;height:400px;"></div>

                  <div class="piettbx">
                    <div class="piettli">
                      <span class="piett">合同收入：</span>
                      <span class="pietxt">{{chartPie1_data.htsr}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">远程服务收入：</span>
                      <span class="pietxt">{{chartPie1_data.ycfwsr}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">现场服务收入：</span>
                      <span class="pietxt">{{chartPie1_data.ycfwsr}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">维修服务收入：</span>
                      <span class="pietxt">{{chartPie1_data.wxfwsr}}</span>
                    </div>
                     <div class="piettli">
                      <span class="piett">总收入：</span>
                      <span class="pietxt">{{chartPie1_data.zsr}}</span>
                    </div>

                  </div>

              </el-col>
              <el-col :span="12">

                  <div id="chartPie2"  style="width: 100%;height:400px;"></div>


                  <div class="piettbx" style="height:200px; overflow: auto;">
                    <div class="piettli">
                      <span class="piett">出差：</span>
                      <span class="pietxt">{{chartPie2_data.chucha}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">物流费：</span>
                      <span class="pietxt">{{chartPie2_data.wlf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">办公费：</span>
                      <span class="pietxt">{{chartPie2_data.bgf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">通讯费：</span>
                      <span class="pietxt">{{chartPie2_data.txf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">业务招待费：</span>
                      <span class="pietxt">{{chartPie2_data.ywzdf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">社保：</span>
                      <span class="pietxt">{{chartPie2_data.sb}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">房租及物业管理费：</span>
                      <span class="pietxt">{{chartPie2_data.fz}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">公积金：</span>
                      <span class="pietxt">{{chartPie2_data.gjj}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">手续费：</span>
                      <span class="pietxt">{{chartPie2_data.sxf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">采购：</span>
                      <span class="pietxt">{{chartPie2_data.cg}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">工资：</span>
                      <span class="pietxt">{{chartPie2_data.gz}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">其他：</span>
                      <span class="pietxt">{{chartPie2_data.qt}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">水电费：</span>
                      <span class="pietxt">{{chartPie2_data.sdf}}</span>
                    </div>
                    <div class="piettli">
                      <span class="piett">交通费：</span>
                      <span class="pietxt">{{chartPie2_data.jtf}}</span>
                    </div>

                  </div>
                  <div>
                    <div class="piettli">
                      <span class="piett">总支出：</span>
                      <span class="pietxt">{{chartPie2_data.zzc}}</span>
                    </div>
                   </div>
              </el-col>
            </el-row>
          </div>
        </el-card> -->

        <!-- <el-card class="box-card">
          <div class="">

            <el-row >
              <div v-show = "showEchart" style="margin-bottom:20px">
                <el-col :span="20">
                  <el-date-picker
                    v-model="chart3.getdataListParm.parammaps.year"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                  </el-date-picker>


                  <el-select v-model="chart3.getdataListParm.parammaps.inName" placeholder="收入类型" class="filter-item" style="width: 120px;" clearable>
                    <el-option v-for="(item,index) in customeStatusList" :key="index" :label="item.name" :value="item.id" />
                  </el-select>

                  <el-select v-model="chart3.getdataListParm.parammaps.outName" placeholder="支出类型" class="filter-item" style="width: 120px;" clearable>
                    <el-option v-for="(item,index) in customeStatusList2" :key="index" :label="item.name" :value="item.id" />
                  </el-select>

                  <el-button class="successBorder" @click="form_search1">查询</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button  class="successBorder"   @click="echartOrTable(1)">切换图表</el-button>
                </el-col>
              </div>
            </el-row>


            <el-row  >
               <div v-show = "showEchart">
                 <div id="chartline1"  style="width: 100%;height:300px;"></div>
               </div>
            </el-row>

             <el-row  >
              <div v-show = "showTable" >
                <el-col :span="20">
                 <el-date-picker
                    v-model="tableObj11.getdataListParm.parammaps.year"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                  </el-date-picker>

                  <el-radio-group v-model="cost">
                    <el-radio-button :label="true">收入</el-radio-button>
                    <el-radio-button :label="false">支出</el-radio-button>
                  </el-radio-group>


                </el-col>
                <el-col :span="4">
                  <el-button  class="successBorder"   @click="echartOrTable(2)">切换图表</el-button>
                </el-col>
              </div>
            </el-row>

            <el-row  >
              <div v-show = "showTable" style="padding-top:20px">
                <div v-show = "showTableSR">
                  <el-table :key="tableObj11.tableKey" v-loading="tableObj11.listLoading" element-loading-text="给我一点时间" :data="tableObj11.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
                    <el-table-column label="时间" min-width="90px" align="center" >
                      <template slot-scope="scope">
                        <span>{{ scope.row.yearMonth }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="合同收入" min-width="90px" align="center" >
                      <template slot-scope="scope">
                        <span>{{ scope.row.htsr }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="远程服务收入" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.ycfwsr }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="现场服务收入" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.xcfwsr }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="维修服务收入" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.wxfwsr }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="合计" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.hj }}</span>
                      </template>
                    </el-table-column>

                  </el-table>
                </div>
                <div v-show = "showTableZC">
                  <el-table :key="tableObj22.tableKey" v-loading="tableObj22.listLoading" element-loading-text="给我一点时间" :data="tableObj22.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
                    <el-table-column label="月份" min-width="90px" align="center" >
                      <template slot-scope="scope">
                        <span>{{ scope.row.yearMonth }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="出差" min-width="90px" align="center" >
                      <template slot-scope="scope">
                        <span>{{ scope.row.chucha }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="物流费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.wlf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="交通费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.jtf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="办公费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.bgf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="办公费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.bgf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="通讯费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.txf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="业务招待费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.ywzdf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="房租及物业管理费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.fz }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="水电费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.sdf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="公积金" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.gjj }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="工资" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.gz }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="手续费" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.sxf }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="采购" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.cg }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="其他费用" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.qt }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="合计" min-width="110px" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ scope.row.hj }}</span>
                      </template>
                    </el-table-column>

                  </el-table>
                </div>
              </div>

            </el-row>

          </div>
        </el-card> -->
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公告栏</span>
          </div>
          <div class="text item" style="padding-bottom: 20px">
            <div
              style="margin-bottom: 20px"
              v-for="(item, index) in newList"
              :key="index"
              @click="on_new_detail_tap(item)"
            >
              <span
                style="
                  display: inline-block;
                  width: 65%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ item.noticetype }}{{ item.noticetitle }}</span
              >
              <span
                style="
                  display: inline-block;
                  width: 34%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ item.createrdate }}</span
              >
            </div>
            <div style="float: right" @click="form_see()">更多公告</div>
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>常用文件</span>
          </div>
          <div class="text item">
            <!-- <span class="fot-txt" @click="form_down(66,'1科湃腾报告PPT模板.pptx')"  style = "color:#409EFF; cursor: pointer;">1科湃腾报告PPT模板</span> -->
            <span
              class="fot-txt"
              @click="form_down(72, '01 科湃腾报告PPT模板.pptx')"
              >01 科湃腾报告PPT模板</span
            >
            <span
              class="fot-txt"
              @click="form_down(73, '02 科湃腾会议纪要模板.doc')"
              >02 科湃腾会议纪要模板</span
            >
            <span
              class="fot-txt"
              @click="form_down(74, '03 科湃腾销售合同-简易版-2024版.docx')"
              >03 科湃腾销售合同-简易版-2024版</span
            >
            <span
              class="fot-txt"
              @click="form_down(75, '04 科湃腾销售合同-标准版-2024版.docx')"
              >04 科湃腾销售合同-标准版-2024版</span
            >
            <span
              class="fot-txt"
              @click="form_down(76, '05 科湃腾补充协议 (2024版).doc')"
              >05 科湃腾补充协议 (2024版)</span
            >
            <span
              class="fot-txt"
              @click="form_down(77, '06 2024年科湃腾易损件及维修价目表.xls')"
              >06 2024年科湃腾易损件及维修价目表</span
            >
            <span
              class="fot-txt"
              @click="form_down(78, '07 科湃腾设备借用协议.docx')"
              >07 科湃腾设备借用协议</span
            >
            <span
              class="fot-txt"
              @click="form_down(79, '08 牧场智能脖环置换协议模板.docx')"
              >08 牧场智能脖环置换协议模板</span
            >
            <span
              class="fot-txt"
              @click="
                form_down(80, '09 科湃腾设备借用协议B样张（未过质保）模板.docx')
              "
              >09 科湃腾设备借用协议B样张（未过质保）模板</span
            >
            <span
              class="fot-txt"
              @click="
                form_down(81, '10 科湃腾设备借用协议A样张（过质保）模板.docx')
              "
              >10 科湃腾设备借用协议A样张（过质保）模板</span
            >
            <span
              class="fot-txt"
              @click="form_down(82, '11 置换表申请模板.xlsx')"
              >11 置换表申请模板</span
            >
            <span
              class="fot-txt"
              @click="form_down(143, '12 科湃腾安装服务单模板 -20240628.xlsx')"
              >12 科湃腾安装服务单模板 -20240628</span
            >
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="公告列表"
      :visible.sync="create.dialogFormVisible"
      :close-on-click-modal="false"
      width="60%"
    >
      <div class="app-add">
        <el-row :gutter="20">
          <div
            style="padding-bottom: 30px;bo"
            v-for="(item, index) in newObj.list"
            :key="index"
            @click="on_new_detail_tap(item)"
          >
            <el-col :span="20">
              【{{ item.noticetype }}】{{ item.noticetitle }}
            </el-col>
            <el-col :span="4">
              {{ item.updatedate }}
            </el-col>
          </div>
        </el-row>
        <pagination
          v-show="newObj.total >= 0"
          :total="newObj.total"
          :page.sync="newObj.getdataListParm.offset"
          :limit.sync="newObj.getdataListParm.pagecount"
          @pagination="getNewListMore"
        />

        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="create.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="公告详情"
      :visible.sync="detailVisible"
      :close-on-click-modal="false"
      width="70%"
    >
      <div
        style="
          text-align: center;
          font-size: 30px;
          padding-bottom: 20px;
          font-weight: bold;
        "
      >
        {{ newObjDetail.noticetitle }}
      </div>
      <div style="text-align: center; font-size: 15px">
        <span style="display: inline-block; padding-right: 30px"
          >【{{ newObjDetail.noticetype }}】</span
        >
        <span style="text-align: right">{{ newObjDetail.updatedate }}</span>
      </div>
      <div v-html="newObjDetail.content" style="height: 500px; overflow: auto">
        <!-- <div >

        </div>
         <div>
          附件下载：
        </div>
           -->

        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="detailVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待回访客户"
      :visible.sync="createVisit.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoVisitList :todo-visit="todoVisit" ref="childVisit" />

        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createVisit.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待完成服务"
      :visible.sync="createComplete.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoCompleteList :todo-complete="todoComplete" ref="childComplete" />

        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createComplete.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待备货"
      :visible.sync="createStock.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoStockList :todo-stock="todoStock" ref="childStock" />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createStock.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待发货"
      :visible.sync="createDelivery.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoDeliveryList :todo-delivery="todoDelivery" ref="childDelivery" />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createDelivery.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待复核款项"
      :visible.sync="createReview.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoReviewList :todo-review="todoReview" ref="childReview" />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createReview.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待备案合同"
      :visible.sync="createRecord.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoRecordList :todo-record="todoRecord" ref="childRecord" />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createRecord.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="待审批"
      :visible.sync="createApply.dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <div class="app-add">
        <ToDoApplyList :todo-apply="todoApply" ref="childRecord" />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="createApply.dialogFormVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { GetDataByName, GetReportform, downloadfileCRM } from "@/api/common";
import Cookies from "js-cookie";
import { parseTime } from "@/utils/index.js";
import echarts from "echarts";
import { json2excel } from "@/utils/index.js";
import Pagination from "@/components/Pagination";
import { getToken } from "@/utils/auth";

import ToDoVisitList from "@/componentView/ToDoVisitList.vue";
import ToDoCompleteList from "@/componentView/ToDoCompleteList.vue";
import ToDoStockList from "@/componentView/ToDoStockList.vue";
import ToDoDeliveryList from "@/componentView/ToDoDeliveryList.vue";
import ToDoReviewList from "@/componentView/ToDoReviewList.vue";
import ToDoRecordList from "@/componentView/ToDoRecordList.vue";
import ToDoApplyList from "@/componentView/ToDoApplyList.vue";

require("echarts/theme/macarons");

// var myKey = 0
export default {
  name: "DashboardEditor",
  components: {
    Pagination,
    ToDoVisitList,
    ToDoCompleteList,
    ToDoStockList,
    ToDoDeliveryList,
    ToDoReviewList,
    ToDoRecordList,
    ToDoApplyList,
  },
  inject: ["reload"],
  watch: {
    cost: {
      deep: true,
      handler: function (item) {
        console.log("cost：", item);
        if (item) {
          this.showTableSR = true;
          this.showTableZC = false;
          this.get_table_data11();
        } else {
          this.showTableSR = false;
          this.showTableZC = true;
          this.get_table_data22();
        }
      },
    },
  },
  data() {
    return {
      todoVisit: { id: "" },
      todoComplete: { id: "" },
      todoStock: { id: "" },
      todoDelivery: { id: "" },
      todoReview: { id: "" },
      todoRecord: { id: "" },
      todoApply: { id: "" },

      val: "这是值1",
      date: parseTime(new Date(), "{y}-{m}-{d}"),
      list: [],
      news: 1,
      carLength: 0, // 车辆
      myKey: 0, // 轮播Key值

      rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
      cellStyle: { padding: 0 + "px" },
      timer: "",

      chart1: {
        getdataListParm: {
          name: "getChart1ByHomepage",
          page: 1,
          offset: 1,
          pagecount: "",
          returntype: "Map",
          parammaps: {
            inputDatetime: "",
            beginDate: "",
            endDate: "",
          },
        },
      },
      chartPie1: null,
      chartPie1_data: {
        htsr: "",
        ycfwsr: "",
        xcfwsr: "",
        wxfwsr: "",
      },

      chart2: {
        getdataListParm: {
          name: "getChart2ByHomepage",
          page: 1,
          offset: 1,
          pagecount: "",
          returntype: "Map",
          parammaps: {
            inputDatetime: "",
            beginDate: "",
            endDate: "",
          },
        },
      },
      chartPie2: null,
      chartPie2_data: {},

      chart3: {
        getdataListParm: {
          name: "getLineChartByHomepage",
          returntype: "lineChart",
          parammaps: {
            year: "2022",
            outName: "总支出",
            inName: "总收入",
          },
        },
      },
      chartLine1: null,

      chartLine1_data: {
        arrtitle: ["总收入", "总支出"],
        monthdate: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        //         arr1:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
        //         arr2:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
      },
      //收入类型 - 下拉框
      customeStatusList: [
        { id: "总收入", name: "总收入" },
        { id: "合同收入", name: "合同收入" },
        { id: "远程服务收入", name: "远程服务收入" },
        { id: "现场服务收入", name: "现场服务收入" },
        { id: "维修服务收入", name: "维修服务收入" },
      ],

      customeStatusList2: [{ id: "总支出", name: "总支出" }],

      showEchartTable: 1,

      showEchart: true,
      showTable: false,

      cost: true,
      showTableSR: true,
      showTableZC: false,

      tableObj11: {
        getdataListParm: {
          name: "getTable1ByHomepage",
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: "Map",
          parammaps: {
            year: "2022",
          },
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {},
      },
      tableObj22: {
        getdataListParm: {
          name: "getTable2ByHomepage",
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: "Map",
          parammaps: {
            year: "2022",
          },
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {},
      },

      newList: [
        // {txt:"【规章制度】科湃腾差旅费报销流程",date:'2022-12-1'},
        // {txt:"【规章制度】科湃腾差旅费报销流程",date:'2022-12-1'},
        // {txt:"【规章制度】科湃腾差旅费报销流程",date:'2022-12-1'},
        // {txt:"【规章制度】科湃腾差旅费报销流程",date:'2022-12-1'},
        // {txt:"【规章制度】科湃腾差旅费报销流程",date:'2022-12-1'}
      ],
      newObj: {
        getdataListParm: {
          name: "getNotice",
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: "Map",
          parammaps: {
            noticetype: "",
            noticetitle: "",
            roleId: Cookies.get("g_roleId"),
          },
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {},
      },
      newObjDetail: {},

      tableObj2: {
        getdataListParm: {
          name: "getChart1ByHomepage",
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: "Map",
          parammaps: {
            customerId: "",
            groupId: "",
          },
        },
        tableKey: 0,
        list: [
          { txt: "【规章制度】科湃腾差旅费报销流程", date: "2022-12-1" },
          { txt: "【规章制度】科湃腾差旅费报销流程", date: "2022-12-1" },
          { txt: "【规章制度】科湃腾差旅费报销流程", date: "2022-12-1" },
          { txt: "【规章制度】科湃腾差旅费报销流程", date: "2022-12-1" },
          { txt: "【规章制度】科湃腾差旅费报销流程", date: "2022-12-1" },
        ],
        total: 0,
        listLoading: true,
        temp: {},
      },

      create: {
        dialogFormVisible: false,
        dialogStatus: "",
        temp: {
          pastureid: Cookies.get("pastureid"),
          customerName: "",
          groupId: "",
          customeStatusName: "",
          customeLevelName: "",
          rangeName: "",
          province: "",
          address: "",
          directorId: "",
          createrId: "",
          director: "",
          creater: "",
          createtime: parseTime(new Date(), "{y}-{m}-{d}"),
          remark: "",
          scode: "",
        },
        rules: {
          customerName: [{ required: true, message: "必填", trigger: "blur" }],
          groupId: [{ required: true, message: "必填", trigger: "blur" }],
          customeStatusName: [
            { required: true, message: "必填", trigger: "blur" },
          ],
          directorId: [{ required: true, message: "必填", trigger: "blur" }],
          scode: [{ required: true, message: "必填", trigger: "blur" }],
        },
      },

      detailVisible: false,
      detailTxt:
        "第一条：报销范围1.为本公司实际业务发生的费用。2.费用包括：交通费和业务招待费。3.人事部、技术部、财务部以及其他内勤人员的费用一般限于通讯费和交通费，如有特殊事因需要招待外部单位需要经公司主管批准。4.本报销范围指的是一天以上，当天往返不属于出差。第二条：报销时间1.发票期限以月度为时间单位报销。2.每月底前将当月费用的审批单根据规定签署批准后，送达财务部审核。",

      createVisit: {
        dialogFormVisible: false,
      },

      createComplete: {
        dialogFormVisible: false,
      },

      createStock: {
        dialogFormVisible: false,
      },

      createDelivery: {
        dialogFormVisible: false,
      },

      createReview: {
        dialogFormVisible: false,
      },

      createRecord: {
        dialogFormVisible: false,
      },

      createApply: {
        dialogFormVisible: false,
      },

      todoNum: {
        num1: "",
        num2: "",
        num3: "",
        num4: "",
        num5: "",
        num6: "",
        num7: "",
        num8: "",
      },
    };
  },
  created() {
    // this.getChart1()
    // this.getChart2()
    // this.getLine1()
    this.getNewList();
    this.getNewListMore();

    this.getTodoNum();

    var isTodo = this.$route.params.isTodo;

    console.log("isTodo", isTodo);

    if (isTodo == "visit") {
      this.form_see_todo_list("visit");
    }
    if (isTodo == "telephone") {
      this.form_see_todo_list("telephone");
    }
    if (isTodo == "stock") {
      this.form_see_todo_list("stock");
    }
    if (isTodo == "delivery") {
      this.form_see_todo_list("delivery");
    }

    if (isTodo == "remote") {
      this.form_see_todo_list("remote");
    }
    if (isTodo == "site") {
      this.form_see_todo_list("site");
    }
    if (isTodo == "repair") {
      this.form_see_todo_list("repair");
    }

    if (isTodo == "contractp") {
      this.form_see_todo_list("contractp");
    }
    if (isTodo == "remotep") {
      this.form_see_todo_list("remotep");
    }
    if (isTodo == "sitep") {
      this.form_see_todo_list("sitep");
    }
    if (isTodo == "repairp") {
      this.form_see_todo_list("repairp");
    }
    if (isTodo == "expensesp") {
      this.form_see_todo_list("expensesp");
    }

    if (isTodo == "record") {
      this.form_see_todo_list("record");
    }

    if (isTodo == "contractapp") {
      this.form_see_todo_list("contractapp");
    }
    if (isTodo == "businessapp") {
      this.form_see_todo_list("businessapp");
    }
    if (isTodo == "expenseapp") {
      this.form_see_todo_list("expenseapp");
    }
  },
  mounted() {
    // this.roadchartPie1()
    // this.roadchartPie2()
    // this.roadchartLine1()
    // this.get_table_data11()
  },
  destroyed() {},
  methods: {
    getTodoNum() {
      var send_data = {
        name: "getToDoNums",
        page: 1,
        offset: 1,
        pagecount: "",
        returntype: "Map",
        parammaps: { userId: Cookies.get("g_userId") },
      };

      GetDataByName(send_data).then((response) => {
        console.log("getToDoNums", response);
        if (response.data.list !== null) {
          this.todoNum = response.data.list[0];
        } else {
        }
      });
    },

    echartOrTable(e) {
      console.log(e);
      if (e == 1) {
        this.showEchart = false;
        this.showTable = true;
        this.showTableSR = true;
        this.showTableZC = false;
        this.get_table_data11();
      }

      if (e == 2) {
        this.showEchart = true;
        this.showTable = false;
        this.showTableSR = false;
        this.showTableZC = false;
        this.getLine1();
      }
    },

    change_chartdate1() {
      console.log("点击了查询", this.chart1.getdataListParm.parammaps);
      if (
        this.chart1.getdataListParm.parammaps.inputDatetime !== "" &&
        this.chart1.getdataListParm.parammaps.inputDatetime !== null
      ) {
        this.chart1.getdataListParm.parammaps.beginDate = parseTime(
          this.chart1.getdataListParm.parammaps.inputDatetime[0],
          "{y}-{m}-{d}"
        );
        this.chart1.getdataListParm.parammaps.endDate = parseTime(
          this.chart1.getdataListParm.parammaps.inputDatetime[1],
          "{y}-{m}-{d}"
        );
      } else {
        this.chart1.getdataListParm.parammaps.inputDatetime = "";
        this.chart1.getdataListParm.parammaps.beginDate = "";
        this.chart1.getdataListParm.parammaps.endDate = "";
      }

      if (
        this.chart2.getdataListParm.parammaps.inputDatetime !== "" &&
        this.chart2.getdataListParm.parammaps.inputDatetime !== null
      ) {
        this.chart2.getdataListParm.parammaps.beginDate = parseTime(
          this.chart2.getdataListParm.parammaps.inputDatetime[0],
          "{y}-{m}-{d}"
        );
        this.chart2.getdataListParm.parammaps.endDate = parseTime(
          this.chart2.getdataListParm.parammaps.inputDatetime[1],
          "{y}-{m}-{d}"
        );
      } else {
        this.chart2.getdataListParm.parammaps.inputDatetime = "";
        this.chart2.getdataListParm.parammaps.beginDate = "";
        this.chart2.getdataListParm.parammaps.endDate = "";
      }

      this.chart1.getdataListParm.offset = 1;
      this.getChart1();
      this.getChart2();
      //this.get_table_data()
    },

    form_search1() {
      console.log("点击了查询");

      // if (this.chart1.getdataListParm.parammaps.inputDatetime1 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime1 !== null) {
      //   this.tableObj.getdataListParm.parammaps.beginDeclareDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[0], '{y}-{m}-{d}')
      //   this.tableObj.getdataListParm.parammaps.endDeclareDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[1], '{y}-{m}-{d}')
      // } else {
      //   this.tableObj.getdataListParm.parammaps.inputDatetime1 = ''
      //   this.tableObj.getdataListParm.parammaps.beginDeclareDate = ''
      //   this.tableObj.getdataListParm.parammaps.endDeclareDate = ''
      // }
      //this.tableObj.getdataListParm.offset = 1
      this.chartLine1_data.arrtitle[0] =
        this.chart3.getdataListParm.parammaps.inName;
      this.chartLine1_data.arrtitle[1] =
        this.chart3.getdataListParm.parammaps.outName;
      console.log(this.chartLine1_data);
      this.getLine1();
    },

    jumpSee(e) {
      if (e == 1) {
        this.$router.push({ name: "ContractApply", params: {} });
      }

      if (e == 2) {
        this.$router.push({ name: "BusinessTravel", params: {} });
      }
      if (e == 3) {
        this.$router.push({ name: "ExpensesApply", params: {} });
      }
      if (e == 4) {
        this.$router.push({ name: "stockNotice", params: {} });
      }

      if (e == 5) {
        this.$router.push({ name: "deliveryRecord", params: {} });
      }
    },
    getChart1() {
      this.chart1.listLoading = true;

      GetDataByName(this.chart1.getdataListParm).then((response) => {
        console.log("chartPie1_data", response.data.list);
        if (response.data.list !== null) {
          var chartPie1_data = response.data.list[0];
          this.chartPie1_data = chartPie1_data;
          this.roadchartPie1();
        } else {
          this.chart1.list = [];
        }
        setTimeout(() => {
          this.chart1.listLoading = false;
        }, 100);
      });
    },
    roadchartPie1() {
      if (this.chartPie1 != null) {
        this.chartPie1.dispose();
      }
      this.chartPie1 = echarts.init(document.getElementById("chartPie1"));
      var option = {
        series: [
          {
            name: "",
            type: "pie",
            radius: [10, 100],
            center: ["50%", "50%"],

            itemStyle: {
              borderRadius: 8,
            },
            label: {
              formatter: "{b|{b}：}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              lineHeight: 22,
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              //  { value: 300, name: '合同收入' },
              // { value: 200, name: '维修服务收入' },
              // { value: 200, name: '现场服务收入' },
              // { value: 20, name: '远程服务收入' }
              { value: this.chartPie1_data.htsr, name: "合同收入" },
              { value: this.chartPie1_data.wxfwsr, name: "维修服务收入" },
              { value: this.chartPie1_data.xcfwsr, name: "现场服务收入" },
              { value: this.chartPie1_data.ycfwsr, name: "远程服务收入" },
            ],
          },
        ],
      };

      this.chartPie1.setOption(option);
      window.onresize = function () {
        this.chartPie1.resize();
      };
    },

    getChart2() {
      this.chart2.listLoading = true;

      GetDataByName(this.chart2.getdataListParm).then((response) => {
        console.log("chartPie2_data", response.data.list);
        if (response.data.list !== null) {
          var chartPie2_data = response.data.list[0];
          this.chartPie2_data = chartPie2_data;
          this.roadchartPie2();
        } else {
          this.chart2.list = [];
        }
        setTimeout(() => {
          this.chart2.listLoading = false;
        }, 100);
      });
    },

    roadchartPie2() {
      if (this.chartPie2 != null) {
        this.chartPie2.dispose();
      }
      this.chartPie2 = echarts.init(document.getElementById("chartPie2"));
      var option = {
        series: [
          {
            name: "",
            type: "pie",
            radius: [10, 100],
            center: ["50%", "50%"],

            itemStyle: {
              borderRadius: 8,
            },
            label: {
              formatter: "{b|{b}：}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              lineHeight: 22,
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: this.chartPie2_data.chucha, name: "出差" },
              { value: this.chartPie2_data.wlf, name: "物流费" },
              { value: this.chartPie2_data.bgf, name: "办公费" },
              { value: this.chartPie2_data.txf, name: "通讯费" },
              { value: this.chartPie2_data.ywzdf, name: "业务招待费" },
              { value: this.chartPie2_data.sb, name: "社保" },
              { value: this.chartPie2_data.fz, name: "房租及物业管理费" },
              { value: this.chartPie2_data.gjj, name: "公积金" },
              { value: this.chartPie2_data.sxf, name: "手续费" },
              { value: this.chartPie2_data.cg, name: "采购" },
              { value: this.chartPie2_data.gz, name: "工资" },
              { value: this.chartPie2_data.qt, name: "其他" },
              { value: this.chartPie2_data.sdf, name: "水电费" },
              { value: this.chartPie2_data.jtf, name: "交通费" },
            ],
          },
        ],
      };

      this.chartPie2.setOption(option);
      window.onresize = function () {
        this.chartPie2.resize();
      };
    },
    getLine1() {
      GetDataByName(this.chart3.getdataListParm).then((response) => {
        console.log("chartLine1_data", response.data.list);
        if (response.data.list !== null) {
          this.chartLine1_data.arr1 = response.data.chartline1_data.arr1;
          this.chartLine1_data.arr2 = response.data.chartline1_data.arr2;
          this.roadchartLine1();
        } else {
        }
        setTimeout(() => {
          this.chart1.listLoading = false;
        }, 100);
      });
    },

    roadchartLine1() {
      if (this.chartline1 != null) {
        this.chartline1.dispose();
      }
      this.chartline1 = echarts.init(document.getElementById("chartline1"));
      var option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.chartLine1_data.arrtitle,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: this.chartLine1_data.arrtitle[0],
            type: "line",
            stack: "Total",
            data: this.chartLine1_data.arr2,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: this.chartLine1_data.arrtitle[1],
            type: "line",
            stack: "Total",
            data: this.chartLine1_data.arr1,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };

      this.chartline1.setOption(option);
      window.onresize = function () {
        this.chartline1.resize();
      };
    },

    //加载表格
    get_table_data11() {
      this.tableObj11.listLoading = true;
      GetDataByName(this.tableObj11.getdataListParm).then((response) => {
        console.log("table数据", response.data.list);
        if (response.data.list !== null) {
          this.tableObj11.list = response.data.list;
          this.tableObj11.pageNum = response.data.pageNum;
          this.tableObj11.pageSize = response.data.pageSize;
          this.tableObj11.total = response.data.total;
        } else {
          this.tableObj11.list = [];
        }
        setTimeout(() => {
          this.tableObj11.listLoading = false;
        }, 100);
      });
    },

    get_table_data22() {
      this.tableObj22.listLoading = true;

      this.tableObj22.getdataListParm.parammaps.year =
        this.tableObj11.getdataListParm.parammaps.year;
      GetDataByName(this.tableObj22.getdataListParm).then((response) => {
        console.log("table数据", response.data.list);
        if (response.data.list !== null) {
          this.tableObj22.list = response.data.list;
          this.tableObj22.pageNum = response.data.pageNum;
          this.tableObj22.pageSize = response.data.pageSize;
          this.tableObj22.total = response.data.total;
        } else {
          this.tableObj22.list = [];
        }
        setTimeout(() => {
          this.tableObj22.listLoading = false;
        }, 100);
      });
    },

    getNewList() {
      var send_data = {
        name: "getNoticeByHomepage",
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: "Map",
        parammaps: {
          roleId: Cookies.get("g_roleId"),
        },
      };

      GetDataByName(send_data).then((response) => {
        console.log("table数据", response.data.list);
        if (response.data.list !== null) {
          if (response.data.list.length > 5) {
            this.newList[0] = response.data.list[0];
            this.newList[1] = response.data.list[1];
            this.newList[2] = response.data.list[2];
            this.newList[3] = response.data.list[3];
            this.newList[4] = response.data.list[4];
          } else {
            this.newList = response.data.list;
          }
        } else {
          this.newObj.list = [];
        }
        setTimeout(() => {
          this.newObj.listLoading = false;
        }, 100);
      });
    },

    getNewListMore() {
      GetDataByName(this.newObj.getdataListParm).then((response) => {
        console.log("table数据", response.data.list);
        if (response.data.list !== null) {
          this.newObj.list = response.data.list;
          this.newObj.pageNum = response.data.pageNum;
          this.newObj.pageSize = response.data.pageSize;
          this.newObj.total = response.data.total;
        } else {
          this.newObj.list = [];
        }
        setTimeout(() => {
          this.newObj.listLoading = false;
        }, 100);
      });
    },

    form_see(row) {
      this.create.dialogStatus = "see";
      this.create.dialogFormVisible = true;
      console.log("点击了查看", row);
      this.$nextTick(() => {
        this.$refs.temp.resetFields();
        this.create.temp = Object.assign({}, row);
      });
    },

    on_new_detail_tap(row) {
      this.detailVisible = true;
      console.log("点击了查看", row);
      var send_data = {
        name: "getNoticeById",
        parammaps: {
          id: row.id,
        },
      };

      GetDataByName(send_data).then((response) => {
        console.log("查询", response);
        if (response.msg !== "fail") {
          this.newObjDetail = response.data.list[0];
        } else {
          this.newObjDetail = {};
        }
      });
    },

    form_down(fileId, fileName) {
      var send_data = {
        fileId: fileId,
      };

      downloadfileCRM(send_data).then((res) => {
        const content = res;
        const blob = new Blob([content]);

        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });

      // const url = process.env.VUE_APP_BASE_API + 'downloadfileCRM' // 根目录+后端下载的接口
      // axios({
      //   method: 'POST',
      //   url: url,
      //   data: send_data,
      //   headers: { token: getToken(), optname: 'insertcustomdoc' },
      //   responseType: 'blob'
      // }).then(res => {

      //   const content = res
      //   const blob = new Blob([content])

      //   if ('download' in document.createElement('a')) { // 非IE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // 释放URL 对象
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }

      // })
    },

    form_see_todo_list(e) {
      this.create.dialogStatus = "see";

      if (e == "visit" || e == "telephone") {
        this.createVisit.dialogFormVisible = true;
      }

      if (e == "remote" || e == "site" || e == "repair") {
        this.createComplete.dialogFormVisible = true;
      }

      if (e == "stock") {
        this.createStock.dialogFormVisible = true;
      }

      if (e == "delivery") {
        this.createDelivery.dialogFormVisible = true;
      }

      if (
        e == "contractp" ||
        e == "remotep" ||
        e == "sitep" ||
        e == "repairp" ||
        e == "expensesp"
      ) {
        this.createReview.dialogFormVisible = true;
      }

      if (e == "record") {
        this.createRecord.dialogFormVisible = true;
      }

      if (e == "contractapp" || e == "businessapp" || e == "expenseapp") {
        this.createApply.dialogFormVisible = true;
      }
    },
  },
};
</script>
<style>
.todo-item {
  display: inline-block;
  cursor: pointer;
}
.todo-num {
  font-size: 25px;
  color: #1767a6;
  text-align: right;
  font-weight: bold;
  margin-bottom: -8px;
}
.todo-title {
  font-size: 16px;
  color: #1767a6;
}

.box-card {
  margin-bottom: 20px;
}
.piettbx {
  height: 200px;
}
.piettli {
  padding-bottom: 10px;
}
.piett {
  width: 200px;
  font-weight: bold;
  display: inline-block;
  text-align: right;
  font-size: 14px;
}
.pietxt {
  font-size: 14px;
}

.rubtn {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid #333;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  padding-top: 20px;
}

.fot-txt {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #1767a6;
  cursor: pointer;
}

#title {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 120px;
  left: 80px;
  z-index: 99;
  font-size: 20px;
}
#dong {
  min-height: 100%;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 120px;
  left: 80px;
  background: url("../../../assets/images/dong.gif") no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.dashboard-editor-container {
  min-height: 100%;
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  /* background: url("../../../assets/images/index-bg.png") no-repeat; */
  background-size: 100%;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fff;
  min-height: 100vh;
  .news {
    width: 70%;
    height: 30px;
    background: #fff;
    margin: 0 auto;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
    color: red;
    b {
      color: #000;
    }
  }

  .bottom {
    padding: 0 30px;
    h4 {
      text-align: right;
    }
    .grid-content {
      background: #fff;
      height: 90px;
      border-radius: 10px;
    }
    .one {
      border: 1px solid #82cbb3;
      height: 90px;
      .Left {
        float: left;
        width: 65px;
        text-align: center;
        i {
          font-size: 36px;
          color: #82cbb3;
          line-height: 90px;
        }
      }
      .Right {
        float: left;
        margin-top: 15px;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        span {
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .two {
      border: 1px solid #ff9900;
      .Left {
        float: left;
        width: 65px;
        text-align: center;
        i {
          font-size: 36px;
          color: #ff9900;
          line-height: 90px;
        }
      }
      .Right {
        float: left;
        margin-top: 15px;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        span {
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .three {
      border: 1px solid #0099ff;
      .Left {
        float: left;
        width: 65px;
        text-align: center;
        i {
          font-size: 36px;
          color: #0099ff;
          line-height: 90px;
        }
      }
      .Right {
        float: left;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        margin-top: 15px;
        span {
          display: inline-block;
          width: 130px;
          text-align: right;
        }
      }
    }
    .four {
      border: 1px solid #ff5c5c;
      .Left {
        float: left;
        width: 55px;
        text-align: center;
        i {
          font-size: 36px;
          color: #ff5c5c;
          line-height: 90px;
        }
      }
      .Right {
        float: left;
        flex: 1;
        height: 60px;
        font-weight: 600;
        font-size: 14px;
        line-height: 30px;
        margin-top: 15px;
        span {
          display: inline-block;
          width: 150px;
          text-align: right;
        }
      }
    }

    .car {
      width: 100%;
      height: 150px;
      display: flex;
      display: -webkit-flex;
      -webkit-flex-direction: row;
      i {
        font-size: 50px;
        width: 50px;
        display: block;
        line-height: 150px;
      }
      .carList {
        flex: 1;
        height: 130px;
        .list {
          height: 130px;
          color: #fff;
          // box-shadow: #000 0px 0px 10px;
          // border-radius: 10px;
          .list-l {
            p {
              padding-left: 10px;
              font-size: 13px;
              line-height: 16px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          .list-r {
            p {
              font-size: 13px;
              line-height: 16px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>
